CSS选择器

一、标签选择器

　　1、单标签

　　2、多标签

• 选择一个祖先的所有子孙节点，例如 div p{…}
• 选择一个父元素的所有直属节点，例如 div > p{…}
• 选择某一个元素紧挨着的兄弟节点，例如 li + li{…}
• 选择某一个元素的所有同胞节点，例如 span ~ a{…}
• 以上各种情况的组合应用（不要组合过于复杂，编码讲求可读性第一）

二、属性选择器

1、简单属性选择器

2、具体属性选择器

• class里面的值以及顺序必须完全相同，并且不可多空格或者少空格
• ID选择器和指定id属性的属性选择器并不是一回事，主要在于优先级不同

[id="tox"]{color: red;} 

3、部分属性选择器

[class ~="b"] 选择class属性值在用空格分隔的词列表中包含词语"b"的所有元素

　　例如：class="ab"不满足[class ~="b"]，而class="a b"或class="b"满足

[class |="b"] 选择class属性值等于b或以b-开头的所有元素

　　例如：class="ab"或class="ab-"不满足[class |="a"]，而class="a"或class="a-"满足

[class ^="b"] 选择class属性值以"b"开头的所有元素
[class $="b"] 选择class属性值以"b"结尾的所有元素
[class *="b"] 选择class属性值包含"b"的所有元素  
 　　上面三个属于正则匹配，是CSS3新增的属性选择器

 

三、伪类和伪元素