国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS 屬性選擇器的深入挖掘

luoyibu / 2593人閱讀

摘要:如果頁面上的鏈接很多或者對跳轉頁面的協議有要求,使用屬性選擇器配合偽元素對鏈接的協議進行提示也不失為一種好方法。

CSS 屬性選擇器,可以通過已經存在的屬性名或屬性值匹配元素。

屬性選擇器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展。本文將會比較全面的介紹屬性選擇器,盡可能的去挖掘這個選擇器在不同場景下的不同用法。

簡單的語法介紹

[attr]:該選擇器選擇包含 attr 屬性的所有元素,不論 attr 的值為何。

[attr=val]:該選擇器僅選擇 attr 屬性被賦值為 val 的所有元素。

[attr~=val]:該選擇器僅選擇具有 attr 屬性的元素,而且要求 val 值是 attr 值包含的被空格分隔的取值列表里中的一個。

子串值(Substring value)屬性選擇器,

下面幾個屬于 CSS3 新增語法,也被稱為“偽正則選擇器”,因為它們提供類似 regular expression 的靈活匹配方式。

[attr|=val] : 選擇attr屬性的值是 val 或值以 val- 開頭的元素(注意,這里的 “-” 不是一個錯誤,這是用來處理語言編碼的)。

[attr^=val] : 選擇attr屬性的值以 val 開頭(包括 val)的元素。

[attr$=val] : 選擇attr屬性的值以 val 結尾(包括 val)的元素。

[attr*=val] : 選擇attr屬性的值中包含子字符串 val 的元素(一個子字符串就是一個字符串的一部分而已,例如,”cat“ 是 字符串 ”caterpillar“ 的子字符串

CSS 屬性選擇器的最基本用法

屬性選擇器最基本的用法,就是通過元素的屬性值去選擇 DOM 元素。像這樣,將選中所有帶 href 屬性的DOM 元素:

[href] {
    color: red;
}

CodePen Demo -- 屬性選擇器基本用法

復雜一點點的用法 層疊選擇
div [href]{
...
}
多條件復合選擇

選擇一個 img 標簽,它含有 title 屬性,并且包含類名為 logo 的元素。

img[title][class~=logo]{
...
}
偽正則寫法

i 參數

忽略類名的大小寫限制,選擇包含 class 類名包含子字符串為 text,Text,TeXt... 等情況的 p 元素。
這里的 i 的含義就是正則里面參數 i 的含義,ignore,忽略大小寫的意思。

p[class*="text" i] {
...
}

所以上面的選擇器可以選中類似這樣的目標元素:

g 參數

與正則表達式不一樣,參數 g 在這里表示大小寫敏感(case-sensitively)。然而,這個屬性當前仍未納入標準,支持的瀏覽器不多。

CodePen Demo -- 屬性選擇器的偽正則用法

配合 :not() 偽類

還有一種比較常用的場景就是搭配:not() 偽類,完成一些判斷檢測性的功能。譬如下面這個選擇器,就可以選取所有沒有 [href] 屬性的 a 標簽,添加一個紅色邊框。

a:not([href]){
    border: 1px solid red;
}

當然,復雜一點,我們可以搭配不僅僅一個 :not()偽類,像是這樣,可以同時多個配合使用,選擇一個 href, target, rel 屬性都沒有的 a 標簽:

a:not([href]):not([target]):not([rel]){
    border: 1px solid blue;
}

CodePen Demo -- 屬性選擇器配合 :not 偽類

重寫行內樣式?

甚至乎,如果有這種場景,我們還可以覆蓋掉行內樣式,像這樣:

xxxxxx

我們可以使用屬性選擇器強制覆蓋掉上述樣式:

[style*="color: red"] {
    color: blue !important;
}
組合拳用法,搭配偽元素提升用戶體驗

當然,屬性選擇器不一定只是單單的進行標簽的選擇。

配合上偽元素,我們可以實現很多有助提升用戶體驗的功能。

角標功能

這里有一個小知識點,偽元素的 content 屬性,通過 attr(xxx),可以讀取到對應 DOM 元素標簽名為 xxx 的屬性的值。

所以,配合屬性選擇器,我們可以很容易的實現一些角標功能:

Message
div {
    position: relative;
    width: 200px;
    height: 64px;
}

div::before {
    content: attr(count);
    ...
}

這里右上角的數字 5 提示角標,就是使用屬性選擇器配合偽元素實現,可以適應各種長度,以及中英文,能夠節省一些標簽。CodePen Demo -- 屬性選擇器實現角標功能

屬性選擇器配合偽元素實現類 title 功能

我們都知道,如果給一個圖片添加一個 title 屬性,當 hover 到圖片上面的時,會展示 title 屬性里面附加的內容,類似這樣:

這里不一定是 img 標簽,其他標簽添加 title 屬性都能有類似的效果。但是這里會有兩個問題:

響應太慢,通常鼠標 hover 上去要隔 1s 左右才會出現這個 title 框

框體結構無法自定義,彈出框的樣式無法自定義

所以這里,如果我們希望有一些自己能夠控制樣式的可快速響應的浮層,可以自定義一個類 title 屬性,我們把它稱作 popTitle,那么可以這樣操作:

這是一段描述性文字

這是一段描述性文字

p[popTitle]:hover::before {
    content: attr(popTitle);
    position: absolute;
    color: red;
    border: 1px solid #000;
    ...
}

對比一下,第一個是原生自帶的 title 屬性,下面兩個是使用屬性選擇器配合偽元素模擬的提示:

瀏覽器自帶的 title 屬性延遲響應是添加一層防抖保護,避免頻繁觸發,這里也可以通過對偽元素添加一個100毫秒級的 transition-delay 實現延遲展示。

CodePen Demo -- 屬性選擇器配合偽元素實現類 title 功能

商品展示提示效果

好,上面的運用實例我們再拓展一下,考慮如何更好的運用到實際業務中,其實也是有很多用武之地的。譬如說,通過屬性選擇器給圖片添加標簽,類似一些電商網站會用到的一個效果。

我們希望給圖片添加一些標簽,在 hover 圖片的時候展示出來。

當然,CSS 中,諸如