问答
1.CSS选择器常见的有几种?
1.基础选择器
- *号选择器
- id选择器
- 类选择器
- 标签选择器
*{
font-family: "微软雅黑";
box-sizing: border-box;
}
# header{
font-weight: bold;
}
.content{
background-color: #ccc;
}
a {
text-decoration: none;
}
2.组合选择器
- E,F 多元素选择器，用,分隔，同时匹配元素E或元素F
- E F 后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下递归）元素F
- E>F 子元素选择器，用>分隔，匹配E元素的所有直接子元素
- E+F 直接相邻选择器，匹配E元素之后的相邻的同级元素F
- E~F 普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否）
- .class1.class2 就是类同时满足两个，是且的意思
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组合选择器</title>
<style type="text/css">
.div,h1{
text-align: center;
}
.block h1 {
background-color: yellow;
}
.block>h1{
border: solid 1px;
}
.block .second+h1{
border-radius: 10px;
}
.block .second~h1{
width: 800px;
margin: 0 auto;
}
.second.div {
color: red;
}
</style>
</head>
<body>
<div class="block">
<h1 class="first">我是大标题</h1>
<h1 class="second">我也是大标题</h1>
<div class="second div">我是div</div>
<h1 class="third">我还是大标题</h1>
<div class="div">
我是div
</div>
<h1 class="third">我是...</h1>
</div>
</body>
</html>
Paste_Image.png
3.属性选择器
E[attr] 匹配所有具有属性attr的元素，div[id]就能取到所有有id属性的div
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style type="text/css">
p[keyi]{
color: red;
}
</style>
</head>
<body>
<p keyi>
可以应用的样式
</p>
<p bukeyi>
不可以应用的样式
</p>
</body>
</html>
E[attr = value] 匹配属性attr值为value的元素，div[id=test],匹配id=test的div
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style type="text/css">
p[ name=p]{
color: red;
}
</style>
</head>
<body>
<p name=p>
可以应用的样式
</p>
<a name=a href="#">
不可以应用的样式
</a>
</body>
</html>
E[attr ~= value] 匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style type="text/css">
p[ name ~=world]{
color: red;
}
</style>
</head>
<body>
<p name="hello world">
可以应用的样式
</p>
<p name="world hello">
可以应用的样式
</p>
<p name="hello pis" >
不可以应用的样式
</p>
</body>
</html>
E[attr ^= value] 匹配属性attr的值以value开头的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style type="text/css">
p[ name ^=hello]{
color: red;
}
</style>
</head>
<body>
<p name="hello world">
可以应用的样式
</p>
<p name="world hello">
不可以应用的样式
</p>
</body>
</html>
E[attr $= value] 匹配属性attr的值以value结尾的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style type="text/css">
p[ name $=world]{
color: red;
}
</style>
</head>
<body>
<p name="hello world">
可以应用的样式
</p>
<p name="world hello">
不可以应用的样式
</p>
</body>
</html>
E[attr *= value] 匹配属性attr的值包含value的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style type="text/css">
p[ name *=h]{
color: red;
}
</style>
</head>
<body>
<p name="hello">
可以应用的样式
</p>
<p name="world">
不可以应用的样式
</p>
</body>
</html>
4.伪类选择器
E:first-child 匹配元素E的第一个子元素
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
5.伪元素选择器
E::first-line 匹配E元素内容的第一行
E::first-letter 匹配E元素内容的第一个字母
E::before 在E元素之前插入生成的内容
E::after 在E元素之后插入生成的内容
2.选择器的优先级是怎样的?
一、从高到低分别是
1.在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
2.作为style属性写在元素标签上的内联样式
3.id选择器
4.类选择器
5.伪类选择器
6.属性选择器
7.标签选择器
8.通配符选择器
9.浏览器自定义
前面的大于后面的
二、如果存在以下情况
#test p.class1 {...}
#test .class1.class2 {...}
由于类选择去的优先级大于标签选择器 所以下面的优先
三、如果存在同级的情况 则后面的覆盖前面的
3.class 和 id 的使用场景?
- id选择器的适用范围 独一无二 例如 header content footer等主区块
- class 选择器 适用于同一类型等小区块
4.使用CSS选择器时为什么要划定适当的命名空间？
划定命名空间的原因是尽量使定义的CSS选择器影响最小
5.以下选择器分别是什么意思?
Paste_Image.png
6.列出你知道的伪类选择器
E:active 匹配鼠标已经其上按下、还没有释放的E元素
E:hover 匹配鼠标悬停其上的E元素
E:focus 匹配获得当前焦点的E元素
7:first-child和:first-of-type的作用和区别
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style type="text/css">
.block p:first-child{
color: red;
}
.block h1:first-child{
color: red;
}
.block p:first-of-type{
background-color: yellow;
}
.block h1:first-of-type{
background-color: yellow;
}
</style>
</head>
<body>
<div class="block">
<p>第一个段落</p>
<h1>第一个标题</h1>
</body>
</html>
.block p:first-child 匹配到的是p元素,因为p元素是div的第一个子元素；
.block h1:first-child 匹配不到任何元素，因为在这里h1是div的第二个子元素，而不是第一个；
.block p:first-of-type匹配到的是p元素，因为匹配div下面的第一个p元素；
.block h1:first-of-type匹配到的是h1元素，因为匹配的是div下面的第一个h1元素
Paste_Image.png
8.运行如下代码，解析下输出样式的原因。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>first-child vs first-of-child</title>
<style>
.item1:first-of-type{
background: red;
}
.item1:first-child{
color: blue;
}
</style>
</head>
<body>
<div class="item1">111</div><!--是body下面的第一个div.item1元素，是body下面的第一个div元素并且是item1类 背景红色字体蓝色-->
<div class="ct">
<p class="item1">222</p> <!--是div下面的第一个p.item1元素，是div下面第一个元素并且是item1类 背景红色字体蓝色-->
<div class="item1">333</div> <!--是div下面的第一个div.item1元素，不是div下面第一个元素 背景红色字体黑色-->
<div class="item1">444</div><!--是div下面的第二个div.item1元素，不是div下面第一个元素 背景白色字体黑色-->
<div class="item2">
<div class="item1">555</div><!--是div下面的第一个div.item1元素，是div下面第一个元素并且是item1类 背景红色字体蓝色-->
<div class="item1">666</div><!--是div下面的第二个div.item1元素，不是div下面第一个元素 背景白色字体黑色-->
</div>
</div>
</body>
</html
Paste_Image.png
9.text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
text-align: center 只能够让行内元素相对与父类元素水平居中，不能够作用在块级元素上
行内元素有：a、span、img、input、button、em、textarea。
网友评论