重温css的选择器
本文主要和大家重温一下css选择器中的一些常用符号的使用，例如“+、~、^、$、>、*”等的使用！
css选择器之特殊符号
1、>(大于号)
1 2 | 大于号代表选择子元素，这个我们经常用，值得注意的是 div>span 和div span 的区别这2个都是选择子元素，但是 div>span 只选择某个元素的子元素。例如如下： |
1 2 | <div>This is <span class="aa">very</span > <span>very</span> important.</div><div>This is <em>really <span>very</span></em> important.</div> |
1 | div>span ，只有第一个div下面的span被选中，第二个不起作用。但是div span，所有的div下面的span都被选中了 |
2、+号
1 | 选择相邻兄弟，这点和jquery相同。 |
css属性选择器
1、把包含标题（title）的所有元素变为红色
1 | *[title] {color:red;} |
2、将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色
1 | a[href][title] {color:red;} |
3、指定将http://ldxy.163.com/ 这篇文字颜色变红
1 |
4、属性与属性值必须完全匹配
1 | <p class="important very">hhhhh</p> |
1 | 所以需要选择两个属性 |
1 | p[class="important very"] {color: red;} |
5、根据部分属性值选择
1 | 看到上面多个属性必须完全匹配，很不爽，那么有没有可以部分匹配属性的方法呢？答案是有的。还是上面的例子，我们如下选择就可以了！ |
1 | p[class~="important"] {color: red;} |
1 | 如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。 |
6、特定属性选择类型
1 | *[lang|="en"] {color: red;} |
1 | 上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。因此，以下示例标记中的前三个元素将被选中，而不会选择后两个元素： |
1 2 3 4 5 | <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> |
手机阅读请扫描下方二维码：
上一篇：深入了解DOM对象
下一篇：chrome工具优化的学习小结
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1