비어 있지 않은 속성이있는 요소를 선택하십시오

CSS 선택기를 사용하여 비어 있지 않은 속성의 요소를 선택하십시오.

짧은 대답 :

 [data-foo] : not ([data-foo = ""]) {}

자세한 설명 : (결론은 동일합니다. 왜 우리 가이 작업을 수행 해야하는지 설명합니다)

스타일에 특수 data- 속성을 사용하는 요소가 있다고 가정합니다.

<div data-highlight="product">
</div>

강조 표시 될 때 요소를 찾아 특별한 행동을 수행하려고합니다.

 [데이터 하이라이트] {
  글꼴 크기 : 125%; 
}

[Data-Highlight = "Product"] img {
  주문 : 1;
}

data- 속성은 템플릿의 일부이므로 설정 한 값을 가질 수 있습니다.

<div data-highlight="{{ value }}">
</div>

때로는 가치가 없습니다! 따라서 출력 HTML은 다음과 같습니다.

<div data-highlight="">
</div>

그러나 이것은 까다로울 수 있습니다. 위의 첫 번째 CSS 코드 블록을 참조하십시오. data-highlight 속성으로 모든 요소를 ​​찾으려면 실제로 값이있는 경우에만이 작업을 수행하려고합니다. 값이 비어 있으면 특별한 스타일을 건너 뛰고 싶습니다.

이상적으로는 값이 없으면 HTML 템플릿에서 data- 속성을 제거합니다. 그러나 많은 템플릿 언어는 의도적으로 해당 속성을 완전히 추가하거나 추가하지 않는 데 도움이되는 논리를 허용하지 않습니다.

대신 CSS를 사용하여 해결할 수 있습니다.

 [Data-Highlight] : NOT ([Data-Highlight = ""]) {
  글꼴 크기 : 125%; 
}

[Data-Highlight = "Product"] img {
  주문 : 1;
} 

위 내용은 비어 있지 않은 속성이있는 요소를 선택하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!