稻草日志分享:css3属性选择器怎么写

王亚兵7个月前 (09-22)HTML5CSS3211

css本质是什么呢?如果你对css有一定的了解一定会说:“选对人,做对事”。如果你真正的理解这六个字,那么恭喜你,你已经掌握了学习css的一个精髓。前面的文章中已经不止一次的强调过css就是给页面元素增加对应的样式。css3作为新版本的css,他的本质依旧不变。无非是新增了一些新的属性。属性选择器就是css3中的新属性。下面我们一起了解下,该怎么写我们的属性选择器?

css3属性选择器怎么写

同样的在学习属性选择器之前我们先回顾一下之前学习了哪些基础选择器,比如标签选择器,类选择器,伪类选择器还有id选择器。复合选择器包括了:后代选择器、子元素选择器、并集选择器、交集选择器。而且这些选择器的权重也是不一样的,我们同样学习了权重的计算方法。其实我们今天所要了解的属性选择器就是交集选择器的一种。

我们写两个input标签。第一个input给一个name属性,第二个input给一个value属性。我们如果想修改带name属性的input的长和宽,如果利用以往的知识是不是需要帮助我们第一个input起一个类名。通过类选择器帮助第一个input元素修改长和宽。这样做就有一些麻烦了。通过我们的属性选择器就可以直接修改,不需要定义类名?代码以及效果如下:

css3属性选择器怎么写

而且你会发现标签选择器的权重要低于属性选择器,因为属性选择器的权重和类选择器的权重是相同的。现在假设如果第二个input元素也有name属性该怎么用属性选择器控制第一个input元素呢?其实也很简单在[]中是可以写属性值的如图:

css3属性选择器怎么写

我们发现他们的效果是一样的,其实属性选择器结合一些通配符可以实现更多的可能,比如:div[class^="nav"]就是选取所有div中class属性值中以nav开头的元素。有开头就肯定会有结尾。div[class$="nav"]就是选择div中class属性值以nav结尾的元素。如果是div[class*="nav"]就是选取div中class属性值中含有nav字符的元素。所以说属性选择器还是非常使用而且强大的。

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。