做有态度的前端团队

网易FEG前端团队

重温css的选择器

本文主要和大家重温一下css选择器中的一些常用符号的使用,例如“+、~、^、$、>、*”等的使用!

css选择器之特殊符号

1、>(大于号)

大于号代表选择子元素,这个我们经常用,值得注意的是 div>span 和div span 的区别
这2个都是选择子元素,但是 div>span 只选择某个元素的子元素。例如如下:
<div>This is <span class="aa">very</span > <span>very</span> important.</div>
<div>This is <em>really <span>very</span></em> important.</div>
div>span ,只有第一个div下面的span被选中,第二个不起作用。但是div span,所有的div下面的span都被选中了

2、+号

选择相邻兄弟,这点和jquery相同。  

css属性选择器

1、把包含标题(title)的所有元素变为红色

*[title] {color:red;}

2、将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色

a[href][title] {color:red;}

3、指定将http://ldxy.163.com/ 这篇文字颜色变红

a[href="http://ldxy.163.com/"] {color: red;}

4、属性与属性值必须完全匹配

<p class="important very">hhhhh</p>
所以需要选择两个属性
p[class="important very"] {color: red;}

5、根据部分属性值选择

看到上面多个属性必须完全匹配,很不爽,那么有没有可以部分匹配属性的方法呢?答案是有的。还是上面的例子,我们如下选择就可以了!
p[class~="important"] {color: red;}
如果需要根据属性值中的词列表的某个词进行选择,则需要使用波浪号(~)。

6、特定属性选择类型

*[lang|="en"] {color: red;}
上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。因此,以下示例标记中的前三个元素将被选中,而不会选择后两个元素:
<p lang="en">Hello!</p>
<p lang="en-us">Hello!</p>
<p lang="en-au">Hello!</p>
<p lang="fr">Hello!</p>
<p lang="cy-en">Hello!</p>

手机阅读请扫描下方二维码:

添加新评论

ali-40.gifali-41.gifali-42.gifali-43.gifali-44.gifali-45.gifali-46.gifali-47.gifali-48.gifali-49.gifali-50.gifali-51.gifali-52.gifali-53.gifali-54.gifali-55.gifali-56.gifali-57.gifali-58.gifali-59.gifali-60.gifali-61.gif