본문 바로가기

화면구현/css

css-선택자

  <style>
    a {
      color:black;
      text-decoration: none;
    }
    .saw{
      color:gray;
    }
    #active{
      color:red;
    }
    h1{
      font-size: 45px;
      text-align:center;
    }
  </style>
    <li><a href="1.html"class="saw" >HTML</a></li>
    <li><a href="2.html" class="saw" id="active">CSS</a></li>

class라고 하는 html속성 사용 속성값ㅇ로 sqw지정

saw라는 class값을 가진 태그 2개를 만듦

.saw와 같이 .을 붙이면 class가 saw인 태그를 가리키는 선택자가 된다.

 

 

  • 선택자 우선순위

같은 선택자라면 보다 최근/마지막에 있는 명령이 더 큰 영향력을 갖는다.

 

tag선택자<class 선택자<id선택자

 

id값은 중복되면 안된다. 때문에 tag선택자가 id선택자보다 포괄적이다. 좀 더 구체적인 것을 포괄적인 것보다 우선순위를 높였다.

 

 

css slector 검색 가능

'화면구현 > css' 카테고리의 다른 글

css-flexbox/연습  (0) 2022.07.15
css-미디어 쿼리(반응형 웹)  (0) 2022.07.11
css-그리드  (0) 2022.07.07
css-박스모델  (0) 2022.07.07
css-기본 문법(css삽입하기)  (0) 2022.07.06