1.class 和 id 的使用场景?
- class类选择器，适用于某一类的样式调，如多个元素有相同的颜色，字体，字号时，可以使用同一个类选择器。
- id选择器，适用于整个文档有且只有一处的样式调用。
2.CSS选择器常见的有几种?
常见的CSS选择器有：
- 基础选择器；
- 组合选择器；
- 属性选择器；
- 伪类选择器；
- 伪元素选择器。
3.选择器的优先级是怎样的?对于复杂场景如何计算优先级？
选择器的优先级，从高到低：
- 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
- 作为style属性写在元素标签上的内联样式
- id选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义
复杂场景计算优先级
先设定比较参数
行内样式 <div style="xxx"></div> ==> a
ID 选择器 ==> b
类，属性选择器和伪类选择器 ==> c
标签选择器、伪元素 ==> d
计算上述参数个数之和，优先比较a，然后是b到c，再到d，如上级权重相同则比较次级权重（a相同就比较b的个数，如此类推a>b>c>d）
4.a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
顺序是
a:link;/*未浏览*/
a:visited;/*浏览过*/
a:hover;/*鼠标放在链接上时*/
a:active;/*鼠标按下左键未松开时*/
这四个伪类分的状态分别是未浏览、浏览过、鼠标放在链接上时、鼠标按下左键未松开时，因为后面的样式会覆盖前面的样式，所以我们使用这四个伪类时，要对浏览的动作顺序为依据，考虑先后生效的效果。
5.以下选择器分别是什么意思?
#header{
/*匹配id="header"的元素*/
}
.header{
/*匹配class="header"的元素*/
}
.header .logo{
/*匹配class="header"元素的子级中带有class="logo"的元素*/
}
.header.mobile{
/*匹配既有class="header"又有class="mobile"的元素*/
}
.header p, .header h3{
/*匹配class="header"元素子级中所有p标签的元素和class="header"子级中所有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标签*/
}
6.列出你知道的伪类选择器
:active/*匹配鼠标已经其上按下、还没有释放的元素。*/
:checked/*匹配表单中被选中的radio或checkbox元素。*/
:default/*表示在一组相似元素中所有默认的用户交互元素。*/
:dir()/*匹配特定文字书写方向的元素。在HTML中, 文字方向由dir属性决定。其他的文档类型可能有其他定义文字方向的方法。*/
:disabled/*表示任何被禁用的元素。如果一个元素不能被激活（如选择、点击或接受文本输入）或获取焦点，则该元素处于被禁用状态。*/
:empty/*代表没有子元素的元素。 这里说的子元素，只计算元素结点及文本（包括空格），注释、运行指令不考虑在内。*/
:enabled/*enabled 表示任何启用的（enabled）元素。如果一个元素能够被激活（如选择、点击或接受文本输入）或获取焦点，则该元素是启用的。*/
:first-child/*代表了一组兄弟元素中的第一个元素。*/
:first-of-type/*匹配父元素的所有该子元素类型中第一个出现的元素*/
:fullscreen/*应用于当前处于全屏显示模式的元素。 它不仅仅选择顶级元素，还包括所有已显示的栈内元素。*/
:focus/*在一个元素成为焦点时生效，用户可以通过键盘或鼠标激活焦点（例如：一次表单输入）。*/
:hover/*用于用户使用指示设备虚指一个元素（没有激活它）的情况。*/
:last-child/*代表父元素的最后一个子元素。*/
:last-of-type/*表示了在（它父元素的）子元素列表中，最后一个给定类型的元素。*/
:link/*匹配所有未被点击的链接。*/
:not()/*是以一个简单的X选择器为参数的功能性标记函数。它匹配不符合参数选择器X描述的元素。X不能包含另外一个否定选择器。*/
:nth-child()/*匹配多个子元素，其中子系列中的数字位置与模式an + b匹配。*/
:nth-last-child()/*匹配在文档树中后面有an+b-1个兄弟元素的元素，此时n大于或等于0，并且该元素具有父元素，从后往前匹配。*/
:nth-last-of-type()/*匹配父元素下使用同种标签的最后N个子元素。*/
:nth-of-type()/*匹配在文档树中具有之前具有相同元素名称的+ b-1兄弟元素的元素, 对于n的给定正值或零值，并且具有父元素。*/
:only-child/*代表了属于某个父元素的唯一一个子元素*/
:only-of-type/*任意一个元素，这个元素没有其他相同类型的兄弟元素。*/
:optional/*表示任意没有required属性的 <input> 或 <textarea> 元素使用它. 它允许表单容易的展示可选字段并且渲染其外观.*/
:required/*表示 任意 <input> 元素表示任意拥有required属性的 <input> 或 <textarea> 元素使用它. 它允许表单在提交之前容易的
展示必填字段并且渲染其外观. */
:root/*匹配文档树的根元素。*/
::selection 匹配用户当前选中的元素
:target/*代表一个特殊的元素，它的id是URI的片段标识符。*/
:valid/* 表示任意通过验证的 <input> 或 <form> 元素会被使用它. 它可以较容易让通过验证的字段采用合适的外观。*/
:visited/*匹配所有已被点击的链接*/
7.div:first-child和div:first-of-type的作用和区别
-
div:first-child的作用是匹配div父级元素下第一个div元素。 -
div:first-of-type的作用是匹配div父级元素下出现的div类型元素中的第一个div元素。
区别：div:first-child是针对div父容器下的第一个子元素，且这个元素是div；div:first-of-type是针对父容器下div类型元素中的第一个子元素，如果div父容器下第一个子元素不是div，div:first-child将不会选中任何元素；而div:first-of-type可以选中其下的div元素。
8.运行如下代码，解析下输出样式的原因。
<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>
Paste_Image.png
color: red匹配的是带有class="item1"元素的父容器下第一个子元素即p标签的父容器div标签下的第一个子元素即<p class="item1">aa</p>；
background: blue;匹配的是带有class="item1"元素的父容器下出现的相同类型子元素中的第一个子元素，即第一个p标签和第一个h3标签。
网友评论