-
class和id的使用场景?
class为一类的元素命名,所有有共同特性的元素都可以用同一class进行分类;
id为特有的元素命名,在html中只能有唯一一个id,不能重复。
-
css选择器常见的有几种?列出一些你所知道的伪类选择器。
1.基础选择器
*
通用元素选择器,匹配页面任何元素;
#id
id选择器,匹配特定id的元素;
.class
类选择器,匹配class包含特定类的元素;
element
标签选择器。
2.组合选择器
A,B
多元素选择器,用,分隔,同时匹配元素A或元素B;
A B
后代选择器,用空格分隔,匹配A元素所有的后代(不只是子元素,子元素向下递归)元素B;
A>B
子代选择器,用>分隔,匹配A元素的所有直接子元素B;
A+B
相邻选择器,用+分隔,匹配A元素之后的相邻的同级元素B;
A~B
普通相邻选择器,匹配A元素之后的同级元素B(无论直接相邻与否);
.class1.class2
匹配同时拥有.class1.class2两类的元素;
element#id
匹配拥有某id的某元素,例子:h#important,匹配拥有important这个id的h元素。
3.属性选择器
A[attr]
匹配所有具有属性attr的元素,div[id]就能取到所有有id属性的div;
A[attr = value]
匹配属性attr值为value的元素,div[id=test],匹配id=test的div;
A[attr ~= value]
匹配所有具有属性attr且其中一个attr属性值等于value的元素;
A[attr ^= value]
匹配属性attr的值以value开头的元素;
A[attr $= value]
匹配属性attr的值以value结尾的元素;
A[attr *= value]
匹配属性attr的值包含value的元素。
4.伪类选择器
A:first-child
匹配作为长子(第一个子女)的元素E;
A:link
匹配所有未被点击的链接;
A:visited
匹配所有已被点击的链接;
A:active
匹配鼠标已经其上按下、还没有释放的E元素;
A:hover
匹配鼠标悬停其上的E元素;
A:focus
匹配获得当前焦点的E元素;
A:lang(c)
匹配lang属性等于c的E元素;
A:enabled
匹配表单中可用的元素;
A:disabled
匹配表单中禁用的元素;
A:checked
匹配表单中被选中的radio或checkbox元素;
A::selection
匹配用户当前选中的元素;
A:root
匹配文档的根元素,对于HTML文档,就是HTML元素;
A:nth-child(n)
匹配其父元素的第n个子元素,第一个编号为1;
A:nth-last-child(n)
匹配其父元素的倒数第n个子元素,第一个编号为1;
A:nth-of-type(n)
与:nth-child()
作用类似,但是仅匹配使用同种标签的元素;
A:nth-last-of-type(n)
与:nth-last-child()
作用类似,但是仅匹配使用同种标签的元素;
A:last-child
匹配父元素的最后一个子元素,等同于:nth-last-child(1)
;
A:first-of-type
匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1)
;
A:last-of-type
匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1)
;
A:only-child
匹配父元素下仅有的一个子元素,等同于:first-child:last-child
或 :nth-child(1)
:nth-last-child(1)
;
A:only-of-type
匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type:last-of-type
或 :nth-of-type(1)
:nth-last-of-type(1)
;
A:empty
匹配一个不包含任何子元素的元素,文本节点也被看作子元素;
A:not(selector)
匹配不符合当前选择器的任何元素。
5.伪元素选择器
A::first-line
匹配E元素内容的第一行;
A:first-letter
匹配E元素内容的第一个字母;
A::before
在E元素之前插入生成的内容;
A::after
在E元素之后插入生成的内容。
-
选择器的优先级是怎样的?对于复杂场景如何计算优先级?
选择器遵循如下优先级(从高到低):
1.在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
2.作为style属性写在元素标签上的内联样式
3.id选择器
4.类选择器
5.伪类选择器
6.属性选择器
7.标签选择器
8.通配符选择器
9.浏览器自定义
对于复杂场景,有如下规则:
对于不一样的选择器,有不一样的权重,假设:
行内样式 <div style="xxx"></div>
==> a
ID 选择器 ==> b
类,属性选择器和伪类选择器 ==> c
标签选择器、伪元素 ==> d
例子(都指向同一元素):
A:#test p.class1 {...}
a=0,b=1,c=1,d=1
B:#test .class1.class2 {...}
a=0,b=1,c=2,d=0
对abcd项进行比较,数量多的优先级高,数量相同则比较下一项,可知B的优先级要高于A。
对于下面的重复样式,
div {color: #333;}
....
div {color: #666;}
则新的样式会覆盖旧的样式,div {color: #666;}
会生效。
-
a:link, a:hover, a:active, a:visited 的顺序是怎样的?为什么?
顺序如下:
a:link
a:visited
a:hover
a:active
基于样式覆盖:当链接没有任何操作时,a:link生效;当鼠标放在链接上时,a:hover生效,覆盖a:link;当点击链接时,a:active生效,覆盖a:hover和a:link;链接被访问以后,a:visited永久生效,覆盖a:link,同时a:hover,a:active也有效。这是唯一顺序。
-
一些选择器的含义
-
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;
}
A:nth-child(n)匹配其父元素的第n个子元素。item1的父元素是ct,ct的第一个元素就是aa,所以aa字体变为了红色;
.item1:first-of-type{
background: blue;
}
A:nth-of-type(n)与:nth-child()作用类似,但是仅匹配使用同种标签的元素;item的父元素是ct,ct下有两种类型的元素,p和h3,p的第一个元素是aa,h3的第一个元素是bb,所以aa和bb的背景变为了蓝色。