CSS偽選擇器：:empty vs :blank
前端時間ofollow,noindex" target="_blank">
@Zell Liew的部落格深入的介紹了CSS中偽選擇器:empty
和:blank
相關的知識
。那麼:empty
和:blank
究竟有什麼作用，又在什麼場景下使用呢？今天我們來一起看看，它們怎麼使用，更應該應用在哪個場景之下呢？
使用場景
我們平時做專案的時候，時常會使用一些CSS Frameworks，比如說有名的Bootstrap，在這種情況之下，使用的一些選擇器，是帶有一些預設樣式。有的時候元素中並沒有任何內容，那麼在頁面上顯示的效果就有點怪異。比如下面這樣的一個場景，你的頁面上有兩個.alert
的div
應用，其中一個有內容，另外一個任何內容都沒有（就一個空div
）。比如：
<div class="alert alert-success">Success Alert</div> <div class="alert alert-info"></div>
如果你的頁面中引用了bootstrap.css
的話，這個時候看到的效果將會是這樣：
對於這樣的效果，估計沒有人能接受。那麼為什麼會這樣呢？來看一下程式碼，不難發現.alert
有一個預設的樣式：
.alert {
position: relative;
padding: .75rem 1.25rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: .25rem;
}
元素中主要有一個padding
，撐大了元素容器，就算元素沒有任何內容，該元素也有一定的大小。就如上面看到的效果。那麼我們有沒有別的方法能處理呢？畢竟很多場景我們是不好控制元素的。
既然標題提到了:empty
和:blank
，估計有同學想到了解決方案是不是和這兩個偽元素有關呢？如果感興趣的話，可以接著往下閱讀，在介紹相應的解決方案之前，咱們先來了解一下:empty
和:blank
。
:empty
和:blank
首先，:empty是什麼？
:blank`又是什麼？
簡單的說，**:empty
和:blank
都是CSS的偽選擇器。其中:empty
可以讓你選擇空元素
。空元素是指沒有任何內容的元素，甚至空格都不行。即：
<div class="alert alert-info"></div>
空元素可以有註釋，只要註釋填滿了整個元素：
<!-- 完元素 --> <div class="alert alert-info"><!-- 我是一個註釋 --></div> <!-- 非空元素 --> <div class="alert alert-info"> <!-- 我是一個註釋 --></div> <div class="alert alert-info"><!-- 我是一個註釋 --> </div> <div class="alert alert-info"> <!-- 我是一個註釋 --> </div>
最上面的一行程式碼，雖然div
中有註釋，但<div>
和</div>
之間沒有任何內容，甚至是空格都沒，那麼他就是一個空元素，但下面三個div
，雖然包含的也是註釋，但是裡面含有空格。所以說，這三個div
不是空元素。
:blank
較:empty
為靈活。它可以讓你選擇有空白的元素：