1、 class 和 id 的使用场景?
- class 类选择器,匹配class包含特定类的元素,可以管控多个含有相同类的元素
- id id选择器,匹配特定的id元素,id是唯一的
2、CSS选择器常见的有几种?
基础选择器 |
含义 |
* |
通配符,通用元素选择器,匹配页面任何元素(这决定它很少被使用) |
#id |
id选择器,匹配特定id的元素 |
.class |
类选择器,匹配包含特定类的元素 |
element |
标签选择器 |
组合选择器 |
含义 |
E,F |
多元素选择器,用,分隔,同时匹配元素E或元素F |
E F |
后代选择器,用空格分隔,匹配E元素所有的后代(不只是子元素、子元素向下递归)元素F |
E>F |
子元素选择器,用>分隔,匹配E元素的所有直接子元素 |
E+F |
直接相邻选择器,匹配E元素之后的相邻的同级元素F |
E~F |
普通相邻选择器(弟弟选择器),匹配E元素之后的同级元素F(无论直接相邻与否) |
.class1.class2 |
id和class选择器和选择器连写的时候中间没有分隔符,. 和 # 本身充当分隔符的元素 |
element#id |
id和class选择器和选择器连写的时候中间没有分隔符,. 和 # 本身充当分隔符的元素 |
属性选择器 |
含义 |
E[attr] |
匹配所有具有属性attr的元素,div[id]就能取到所有有id属性的div |
E[attr = value] |
匹配属性attr值为value的元素,div[id=test],匹配id=test的div |
E[attr ~= value] |
匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素 |
E[attr ^= value] |
匹配属性attr的值以value开头的元素 |
E[attr $= value] |
匹配属性attr的值以value结尾的元素 |
E[attr *= value] |
匹配属性attr的值包含value的元素 |
伪元素选择器 |
含义 |
E:first-line |
匹配E元素内容的第一行 |
E:first-letter |
匹配E元素内容的第一个字母 |
E:before |
在E元素之前插入生成的内容 |
E:after |
在E元素之后插入生成的内容 |
伪类选择器 |
含义 |
E:first-child |
匹配父元素下面的第一个子元素 |
E:link |
匹配所有未被点击的链接 |
E:visited |
匹配所有已被点击的链接 |
E:active |
匹配鼠标已经其上按下、还没有释放的E元素 |
E:hover |
匹配鼠标悬停其上的E元素 |
E:focus |
匹配获得当前焦点的E元素 |
E:lang(c) |
匹配lang属性等于c的E元素 |
E:enabled |
匹配表单中可用的元素 |
E:disabled |
匹配表单中禁用的元素 |
E:checked |
匹配表单中被选中的radio或checkbox元素 |
E::selection |
匹配用户当前选中的元素 |
E:root |
匹配文档的根元素,对于HTML文档,就是HTML元素 |
E:nth-child(n) |
匹配其父元素的第n个子元素,第一个编号为1 |
E:nth-last-child(n) |
匹配其父元素的倒数第n个子元素,第一个编号为1 |
E:nth-of-type(n) |
与:nth-child()作用类似,但是仅匹配使用同种标签的元素 |
E:nth-last-of-type(n) |
与:nth-last-child() 作用类似,但是仅匹配使用同种标签的元素 |
E:last-child |
匹配父元素的最后一个子元素,等同于:nth-last-child(1) |
E:first-of-type |
匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1) |
E:last-of-type |
匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1) |
E:only-child |
匹配父元素下仅有的一个子元素,等同于:first-child:last-child或 :nth-child(1):nth-last-child(1) |
E:only-of-type |
匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1) |
E:empty |
匹配一个不包含任何子元素的元素,文本节点也被看作子元素、 |
E:not(selector) |
匹配不符合当前选择器的任何元素 |
n的取值
1,2,3,4,5
2n+1, 2n, 4n-1
odd, even
3、 选择器的优先级是怎样的?对于复杂场景如何计算优先级?
从高到低
- 属性后面使用!important会覆盖页面内任何位置定义的元素样式;
- 作为style属性写在元素标签上的内联样式;
- id选择器;
- 类选择器;
- 伪类选择器;
- 属性选择器;
- 标签选择器;
- 通配符选择器;
- 浏览器自定义。
复杂场景下的比较
通过比较标签数,先比较最优先级标签数,数量多的优先级高,若最高优先级的标签数相同,比较次一级的标签数
4、a:link, a:hover, a:active,a:visited 的顺序是怎样的? 为什么?
a:link, a:hover, a:active,a:visited的优先级相同
- 未点击链接前link一直处于激活状态,鼠标已经其上按下、还没有释放或鼠标悬停时a同时处在link和active(或hover)状态,优先级相同,而选择器优先级相同时,后定义的会覆盖先定义的,所以应该排link,hover,active
- visited若在hover后面,已点击过的链接会覆盖hover样式所以visited在hover之前
a:link{}
a:visit{}
a:hover{}
a:active{}
5、 以下选择器分别是什么意思?
#header{
}/*选择id为header的元素*/
.header{
}/*选择class为header的元素*/
.header .logo{
}/*选择class为header的元素中,class为logo的后代元素*/
.header.mobile{
}/*选择class包含header和mobile的元素*/
.header p, .header h3{
}/*选择class为header的元素中后代p元素和h3元素*/
#header .nav>li{
}/*选择id为header的元素中,class为nav的元素的直接后代li元素*/
#header a:hover{
}*选择id为header的元素中,后代a元素的hover状态*/
#header .logo~p{
}/*选择id为header的元素中,class为logo的元素之后同级p元素(无论是否直接相邻*/
#header input[type="text"]{
}/*选择id为header的元素中,input标签中type属性为text的元素*/
div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 (注意空格的作用)
- div:first-child 匹配父元素下面的第一个子元素,其类型为div。
- div:first-of-type 匹配某个父元素第一个div类型子元素
- div :first-child,匹配div下的后代元素标签中第一个子元素。空格是后代的意思。
- div :first-of-type,匹配div下的后代元素标签中,相同类型标签的第一个子元素。空格是后代的意思。
七、解析代码
<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>
- .item1:first-child{color: red;} 选择了其父元素第一个class为item的子元素,并将其颜色定为红色,因此aa显示为红色;
- .item1:first-of-type{background: blue;} 选择了其父元素下不同标签中第一个class为item的子元素,并将其背景颜色定为蓝色,因此p标签和h3标签的第一个元素的背景色为蓝色。
网友评论