css选择器
2017-07-25 本文已影响0人
liushaung
1.class 和 id 的使用场景?
- class用于主区块里面的详细内容，同一个class可以重复出现，一个标签可以有几个不同的class。
- id多使用于主要块级元素，同一个id一个页面中只能出现一次，有些独一无二元素也可用id。
2.CSS常见选择器
- 通配符选择器（＊）
- id选择器（#ID）
- 类选择器（.className）
- 元素选择器(E)
- 后代选择器（Ｅ Ｆ）
- 子元素选择器(E>F)
- 相邻兄弟元素选择器(E + F)
- 兄弟元素选择器(E ~ F)
- 群组选择器（selector1,selector2,...,selectorN）
- 属性选择器（E[attr]）更多属性选择器
- 伪类选择器（E:hover）更多伪类选择器
- nth选择器(E:nth-child(an + b)) 更多相关知识
- 伪元素选择器（E::before）更多伪元素选择器
3.选择器的优先级问题
- css选择器优先级是根据权重计算的。
- ID选择器权值为100
- 类选择器、属性选择器、伪类选择器权值为10
- 标签选择器、伪元素选择器权值为1
- 相应的权值相加即可，最后根据结果排出优先级
- 除权重外还有些其他规则。
- 行内样式 》 内部样式表 》外部样式表
- 权值相同的，后定义的优先级较高
- 样式值含有！important，优先级最高
4.a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
- 顺序为a:link > a:visited > a:hover > a:active
- 原因：
- 鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性，后面的属性会覆盖前面的属性定义；
- 鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性，后面的属性会覆盖前面的属性定义；
- a:active是鼠标点击与释放之间发生的事件，并拥有鼠标悬停a:hover属性；
- 由于伪类的选择器优先级一致，后面的a链接样式会覆盖前面的。
- 所以: a:link > a:visited > a:hover > a:active。
5.以下选择器分别是什么意思?
<pre>
- 选择ID为header的元素
header{
}
- 选择class为header的元素
.header{
} - 选择class为header的元素的后代元素中class为logo的元素
.header .logo{
} - 选择同时有header和mobile两个class的元素
.header.mobile{
} - 选择class为header的元素的后代元素中的p元素和h3元素
.header p, .header h3{
} - 选择class为header的元素的后代元素中class为nav的元素的子元素中的li元素
header .nav>li{
}
- 选择class为header的元素的后代元素中a元素的hover伪类
header a:hover{
}
- 选择class为header的元素的后代元素中的class为logo的元素的所有它后面的兄弟元素中为p的元素
header .logo~p{
}
- 选择class为header的元素的后代元素中的所有input元素中type属性为text的元素
header input[type="text"]{
}
</pre>
6. 伪类选择器有哪些
- :active、:foucs、:hover、:link、:visted、:first-child、:lang
7. div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别
- div:first-child：如果div是它父元素的第一个子元素则匹配，否则不能匹配
- div:first-of-type：匹配div的父元素下的第一个div元素
- div :first-child：匹配div元素的后代中的第一个元素
- div :first-of-type：匹配div元素的后代中所有出现的第一种元素
8. 解析代码：
<pre>
<style>
.item1:first-child{
color: red;
}
.item1:first-of-type{
background: blue;
}
</style>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
</pre>
- 因为class为item1的元素的父元素下的第一个元素的class为item1，所以这个元素被选中，aa的颜色变为红色。
- 因为class为item1的父元素下有两种元素，所以这两种元素中的第一个出现的元素被选中，所以aa和bb所在的元素的背景色变为蓝色。
