马黑黑 发表于 2022-10-31 19:30

CSS伪类：匹配空元素

<style>
.papa > p { margin: 8px 0; }
.papa > span:empty {
        display: inline-block;
        width: 10px;
        height: 10px;
        background: pink;
        border-radius: 50%;
}
</style>

<div class="papa">

<p>有时候，DOM里有很多空元素。空元素不是毫无用处，试看下面的HTML：</p>
<p>&lt;div class="papa"&gt;<br>&nbsp; &nbsp; &lt;span&gt;★&lt;/span&gt;<br>&nbsp; &nbsp; &lt;span&gt;&lt;/span&gt;<br>&nbsp; &nbsp; &lt;span&gt;&lt;/span&gt;<br>&nbsp; &nbsp; &lt;span&gt;&lt;/span&gt;<br>&nbsp; &nbsp; &lt;span&gt;★&lt;/span&gt;<br>&lt;/div&gt;</p>

<p>上面的代码，如果没有做任何CSS设定，效果如下：</p>

<div>
    <span>★</span>
    <span></span>
    <span></span>
    <span></span>
    <span>★</span>
</div>

<p>现在，我们来设置一下空元素 span:<br><br>&lt;style&gt;<br></p><p>.papa &gt; span:empty {<br><span style="white-space: pre;">        </span>display: inline-block;<br><span style="white-space: pre;">        </span>width: 10px;<br><span style="white-space: pre;">        </span>height: 10px;<br><span style="white-space: pre;">        </span>background: pink;<br><span style="white-space: pre;">        </span>border-radius: 50%;<br>}</p>

<p>如此，效果则如下：</p>

    <span>★</span>
    <span></span>
    <span></span>
    <span></span>
    <span>★</span>

<p>:empty&nbsp;规范冒号之前的元素，例如前例的 span:empty {}&nbsp;用于设定&nbsp;span&nbsp;标签及 &lt;span&gt;&nbsp;和 &lt;/span&gt;&nbsp;之间没有任何内容的样式。如果规范空的&nbsp;p&nbsp;标签，则写成 p:empty {} ，其它标签写法也如此；如果想规范某个区域下空的直系 div&nbsp;标签，例如 .papa&nbsp;下的空的&nbsp;div，写成：.papa &gt; div:empty {} 。</p>

<p>所谓空，指什么都没有。下面这个红色代码的 span 标签就不匹配前例的 .papa &gt; span:empty {} :</p>
<p>&nbsp; &nbsp; &lt;span&gt;★&lt;/span&gt;<br>&nbsp; &nbsp; &lt;span&gt;&lt;/span&gt;<br>&nbsp; &nbsp; &lt;span&gt;&lt;/span&gt;<br>&nbsp; &nbsp; &lt;span&gt;&lt;/span&gt;<br><font color="#ff0000">&nbsp; &nbsp; &lt;span&gt; &lt;/span&gt;</font><br>&nbsp; &nbsp; &lt;span&gt;★&lt;/span&gt;</p>

<p>为什么？因为他有一个空格，空格和★一样，都是文本，文本也是DOM中的节点，是内容，所以包含有它们的就不能算是空元素。</p>

</div>

红影 发表于 2022-10-31 21:03

空格不能随便加，加上去就有含义了。

红影 发表于 2022-10-31 21:03

还可以给空元素赋予样式，学习了{:4_187:}

马黑黑 发表于 2022-10-31 21:07

红影 发表于 2022-10-31 21:03
空格不能随便加，加上去就有含义了。

说得对

马黑黑 发表于 2022-10-31 21:08

红影 发表于 2022-10-31 21:03
还可以给空元素赋予样式，学习了

空元素其实是大量使用的，比如手链。我通过JS赋予它们 class 名称，通过class设定CSS样式，其实也可以像这样用空元素去匹配。

红影 发表于 2022-10-31 21:42

马黑黑 发表于 2022-10-31 21:07
说得对

这个我就经常不注意。

红影 发表于 2022-10-31 21:44

马黑黑 发表于 2022-10-31 21:08
空元素其实是大量使用的，比如手链。我通过JS赋予它们 class 名称，通过class设定CSS样式，其实也可以像 ...

那会比现在的麻烦点吧，HTML的语句会多了。

马黑黑 发表于 2022-10-31 21:44

红影 发表于 2022-10-31 21:44
那会比现在的麻烦点吧，HTML的语句会多了。

也不见得的，一切精准可控

马黑黑 发表于 2022-10-31 21:46

红影 发表于 2022-10-31 21:42
这个我就经常不注意。

正常的，只有系统学习过的或用到这方面的知识点出了问题的才会去注意到它

红影 发表于 2022-10-31 22:29

马黑黑 发表于 2022-10-31 21:44
也不见得的，一切精准可控

嗯嗯，反正无论怎么弄，黑黑都能弄出来。

红影 发表于 2022-10-31 22:29

马黑黑 发表于 2022-10-31 21:46
正常的，只有系统学习过的或用到这方面的知识点出了问题的才会去注意到它

看样子代码是一点也疏忽不得。

马黑黑 发表于 2022-10-31 22:42

红影 发表于 2022-10-31 22:29
看样子代码是一点也疏忽不得。

大致吧

马黑黑 发表于 2022-10-31 22:42

红影 发表于 2022-10-31 22:29
嗯嗯，反正无论怎么弄，黑黑都能弄出来。

{:4_203:}

红影 发表于 2022-11-1 14:36

马黑黑 发表于 2022-10-31 22:42
大致吧

因为对代码理解不透，我总无心弄出很多错。

红影 发表于 2022-11-1 14:37

马黑黑 发表于 2022-10-31 22:42


我是说无论哪种实现方式，黑黑都能弄出来。厉害{:4_204:}

马黑黑 发表于 2022-11-1 20:10

红影 发表于 2022-11-1 14:37
我是说无论哪种实现方式，黑黑都能弄出来。厉害

一般般

马黑黑 发表于 2022-11-1 20:10

红影 发表于 2022-11-1 14:36
因为对代码理解不透，我总无心弄出很多错。

正常

红影 发表于 2022-11-1 20:27

马黑黑 发表于 2022-11-1 20:10
一般般

又谦虚{:4_173:}

红影 发表于 2022-11-1 20:28

马黑黑 发表于 2022-11-1 20:10
正常

我还得继续好好学习，天天向上{:4_173:}

马黑黑 发表于 2022-11-1 20:50

红影 发表于 2022-11-1 20:28
我还得继续好好学习，天天向上

我看行
页: [1] 2
查看完整版本: CSS伪类：匹配空元素