参考手册选择符文档格式.docx
《参考手册选择符文档格式.docx》由会员分享，可在线阅读，更多相关《参考手册选择符文档格式.docx（23页珍藏版）》请在冰豆网上搜索。
<
1<
/div>
2<
3<
此例，如果使用.demodiv，那么0,1,2,3都有有边框；
如果使用
.demo>
div，那么只有0有边框，即只有子元素会被命中。
1.2子选择符（E>
F）
选择所有作为E元素的子元素F。
与包含选择符不同的是，子选择符只能命中子元素，而不能命中孙辈。
示例：
div{position:
relative;
a"
b"
子选择符<
此例只有.a会被命中，因为它是.demo的子元素；
1.3相邻选择符（E+F）
选择紧贴在E元素之后F元素。
与兄弟选择符不同的是，相邻选择符只会命中符合条件的相邻的兄弟元素。
E~FVS.E+F：
/*相邻选择符（E+F）*/
p+p{color:
#f00;
/*兄弟选择符（E~F）*/
p~p{color:
p>
p1<
/p>
p2<
h3>
这是一个标题<
/h3>
p3<
p4<
p5<
此例，如果使用p+p{color:
}，那么p2,p5将会变成红色；
如果使用p~p{color:
}，那么p2,p3,p4,p5将会变成红色；
1.4兄弟选择符（E~F）
选择E元素后面的所有兄弟元素F。
与相邻选择符不同的是，兄弟选择符会命中所有符合条件的兄弟元素，而不强制是紧邻的元素。
E~FVS.E+F：
二、属性选择符
2.1E[att]
选择具有att属性的E元素。
例如：
img[alt]{margin:
10px;
imgsrc="
图片url"
alt="
"
/>
此例，将会命中第一张图片，因为匹配到了alt属性
2.2E[att="
val"
]
选择具有att属性且属性值等于val的E元素。
input[type="
text"
]{border:
1pxsolid#000;
inputtype="
submit"
此例，将会命中第一张input，因为匹配到了alt属性，并且属性值为text
2.3E[att~="
选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的情况）。
div[class~="
ab"
此例，将会命中1,3两个div，因为匹配到了class属性，且属性值中有一个值为a
2.4E[att^="
选择具有att属性且属性值为以val开头的字符串的E元素。
div[class^="
abc"
acb"
bac"
此例，将会命中1,2两个div，因为匹配到了class属性，且属性值以a开头
2.5E[att$="
选择具有att属性且属性值为以val结尾的字符串的E元素。
div[class$="
c"
此例，将会命中1,3两个div，因为匹配到了class属性，且属性值以c结尾
2.6E[att*="
选择具有att属性且属性值为包含val的字符串的E元素。
div[class*="
此例，将会命中所有div，因为匹配到了class属性，且属性值中都包含了b
2.7E[att|="
选择具有att属性且属性值为以val开头并用连接符"
-"
分隔的字符串的E元素，如果属性值仅为val，也将被选择。
div[class|="
a-test"
b-test"
c-test"
此例，将会命中第一个div，因为匹配到了class属性，且属性值以紧跟着"
的a开头
三、伪类选择符
3.1E:
link
设置超链接a在未被访问前的样式。
∙如果需要给超链接定义：
访问前，鼠标悬停，当前被点击，已访问这4种伪类效果，而又没有按照一致的书写顺序，不同的浏览器可能会有不同的表现
∙超链接的4种状态，需要有特定的书写顺序才能生效。
超链接状态顺序：
a:
link{}
visited{}
hover{}
active{}
注意，a:
hover必须位于a:
link和a:
visited之后，a:
active必须位于a:
hover之后
可靠的顺序是：
l（link）ov（visited）eh（hover）a（active）te,即用喜欢（love）和讨厌（hate）两个词来概括
3.2E:
focus
设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式。
∙webkit内核浏览器会默认给:
focus状态的元素加上outline的样式。
input:
focus{background:
#f6f6f6;
color:
#f60;
border:
1pxsolid#f60;
outline:
none;
3.3E:
lang（fr）
匹配使用特殊语言的E元素。
p:
lang（zh-cmn-Hans）{color:
#f00;
lang（en）{color:
#090;
plang="
zh-cmn-Hans"
大段测试文字<
en"
english<
3.4E:
not（s）
匹配不含有s选择符的元素E。
∙有了这个选择符，那么你将可以很好的处理类似这样的场景：
假定有个列表，每个列表项都有一条底边线，但是最后一项不需要底边线
.demoli:
not（:
last-child）{border-bottom:
1pxsolid#ddd;
上述代码的意思是：
给该列表中除最后一项外的所有列表项加一条底边线
3.5E:
root
匹配E元素在文档的根元素。
在HTML中，根元素永远是HTML
∙根据这个特性，可以做IE8的Hack
.test{
black;
yellow\0;
*color:
blue;
_color:
red;
html:
root.test{color:
purple\0;
上述代码：
非IE文本将为black，IE9及以上为purple，IE8为yellow，IE7为blue，IE6为red
3.6E:
first-child
匹配父元素的第一个子元素E。
∙要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素
∙这里可能存在误解：
示例代码：
ul>
li>
列表项一<
/li>
列表项二<
列表项三<
列表项四<
/ul>
在上述代码中，如果我们要设置第一个li的样式，那么代码应该写成li:
first-child{sRules}，而不是ul:
first-child{sRules}。
∙来看这样一段代码：
first-child{color:
我是一个p<
这段代码你能看到p元素被命中变成了红色
∙假设将代码简单地修改一下：
h2>
我是一个标题<
/h2>
只是在p前面加了一个h2标签，你会发现选择器失效了，没有命中p，why?
∙E:
first-child选择符，E必须是它的兄弟元素中的第一个元素，换言之，E必须是父元素的第一个子元素。
与之类似的伪类还有E:
last-child，只不过情况正好相反，需要它是最后一个子元素。
3.7E:
last-child
匹配父元素的最后一个子元素E。
last-child选择符，E必须是它的兄弟元素中的最后一个元素，换言之，E必须是父元素的最后一个子元素。
first-child，只不过情况正好相反，需要它是第一个子元素。
∙通过具体的例子来进行理解：
有效的代码：
last-child{color:
无效的代码：
p
升级会员 