두 개의 클래스가 하나의 div에 할당되면 클래스가 무시됩니다.

Question 1

썸네일 갤러리가 될 태그에 <div>대해 두 개의 클래스를 적용하려는 태그를 만들고있었습니다 <div>. 위치에 대한 한 클래스와 스타일에 대한 다른 클래스. 이런 식으로 스타일을 적용 할 수 있었고 이상한 결과가 나왔고 질문이 생겼습니다.

<div>태그에 두 개의 클래스를 할당 할 수 있습니까 ? 그렇다면 어느 것이 다른 것을 무시하거나 어느 것이 우선 순위를 가지고 있습니까?

Question 2

div에 여러 클래스를 할당 할 수 있습니다. 클래스 이름에서 다음과 같이 공백으로 구분하십시오.

<div class="rule1 rule2 rule3">Content</div>

그러면이 div는 세 가지 클래스 선택기 .rule1, .rule2및 .rule3.

CSS 규칙은 스타일 시트에서 발생하는 순서대로 자신의 선택기 일치하고 페이지에있는 개체에 적용되는 두 가지 규칙 (하나 이상의 규칙이 같은 속성을 설정하려고), 다음 사이에 충돌이있는 경우 CSS 특이성 결정한다은 규칙이 우선합니다.

충돌하는 규칙에 대해 CSS 특이성이 동일하면 나중에 스타일 시트 또는 이후 스타일 시트에 정의 된 것이 우선합니다. 객체 자체의 클래스 이름 순서는 중요하지 않습니다. CSS 특이성이 동일한 경우 중요한 것은 스타일 시트의 스타일 규칙 순서입니다.

따라서 다음과 같은 스타일이 있다면 :

.rule1 {
    background-color: green;
}

.rule2 {
    background-color: red;
}

그런 다음 두 규칙이 div와 일치하고 정확히 동일한 CSS 특이성을 갖기 때문에 두 번째 규칙이 나중에 나오므로 우선 순위가 있고 배경이 빨간색이됩니다.

한 규칙의 CSS 특이성이 div.rule1더 높은 경우 ( 보다 높은 점수 .rule2) :

div.rule1 {
    background-color: green;
}

.rule2 {
    background-color: red;
}

그런 다음 우선권을 가지며 여기의 배경색은 녹색이됩니다.

두 규칙이 충돌하지 않는 경우 :

.rule1 {
    background-color: green;
}

.rule2 {
    margin-top: 50px;
}

그러면 두 규칙이 모두 적용됩니다.

Question 3

실제로 CSS에서 마지막으로 정의 된 클래스가 div에 적용됩니다.

확인 해봐:

CSS에서 마지막 빨간색

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

<div class="blue red">blue red</div>
<div class="red blue">red blue</div>

스 니펫 확장

vs

css에서 파란색 마지막

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

<div class="blue red">blue red</div>
<div class="red blue">red blue</div>

스 니펫 확장

Question 4

동일한 속성이 있는지 묻는 경우 CSS 규칙에 따라 마지막 문장을 사용합니다.

<div class="red green"></div>

CSS

.red{
 color:red;
}
.green{
 color:green;
}

위의 예에 따라 .green 인 CSS 트리에 따라 마지막 문을 사용 합니다.

Question 5

CSS에서 마지막으로 정의 된 클래스가 다른 것이 적용되지 않으면 우선 순위가 있습니다.

CSS 우선 순위 를 읽어 보고 어떻게 작동하는지 확인하세요.

Question 6

요소에 많은 클래스를 할당 할 수 있으며 공백으로 구분하면됩니다.

<div class="myClass aSecondClass keepOnClassing stayClassySanDiego"></div>

CSS의 캐스케이드 때문에 문서 하단 에 가장 가까운 덮어 쓰기 규칙 이 요소에 적용됩니다.

그래서 만약 당신이

.myClass
{
    background: white;
    color: blue;
}

.keepOnClassing
{
    color: red;
}

빨간색은 사용되지만 배경색은 덮어 쓰지 않았으므로 사용되지 않습니다.

CSS 특이성도 고려해야합니다. 더 구체적인 선택자가있는 경우 다음 항목이 사용됩니다.

.myClass
{
    background: white;
    color: blue;
}

div.myClass.keepOnClassing
{
    background: purple;
    color: red;
}

.stayClassySanDiego
{
    background: black;
}

여기에서 두 번째 선택기는 더 구체적이므로 사용됩니다.

여기에서 모두 살펴볼 수 있습니다 .