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个冒号的语法，它们只识别一个冒号。