선택자의 우선순위, class, id, inline, important

*동급의(같은)선택자 아래에 작성한것이 우선.

p{
  color:blue;
  }

==================
  
p{                // 이 것이 우선
  color:red;
  }                

이럴경우 마지막 red 값들어간 p 태그가 우선된다.

 

하지만 구체적으로 쓰면

.area p{
  color:blue;
  }
p{
  color:red;
  }

blue값의 p 태그가 우선된다. 구체적으로 클래스를 써줬다.

 

#text{
    color:green;
    }

.area p{
    color:blue;
    }

p{
    color:red;
    }

 

=============================================

순위 점수를 매기면

*(모든선택자) 0

태그선택자 1

class 10

id 100

inline style 1000

 

inline style 1000 (태그안에 직접 스타일이 들어왔을때) - 적절치 않다.

=============================================

 

#text2{
      color:red;
      }

<p id="text2" style="color:blue">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Nulla, aperiam, blanditiis maxime quisquam eum sunt voluptatibus
    voluptate earum nihil omnis quis rerum voluptates optio doloremque
    provident iure cumque quasi nam.
</p>

#text2 {color:red;}을 줘도 바뀌지않는다.

inline style 점수가 젤높기때문에 style="color:blue" 가 우선된다.

 

※하지만 html에 style을 직접 넣는건 옳지않다.

 

 

 

- inline style 보다 우선되는것

#text2{
      color:red !important;
      }
#text2{
      color:black;
      }

red가 먹힌다.

!important 를 붙여준다.

color:red !important;

 

 

 

§언제쓰이냐면 다른 퍼블리셔의 소스를 가져와서 작업할때 네이밍이 겹쳐서 css 안먹는 경우

SI업체에서 암호화 하기때문에 어글리파이 해서 공개안되게 뭉게버린다.

그럴경우 선택해서 바꾸기 불가능하기때문에 사용된다.