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
為靈活。它可以讓你選擇有空白的元素: