1.CSS选择器常见的有几种?
①基础选择器
- “*”：通用元素选择器，匹配页面任何元素
- id 选择器(“#”)：#id 写法是英文或数字格式，中间不能有空格，页面上所有的 id 名称都不能一样
- class 选择器（“.”）: 类选择器，.class 选择器选取带有指定类 (class) 的元素
- element：标签选择器
②组合选择器
- E,F：多元素选择器，用 , 分隔，同时匹配元素 E 或元素 F
- E F：后代选择器，用空格分隔，匹配 E 元素所有的后代（不只是子元素 F ）,子元素向下递归
- E>F：子元素选择器，用 > 分隔，匹配 E 元素所有直接子元素
- E+F：直接相邻选择器，匹配 E 元素之后的相邻的同级元素 F（也就是选中了下一个元素）
- E~F：普通相邻选择器，匹配 E 元素之后的同级元素 F （也就是选中了下面的所有同级元素）
- .class1.class2/element#id:id和class选择器和选择器连写的时候中间没有分隔符，. 和 # 本身充当分隔符的元素
③属性选择器
以某个属性作为选择依据（E[attr = value]）
例：div[id = test]，匹配 id = test 的 div
④伪类选择器
- E:first-child：匹配元素E的第一个子元素
- E:hover：匹配鼠标悬停其上的E元素
- E:active：匹配鼠标已经其上按下、还没有释放的E元素
- E:checked：匹配表单中被选中的radio或checkbox元素
- 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::before：在E元素之前插入生成的内容
- E::after：在E元素之后插入生成的内容
2.选择器的优先级是怎样的?（下面从高到低排列）
- !important 在属性后面使用，会覆盖页面内任何位置定义的元素样式
- 作为 style 属性写在元素标签上的内联样式
- id 选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义（例如 h1 默认的大小）
ps1：如果两个选择器规权值是一样的，那优先级是后面的覆盖前面的
ps2：CSS选择器规则优先级很简单，每个选择器本身有优先级，越具体优先级越高
ps3：id选择器的权值 > class选择器的权值 > 标签选择器的权值
3.class 和 id 的使用场景(增加 name )?
- class 是指定标签的类名。
使用场景：CSS 操作时把一些特定样式放到一个 class 类中，需要此样式的标签，可以在添加此类。 - id 指定标签的唯一标识。
使用场景：①根据提供的唯一 id 号，快速获取标签对象。 ②用于充当 label 标签 for 属性的值。 - name 指定标签的名称。
使用场景：① form 表单。② input type='radio'单选标签。
4.使用 CSS 选择器时为什么要划定适当的命名空间？
- 方便代码的管理与维护
- 提高代码的可读性
- 避免与他人代码相冲突
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 链接上时的样式设置*/
}
6.列出你知道的伪类选择器
- E:first-child：匹配元素E的第一个子元素
- E:hover：匹配鼠标悬停其上的E元素
- E:active：匹配鼠标已经其上按下、还没有释放的E元素
- E:checked：匹配表单中被选中的radio或checkbox元素
- 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)
7. :first-child 和 :first-of-type 的作用和区别
first-child 定义匹配元素中第一个子元素，而 first-of-type 定义匹配父元素下使用同种标签的第一个子元素。下面我们给两个对比的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet">
<style>
.box>h1:first-of-type{
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<div>
<h1>我是标题1</h1>
</div>
<h1>我的标题2</h1>
<p>我的段落1</p>
</div>
</body>
</html>
上面这串代码我们用到了 :first-of-type 我们在浏览器中得到如下图的效果：
first-of-type.png
接下来我们将上面代码中的
:first-of-type 修改为 :first-child 我们得到下面这个效果，可以很明显的看到我们的命令并没有生效。
first-child(1).png
当我们将代码修改为这样的时候：
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet">
<style>
.box>h1:first-child{
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<h1>我的标题2</h1>
<div>
<h1>我是标题1</h1>
</div>
<p>我的段落1</p>
</div>
</body>
</html>
我们就可以得到我们想要的效果，如下图：
first-child(2).png
<strong>我们可以得到这样的结论，:first-of-type 会自动寻找 box 下的 h1 元素，无论中间穿插了多少别的元素；而 :first-child 它只能根据 box 中第一个子元素来进行命令，若第一个不是 h1 元素，则它就找不到 box 下的 h1 元素，命令无法生效。
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>
代码效果图如下：
代码显示.png
- 蓝色背景：由于 :first-of-type 是取同种标签的第一个元素，而 div 中 p 元素仅有一个，但是 h3 元素有两个选择第一个，所以出现 ccc 没有蓝色背景的情况
- 红色字体：:first-child 匹配 item1 的第一个子元素，可想而知仅为 p 变成红色字体
9. text-align: center 的作用是什么，作用在什么元素上？能让什么元素水平居中
- 作用：使元素水平居中
- 作用元素：块级元素
- 能让什么元素水平居中：块级元素内部的行内元素
10.如果遇到一个属性想知道兼容性，在哪查看?
利用 can i use 即可查询
<strong>本文版权归作者和饥人谷所有，转载请注明出处
网友评论