css3屬性選擇器以及屬性選擇器正則匹配的真實案例講解

首先，提供w3c的完整文檔：

https://www.w3school.com.cn/css/css_selector_attribute.asp

 

先看我們要實現的效果圖（表情包和圖片的自適應做的應該還行）：

我們不想要看到的情況：

又或者這樣：

 

接下來談一下我如何在項目中使用它：

在我的react-native項目中，需要做一個h5的詳情頁，當然有很多種方式可以做，webview或者靜態h5嵌入等等，在此不展開談論

我想說的說，在詳情頁面中，由於文章的來源非常之多，其中也包含了表情包和一般的圖片，他們都是img標籤，那麼如何區分去實現兼容的展示他們的樣式呢？

由於普通的img圖片多種多樣，但是表情包在其src路徑🀄️有個標記性的單詞emoticons，我把它作爲區分一般img圖片的點，進行了屬性選擇器的實踐使用。代碼如下：

.htmlContent img {
  width: 100%;
  height: 100%;
  display: inline-block;
  margin: auto;
}
.htmlContent img[src*="emoticons"] {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  display: inline-block;
  margin: auto;
}

下面再舉其他的應用方式：

一：css3屬性選擇器：

img[alt]{
    border:2px dashed #000;
}  

這個選擇器會匹配頁面標籤中任何一個含有alt屬性的圖片標籤。

 

還可以通過設定屬性值來縮小匹配範圍：如下代碼：

img[alt="atwi_oscar"]{
     border:2px dashed #000;
}

 

 css3的子字符串匹配屬性選擇器

（1）‘匹配開頭’的屬性選擇器依法如下：

Element[attribute^="value"]，實例代碼如下：

img[alt^="filem"]{
    border:2px dashed #000;
}

 

(2)‘匹配包含內容‘的屬性選擇器

Element[attribute*="value"]，實例代碼如下：

img[alt*="filem"]{
    border:2px dashed #000;
}

 

(3)‘匹配結尾‘的屬性選擇器

Element[attribute$="value"]，實例代碼如下：

img[alt$="filem"]{
    border:2px dashed #000;
}

 

二：(:not)選擇器

否定僞類選擇器，用於選擇不滿足某些條件的元素，例如：

nav ul li:not(.internal) a{
    color:#000;
}

多提一點關於僞元素的：

對僞元素的修正

P:first-line 會選中<p>標籤的第一行內容，

P:first-letter會選中其中第一個字母。

css3要求對僞元素使用2個冒號以便對僞類進行區別。但IE8及更低的版本無法識別2個冒號的語法，它們只識別一個冒號。