css3属性选择器

2019-09-10 郑州网站建设  

在css3还未出现之前。我们经常使用标签选择器、类选择器、id选择器等,今天我们开始介绍css3中新增的属性选择器。

第一步,先建立一个html片段

<!--企业里有四个人 老刘 老王 老李 老吴-->

<p worker="laoliu">laoliu</p>

<p worker="lao-wang">laowang</p>

<p worker="laoli">laoli</p>

<p worker="laowu">laowu</p>

每天学点CSS3专题:css3属性选择器

我们看到这里添加了一个自定义属性worker,我们可以通过css3来指定自定义的属性和属性值来删选dom节点

/*属性匹配 */

p[worker]{

background-color:red;

}

每天学点CSS3专题:css3属性选择器

节点属性为worker的节点都被选中了

/* 值匹配 */

p[worker="laoliu"]{

background-color:red;

}

每天学点CSS3专题:css3属性选择器

属性值为laoliu的节点被选中

/*匹配开头*/

p[worker^="lao"]{

background-color:red;

}

每天学点CSS3专题:css3属性选择器

/*末尾匹配*/

p[worker$="wu"]{

background-color:red;

}

每天学点CSS3专题:css3属性选择器

匹配属性值结尾是wu的节点

/*属性值模糊匹配*/

p[worker*="laol"]{

background-color:red;

}

每天学点CSS3专题:css3属性选择器

模糊匹配属性值中带有laol的节点


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1669.html转载请标明出处,谢谢合作!
标签:
  • 使用
  • CSS3
  • 我们
  • 出现
  • 之前
  • 经常