왜`content : ""`아래의 선택자를 무효화합니까?

Question

매우 이상한 문제가 있습니다.

은 그래서 CSS의 거대한 더미가 있고, 그 안에 많은 선택기 중, 난 그냥 잘 작동되는, 다음과 같습니다 선택이 있습니다

.spoilertop, #QUOTETOP, #CODETOP, .utubetop { 
    padding-left: 44px; 
    font-size:12px; 
} 

을하지만 내가처럼 보이는 선택기를 추가 이 바로 위에 :

.spoilermain:after, #QUOTE:after { 
    content: ""; 
    position: absolute; 
    top: -24px; 
    left: 12px; 
    border-width: 24px 24px 0 0; 
    border-color: transparent #766161; 
    border-style: solid; 
    display: block; 
    width: 0; 
}​ 

그리고 나서 spoilertop, #QUOTETOP, #CODETOP, .utubetop { }이 작동을 멈 춥니 다. 그것은 내가 부여해야만하는 시각 효과를 내게주지 않습니다.

다른 선택기로 다시 테스트했습니다.

#recaptcha { 
    background:#766161!important; 
    font-size:11px; 
} 

그럼 내가 그 위에이 추가 :

.utubemain:after, #CODE:after { 
    content: ""; 
    position: absolute; 
    top: -24px; 
    left: 12px; 
    border-width: 24px 24px 0 0; 
    border-color: transparent #c08f84; 
    border-style: solid; 
    display: block; 
    width: 0; 
}​ 

다시, #recaptcha { } 정지 작업 I는 다음과 같습니다 셀렉터가 있습니다.

속성을 하나씩 제거하려고 시도했는데 content: "";이 문제를 일으키는 것으로 나타났습니다. 현재 솔루션은 사용되지 않는 임의의 선택기를 { content: ""; } 아래에 넣습니다. 그래서 예를 들어, 그것은 다음과 같이 표시됩니다

.spoilermain:after, #QUOTE:after { 
    content: ""; 
    position: absolute; 
    top: -24px; 
    left: 12px; 
    border-width: 24px 24px 0 0; 
    border-color: transparent #766161; 
    border-style: solid; 
    display: block; 
    width: 0; 
}​ 

.some-line { 
    border:#000; 
    background:#200; 
} 

.spoilertop, #QUOTETOP, #CODETOP, .utubetop { 
    padding-left: 44px; 
    font-size:12px; 
} 

하지만 많은 content: "";이있는 경우 해당 솔루션은 가지 문제가된다. 그리고 그런 종류의 문제가 발생하는 이유는 정말로 혼란 스럽습니다.

그래서 ... 아무도 왜 설명 할 수 있을까요?

Answer 1

이것은 중복성에 대한 규칙을 위반하지만 .spoilermain : after 및 #QUOTE : after에 대해 별도의 선언을 시도해 보셨습니까?

Answer 2

전후의 의사 요소는 의사 클래스이지만 의사 클래스는 아닙니다.

.spoilermain::after 
{ 
} 

을하지만 당신은

.spoilermain:after 
{ 
} 

일부 브라우저가에 매우 관대하다을하지 않았다으로하지만 엄격 모드에서 오류가 발생해야한다 : 그래서 그들은이로 사용되어야한다.