스타일시트 함수겹침문제
본문
http://sitemake.kr/2.php 의 메뉴를 http://sitemake.kr/ 에 적용하고자 합니다.
그대로 잡아넣으면 스타일적용 안되는 이유는 li함수가 겹치는 이유때문일까요?
고수님들 해결방법좀 부탁드립니다.
<!doctype html>
<html lang="ko">
<head>
<!-- sitemake.kr 메뉴 -->
<style class="cp-pen-styles">
.wrapper {
margin: 0px 30px;
}
.box {
background: white;
min-height: 100px;
max-width: 500px;
margin: 30px auto;
display: flex;
flex: column nowrap;
align-content: flex-start;
justify-content: center;
align-items: center;
}
a {
color: white;
font-family: sans-serif;
text-transform: uppercase;
font-size: .7rem;
font-weight: bold;
letter-spacing: .1rem;
text-decoration: none;
padding: 10px;
}
/* 'hello my name is' tag */
.btn.four {
transition: all 1s ease-in-out;
}
.btn.four a {
background: #eee;
color: #aaa;
font-size: .72rem;
letter-spacing: .05rem;
transition: all 400ms ease 0.1s;
}
.btn.four a:hover {
transition: all 600ms ease 0.1s;
background: white;
color: #A44A3F;
}
.btn.four ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
padding: 20px 10px;
}
.btn.four li {
float: left;
z-index: 2;
}
.btn.four li a {
display: inline;
z-index: 2;
}
.btn.four ul li {
/*&:first-child a:hover:before {
top: -10px;
left: -5px;
background: #3F7CAC;
height: 100%;
transition: all 300ms;
visibility: visible;
}
&:last-child a:hover:before {
top: 10px;
right: -5px;
background: #3F7CAC;
height: 100%;
transition: all 300ms;
visibility: visible;
}*/
}
.btn.four ul li a {
position: relative;
}
.btn.four ul li a:before {
position: absolute;
display: block;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
height: 0px;
z-index: -1;
content: "";
visibility: hidden;
border-radius: 3px;
transition: all 400ms ease 0.1s;
}
.btn.four ul li a:hover:before {
height: 47px;
background: #3F7CAC;
position: absolute;
display: block;
margin: auto;
content: "";
transition: all 600ms ease 0.1s;
visibility: visible;
}
</style></head><body>
<div class="wrapper">
<div class = "box">
<nav class="btn four">
<ul>
<li><a href="http://sitemake.kr/bbs/content.php?co_id=company">회사소개</a></li>
<li><a href="http://sitemake.kr/bbs/content.php?co_id=sitemake">사이트제작</a></li>
<li><a href="http://sitemake.kr/bbs/write.php?bo_table=siteorder">제작의뢰</a></li>
<li><a href="http://sitemake.kr/bbs/board.php?bo_table=gallery">포트폴리오</a></li>
<li><a href="http://sitemake.kr/bbs/qalist.php">1:1 문의</a></li>
</ul>
</nav>
</div>
</div><!-- /.wrapper -->
</body></html>
답변 2
.css > ul 형식으로 진행해보시고 그래도 안되면
옵션뒤에 important를 넣어보세요
board:1px solid #000!important;
이런식으로요
important를 넣으면 그누의 ul함수까지 새로 추가한 함수를 따라가지않나요?
아 어렵네요,
혹시 그누에 삽입해도 그누스타일함수랑 겹치지 않도록 수정좀 가능하실까요?
비교를 해봐가면서 공부하고싶습니다.
그리고 .css-ul은 대충알겠는데 .css>ul 해석좀 가능할까요.
GKTEAM 님의 말씀대로 하면 될거같아요
.btn ul
이렇게 css에 적용하면 클래스가 btn에 안에 ul 은 스타일이다 먹어라 라는 의미인데요
.btn > ul
이거는 클래스가 btn 다음에 오는 ul 만 스타일이 적용됩니다.
의미는 이런데 다르게 적용시키시려면 이렇게 해도 무방할듯해요.
.btn.four ul li a:before { 의 경우
.btn.four > ul > li > a:before { 맞나요?
지비아이님 죄송합니다. 맨 처음 답변자님 채택좀 하겠습니다^^;
답변을 작성하시기 전에 로그인 해주세요.