스타일시트 함수겹침문제

스타일시트 함수겹침문제

QA

스타일시트 함수겹침문제

답변 2

본문

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 만 스타일이 적용됩니다.

 

의미는 이런데 다르게 적용시키시려면 이렇게 해도 무방할듯해요.

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 25
© SIRSOFT
현재 페이지 제일 처음으로