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

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

---

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

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

---

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;
}

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

---

실제로 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>

---

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

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

CSS

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

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

---

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

Read up on CSS priority to see how it works.

---

Many classes can be assigned to an element, you just separate them with a space

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

Because of the cascade in CSS, the overwriting rules closest the to bottom of the document will be applied to the element.

So if you have

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

.keepOnClassing
{
    color: red;
}

The red color will be used, but not the background color as it was not overwritten.

You must also take into account CSS specificity, if you have a more specific selector, this one will be used:

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

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

.stayClassySanDiego
{
    background: black;
}

The second selector here will be used as it is more specific.

You can take a look at it all here.

참고URL : https://stackoverflow.com/questions/12258596/class-overrule-when-two-classes-assigned-to-one-div