:空とは何ですか?使い方？

:空とは何ですか?この記事では、誰もが :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. 要素内のスペースと空のサブ要素は要素内の文字情報としてカウントされるため、要素に 2 つの要素のいずれかが含まれている場合、その要素は空とは見なされません。たとえば、次の 2 つの要素は空とはみなされません:

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

3。スペースはコンテンツとみなされ、開いていても閉じられていない要素タグは空にはなりません。例:

< p >

4。開始タグの後に別のタグが続く場合、そのタグは再び空とみなされます。

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

5. 開始タグの後に、別のタグが直接続かない別の開始タグが続く場合、最初のタグは空とみなされますが、2 番目のタグは空ではありません (空白があるため)。例:

< p > < p >

6。

---

、
、 などの自己終了要素は空とみなされ、次のように結合されます。セレクターが一致します。

簡単な例を通して :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添加内容";
}

レンダリング:

# 概要: 以上ですこの記事の内容全体が皆さんの研究に役立つことを願っています。

以上が:空とは何ですか?使い方？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。