参考手册-选择符.docxVIP

一、关系选择符 1.1包含选择符(E F) 选择所有被E元素包含的F元素。 与 HYPERLINK /selectors/relationship/e-child-f.htm 子选择符不同的是，包含选择符将会命中所有符合条件的后代，包括儿子，孙子，孙子的孙子... E F VS. EF： style /* 包含选择符(E F) */ .demo div {border:1px solid #f00;} /* 子选择符(EF) */ .demo div {border:1px solid #f00;} /style div class=demo div0 div1/div div2/div div3/div /div /div 此例，如果使用.demo div，那么 0, 1, 2, 3 都有有边框；如果使用?.demo div，那么只有 0 有边框，即只有子元素会被命中。 1.2 子选择符(EF) 选择所有作为E元素的子元素F。 与 HYPERLINK /selectors/relationship/ef.htm 包含选择符不同的是，子选择符只能命中子元素，而不能命中孙辈。 示例： .demo div {position: relative;} div class=demo div class=a div class=b子选择符/div /div /div 此例只有 .a 会被命中，因为它是 .demo 的子元素； 1.3 相邻选择符(E+F) 选择紧贴在E元素之后F元素。 与 HYPERLINK /selectors/relationship/e-brother-f.htm 兄弟选择符不同的是，相邻选择符只会命中符合条件的相邻的兄弟元素。 E~F VS. E+F： style /* 相邻选择符(E+F) */ p+p{color:#f00;} /* 兄弟选择符(E~F) */ p~p{color:#f00;} /style pp1/p pp2/p h3这是一个标题/h3 pp3/p h3这是一个标题/h3 pp4/p pp5/p 此例，如果使用p + p{color:#f00;}，那么p2, p5将会变成红色；如果使用p ~ p{color:#f00;}，那么p2,p3,p4,p5将会变成红色； 1.4 兄弟选择符(E~F) 选择E元素后面的所有兄弟元素F。 与 HYPERLINK /selectors/relationship/e-adjacent-f.htm 相邻选择符不同的是，兄弟选择符会命中所有符合条件的兄弟元素，而不强制是紧邻的元素。 E~F VS. E+F： style /* 相邻选择符(E+F) */ p+p{color:#f00;} /* 兄弟选择符(E~F) */ p~p{color:#f00;} /style pp1/p pp2/p h3这是一个标题/h3 pp3/p h3这是一个标题/h3 pp4/p pp5/p 此例，如果使用p + p{color:#f00;}，那么p2, p5将会变成红色；如果使用p ~ p{color:#f00;}，那么p2,p3,p4,p5将会变成红色； 二、属性选择符 2.1 E[att] 选择具有att属性的E元素。 例如： style img[alt] {margin: 10px;} /style img src=图片url alt= / img src=图片url / 此例，将会命中第一张图片，因为匹配到了alt属性 2.2 E[att=val] 选择具有att属性且属性值等于val的E元素。 例如： style input[type=text] {border: 2px solid #000;} /style input type=text / input type=submit / 此例，将会命中第一张input，因为匹配到了alt属性，并且属性值为text 2.3 E[att~=val] 选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的情况）。 例如： style div[class~=a] {border: 2px solid #000;} /style div class=a1/div div class=b2/div div class=a b3/div 此例，将会命中1, 3两个div，因为匹配到了class属性，且属性值中有一个值为a 2.4 E[att^=val] 选择具有att属性且属性值为以val开头的字符串的E元素。 例如： style div[class^=a] {border: 2px solid