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