重温css的选择器

作者: 小梦子日期: 2016-08-26

124047

本文主要和大家重温一下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相同。

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>

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

none

上一篇：深入了解DOM对象下一篇：chrome工具优化的学习小结