利用通配符匹配一系列近似类的CSS属性筛选器
利用通配符匹配一系列近似类的CSS属性筛选器

利用通配符匹配一系列近似类的CSS属性筛选器

CSS的属性选择器(可利用通配符)

今天学到新知识,很开心。随用随学,虽不如系统学习来的扎实,但没学到一点都是有实际用途的。

语法

[abc]选择带有以abc命名的属性的元素

[abc*=value]选择带有以abc命名的属性,且该属性的值至少包含一个value值的元素

这里先学习其中一种,还有其他几种属性选择器,见这里 https://developer.mozilla.org/

span[class*="teshuzu-"]{/*样式代码*/}

这行代码可以选择,所有class属性值中带有tushuzu-span标签。这里的星号*实际上起到通配符的作用,只是css语法与其他不太一样而已。简单直观的解释就是:

  • [前面是要选择的标签名,这里筛选所有span标签
  • [*=之间是属性名,这里是筛选所有class属性
  • *=后面是要筛选的属性值的一部分,这里是筛选所有包含teshuzu-的属性值
  • 由于这里的通配关键字被当做字符串处理,所以一定要加引号" "或者' ',而且区分大小写
  • 最后以]结束选择,并加上{}在其中定义该筛选器的样式即可

例如:

/*普通选择器*/
.lang-css{
    background-color:red;
}
.lang-html{
    background-color:green;
}

下面用通配符*筛选:所有class中包含lang-code的字体颜色,因此,页面html源码中的lang-csslang-html都会被下面定义的css选择器选中

/*含有通配符的选择器*/
code[class*="lang-"]{
    color:#fff;
    font-size:24px;
}

因此,

<code class='lang-css'>这里是CSS代码块</code>
<code class='lang-html'>这是HTML代码块</code>
<code>这里是不标名称的其他代码块</code>

运行结果为:

css代码块拥有其自身class的红色背景,同时拥有通配选择器提供的白色24px文字;
html代码拥有其自身class的绿色背景,同时拥有通配选择器提供的白色24px文字;
而未标注class的其他代码块是默认的白底黑字,普通大小。

渲染效果如下:

  • 这里是CSS代码块
  • 这是HTML代码块
  • 这里是不指定css类的其他代码块

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注