参考手册选择符文档格式.docx

1、 123 div，那么只有 0 有边框，即只有子元素会被命中。1.2 子选择符（EF）选择所有作为E元素的子元素F。与包含选择符不同的是，子选择符只能命中子元素，而不能命中孙辈。示例： div position: relative;ab子选择符p1p2这是一个标题p3p4p5此例，将会命中第一张图片，因为匹配到了alt属性2.2 Eatt=val选择具有att属性且属性值等于val的E元素。inputtype=text border: 1px solid #000;input type=submit此例，将会命中第一张input，因为匹配到了alt属性，并且属性值为text2.3 Eatt=选

2、择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的情况）。divclass=a b此例，将会命中1, 3两个div，因为匹配到了class属性，且属性值中有一个值为a2.4 Eatt=选择具有att属性且属性值为以val开头的字符串的E元素。divclass=abcacbbac此例，将会命中1, 2两个div，因为匹配到了class属性，且属性值以a开头2.5 Eatt$=选择具有att属性且属性值为以val结尾的字符串的E元素。divclass$=c此例，将会命中1, 3两个div，因为匹配到了class属性，且属性值以c结尾2.6

3、 Eatt*=选择具有att属性且属性值为包含val的字符串的E元素。divclass*=此例，将会命中所有div，因为匹配到了class属性，且属性值中都包含了b2.7 Eatt|=选择具有att属性且属性值为以val开头并用连接符-分隔的字符串的E元素，如果属性值仅为val，也将被选择。divclass|=a-testb-testc-test此例，将会命中第一个div，因为匹配到了class属性，且属性值以紧跟着的a开头三、伪类选择符3.1 E:link设置超链接a在未被访问前的样式。 如果需要给超链接定义：访问前，鼠标悬停，当前被点击，已访问这4种伪类效果，而又没有按照一致的书写顺序，不

4、同的浏览器可能会有不同的表现 超链接的4种状态，需要有特定的书写顺序才能生效。超链接状态顺序：a:link visited hover 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的样式。input:

5、focus background: #f6f6f6; color: #f60;border: 1px solid #f60;outline: none;3.3 E:lang（fr）匹配使用特殊语言的E元素。p:lang（zh-cmn-Hans） color: #f00;lang（en） color: #090;p lang=zh-cmn-Hans大段测试文字enenglishli列表项一列表项二列表项三列表项四在上述代码中，如果我们要设置第一个li的样式，那么代码应该写成li:first-childsRules，而不是ul:first-childsRules。 来看这样一段代码：first-c

6、hildcolor:我是一个p我是一个标题只是在p前面加了一个h2标签，你会发现选择器失效了，没有命中p，why? E:first-child选择符，E必须是它的兄弟元素中的第一个元素，换言之，E必须是父元素的第一个子元素。与之类似的伪类还有E:last-child，只不过情况正好相反，需要它是最后一个子元素。3.7 E:last-child匹配父元素的最后一个子元素E。last-child选择符，E必须是它的兄弟元素中的最后一个元素，换言之，E必须是父元素的最后一个子元素。first-child，只不过情况正好相反，需要它是第一个子元素。 通过具体的例子来进行理解：有效的代码：last-childcolor:无效的代码：p