当前位置：首页 > 参考手册-选择符
一、关系选择符
1.1包含选择符(E F)
选择所有被E元素包含的F元素。
与子选择符不同的是，包含选择符将会命中所有符合条件的后代，包括儿子，孙子，孙子的孙子... E F VS. E>F：
此例，如果使用.demo div，那么 0, 1, 2, 3 都有有边框；如果使用 .demo > div，那么只有 0 有边框，即只有子元素会被命中。
1.2 子选择符(E>F)
选择所有作为E元素的子元素F。
与包含选择符不同的是，子选择符只能命中子元素，而不能命中孙辈。 示例：
.demo > div {position: relative;}
此例只有 .a 会被命中，因为它是 .demo 的子元素；
1.3 相邻选择符(E+F)
选择紧贴在E元素之后F元素。
与兄弟选择符不同的是，相邻选择符只会命中符合条件的相邻的兄弟元素。 E~F VS. E+F：
p1
p2
p3
p4
p5
此例，如果使用p + p{color:#f00;}，那么p2, p5将会变成红色；如果使用p ~ p{color:#f00;}，那么p2,p3,p4,p5将会变成红色；
1.4 兄弟选择符(E~F)
选择E元素后面的所有兄弟元素F。 与相邻选择符不同的是，兄弟选择符会命中所有符合条件的兄弟元素，而不强制是紧邻的元素。
E~F VS. E+F：
p1
p2
p3
p4
p5
此例，如果使用p + p{color:#f00;}，那么p2, p5将会变成红色；如果使用p ~ p{color:#f00;}，那么p2,p3,p4,p5将会变成红色；
二、属性选择符
2.1 E[att]
选择具有att属性的E元素。 例如：
此例，将会命中第一张图片，因为匹配到了alt属性
2.2 E[att=\
选择具有att属性且属性值等于val的E元素。 例如：
2.3 E[att~=\
选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的情况）。 例如：
2.4 E[att^=\
选择具有att属性且属性值为以val开头的字符串的E元素。 例如：
2.5 E[att$=\
选择具有att属性且属性值为以val结尾的字符串的E元素。 例如：
此例，将会命中1, 3两个div，因为匹配到了class属性，且属性值以c结尾
2.6 E[att*=\
选择具有att属性且属性值为包含val的字符串的E元素。 例如：
2.7 E[att|=\
选择具有att属性且属性值为以val开头并用连接符\分隔的字符串的E元素，如果属性值仅为val，也将被选择。 例如：
三、伪类选择符
3.1 E:link
设置超链接a在未被访问前的样式。
? 如果需要给超链接定义：访问前，鼠标悬停，当前被点击，已访问这4种伪类效果，而又没有按照一致的书写顺序，不同的浏览器可能会有不同的表现
? 超链接的4种状态，需要有特定的书写顺序才能生效。 超链接状态顺序： a:link {} a:visited {} a:hover {} a:active {} 注意，a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后
可靠的顺序是：l(link)ov(visited)e h(hover)a(active)te, 即用喜欢(love)和讨厌(hate)两个词来概括
3.2 E:focus
设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式。 ? webkit内核浏览器会默认给:focus状态的元素加上outline的样式。
本文作者：...共分享92篇相关文档
