参考手册选择符文档格式.docx
- 文档编号:14377605
- 上传时间:2022-10-22
- 格式:DOCX
- 页数:23
- 大小:23.26KB
参考手册选择符文档格式.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
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 参考手册 选择