:empty란 무엇인가요? 사용하는 방법?

:비어 있는 것은 무엇입니까? 이 기사에서는 :empty에 대한 관련 지식을 소개하여 모든 사람이 :empty에 대해 어느 정도 이해할 수 있도록 할 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

먼저 이해해 봅시다 : 비어 있는 것은 무엇입니까? 그것은 무엇을 합니까?

:empty는 페이지에서 빈 요소를 선택하는 데 사용되는 CSS 의사 클래스 선택기입니다.

요소에 하위 요소(노드)나 텍스트 콘텐츠가 없으면 요소는 비어 있는 것으로 간주됩니다. 주석 및 처리 지시문은 요소가 비어 있는지 여부에 영향을 주지 않습니다. 예를 들어

< div > <！ - 在这里评论 - > </ div >

는 비어 있는 것으로 간주되어 :empty에 의해 선택되지만,

< div >
    文本和子节点。
    < p >这里有一些内容。</ p > </ div > < div >
    在这打字。
</ div >

는 비어 있는 것으로 간주되지 않으므로 선택기와 일치하지 않습니다.

빈 요소를 선택하면 패딩이 있는 경우 이상한 수직 및/또는 수평 공백이 발생할 수 있으므로 이러한 요소를 숨기는 데 유용합니다. 더 이상 필요하지 않거나 유용하지 않은 동적 환경에서 빈 요소를 제거하는 데에도 유용합니다. 예:

/ *选择并隐藏页面上的所有元素* / 
* ：empty {
     display：none;
}

/ *选择并隐藏所有空段落* / 
p ：empty {
     display：none;
}

/ *选择并隐藏所有空的菜单项* / 
nav  a ：empty {
     display：none;
}

/ *选择表中的空表格单元格并对其应用背景颜色* / 
td ：empty {
     background-color：#eee ;
}

설명:

1 의사 요소 ::before 및 ::after에 의해 생성된 콘텐츠는 "실제" 콘텐츠로 간주되지 않습니다. 요소 내부에 존재하더라도 사이의 공백에는 영향을 주지 않습니다. 강요.

2. 요소 내의 공백과 빈 하위 요소는 요소 내의 문자 정보로 계산되므로 요소에 두 요소 중 하나가 포함되어 있으면 해당 요소는 더 이상 비어 있는 것으로 간주되지 않습니다. 예를 들어, 다음 두 요소는 비어 있는 것으로 간주되지 않습니다.

< p >  </ p >  <！ - 包含一个空格 - > 
< p > < span > </ span > </ p >  <！ - 包含一个空元素 - >

3. 공백은 콘텐츠로 간주되므로 열려 있지만 닫혀 있지 않은 요소 태그는 비어 있지 않습니다. 예:

< p >

4. 시작 태그 뒤에 다른 태그가 오면 다시 비어 있는 것으로 간주됩니다.

< p > < p >内容...... 

5. 열린 태그 뒤에 다른 태그 바로 뒤에 오지 않는 다른 열린 태그가 오는 경우 첫 번째 태그는 비어 있는 것으로 간주되지만 두 번째 태그는 비어 있는 것으로 간주됩니다(공백 때문에). 예:

< p > < p >

6.

---

,
및 와 같은 자체 닫는 요소는 비어 있는 것으로 간주되며 :empty 선택기와 일치합니다.

간단한 예를 통해 :empty의 사용법을 살펴보겠습니다.

예시 데모: 빈 단락에 아마색 배경 적용

html 코드:

<div class="container">
  <p>
    测试，测试，测试，测试，测试，测试，测试，测试，测试。
  </p>
  <p></p>
  <p>
    测试，测试，测试，测试，测试，测试，测试，测试，测试，测试，测试，测试，测试，测试，测试，测试，测试，测试，测试，测试，测试！
  </p>
  <p class="pseudo"></p>
  <p><!-- 这里评论 --></p>
  <p><p></p>
</div>

css 코드:

.container {
  margin: 40px auto;
  max-width: 700px;
}

p:empty {
  background-color: linen;
  padding: 15px;
}

.pseudo::before {
  content: "::before添加内容";
}

렌더링:

요약: 위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

위 내용은 :empty란 무엇인가요? 사용하는 방법?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!