- class 和 id 的使用场景?
- id定位到页面上唯一的元素，class定位到页面上某一类的元素。
- CSS选择器常见的有几种?
- 基础选择器
* 通用元素选择器，匹配页面任何元素（这也就决定了我们很少使用）
#id id选择器，匹配特定id的元素
.class 类选择器，匹配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] 匹配所有属性为value的元素（div[type=text]匹配id=text的div） E[attr~=value] 匹配所有属性attr具有多个空格分隔，其中一个值等于value的元素 E[attr ^=value] 匹配属性attr的值以value开头的元素 E[attr $=value] 匹配属性attr的值以value结尾的元素 E[attr *=value] 匹配属性attr的值包含value的元素 - 伪类选择器
E:first-child 匹配元素E的第一个子元素 E:last-child 匹配元素e的最后一个子元素 E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1 E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于nth-of-type(1) E:hover 匹配鼠标悬停智商的e元素 E:focus 匹配获得焦点的e元素 - 伪元素选择器
E::first-line 匹配E元素的第一行 E::first-letter 匹配E元素的第一个字母 E::before 在e元素之前插入生成的内容 E::after 在e元素之后插入生成的内容
- 选择器的优先级是怎样的?对于复杂场景如何计算优先级？
1.在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
2.作为style属性写在元素标签上的内联样式
3.id选择器
4.类选择器
5.伪类选择器
6.属性选择器
7.标签选择器
8.通配符选择器
9.浏览器自定义
- 行内样式 <div style="xxx"></div> ==> a
- ID 选择器 ==> b
- 类，属性选择器和伪类选择器 ==> c
- 标签选择器、伪元素 ==> d
计算a、b、c、d各自的数目来确定优先级。
-
a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
正确顺序应为：
a：link
a：visited
a:hover
a:active
原因：
1.当选择器优先级别相同时，后定义的会覆盖先定义的
2.以此类推，当鼠标经过未访问链接，同时有link和hover属性，由于后定义的覆盖先定义的，所以hover在后面。以此类推，当鼠标经过已访问链接，同时有visited和hover属性，由于后定义的覆盖先定义的，所以hover在link和visited后面。 -
以下选择器分别是什么意思?
#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元素鼠标移动到上方的情况
#header .logo~p{ } --- id为header元素的后代元素中class为logo的同级p元素
#header input[type="text"]{ } --- id为header元素的后代元素中type=“text”的input元素
- 列出你知道的伪类选择器
同题目2 - div:first-child和div:first-of-type的作用和区别
前者匹配的是div下的第一个元素，而后者匹配的是div下的第一个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>
这里有两个选择器，第一个选择器是匹配class=“item1”下的第一个元素，所以aa是红色的，而bb和ccc分别是第二和第三，所以不做匹配。第二个选择器匹配各种类型下的class=“item1”的第一个元素，所以aa和bb是会把背景变成蓝色，而ccc由于和bb标签相同，且是第二个，故不匹配。
网友评论