-下面我们开启第三周的学习-
上周我们学习了CSS标签的两类标签:id和class,选择我们来学习第三个:
(3)、 标签选择器
css:div{}
html:`<div> </div>`
通过前两周的学习,这个标签选择器对我们来说已经非常熟悉了
使用场景:
1、去掉某些标签的默认样式时
2、复杂的选择器,如: 层次选择器
(4)、群组选择器(分组选择器)
可以通过逗号的方式给多个不同的选择器添加统一的CSS样式,来达到代码的复用。
css:div,p,span{}
在之前的学习中,我们给三个不同的容器添加背景颜色时需要在添加如下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
background:red}
#text{
background:red}
.title{
background:red;}
</style>
</head>
<body>
<div>这时一个快</div>
<p id="text">这时一个段落</p>
<h2 class="title">这时一个标题</h2>
</body>
</html>
但是利用群组选择器,我们就可以在一行完成:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div,#text,.title{
background:red};
</style>
</head>
<body>
<div>这时一个快</div>
<p id="text">这时一个段落</p>
<h2 class="title">这时一个标题</h2>
</body>
</html>
这样也可以达到相同的效果。
(5)、通配选择器
*{} (包含div,ul,li,p,h1,h2)
注意:尽量避免使用统配选择器,因为会给所有的标签添加样式。
使用场景:去掉所有标签的默认样式时
(6)、层次选择器
后代:M N { }
父子:M>N
兄弟:M~N
相邻:M+N
①、后代选择器:M N { }
两个标签之间时利用空格进行分隔的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#list li{
border:1px red solid;}
</style>
</head>
<body>
<ul id="list">
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</body>
</html>
这样我们就能使只让ul标签的li生效,而ol内的标签不会,这就是后代选择器。
②、父子选择器:M>N { }
父子选择器的代码只要在后代选择器的代码中的M和N之间加入一个大于号,如下简写:
<style>
#list>li{
border:1px red solid;}
</style>
这样我们就能看到在ul标签下的li标签生效了,但是li标签下的(例如孩子的孩子)并没有生效:
③、兄弟选择器:M~N { }
(注意区别)指的是:当前M下面的所有兄弟N标签。相似的,在后代选择器的M、N之间加入波浪线。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div~h2{
background-color: red;}
</style>
</head>
<body>
<h2>这是一个段落</h2>
<div>这是一个块</div>
<p>这是一个段落</p>
<h2>这是一个段落</h2>
<h2>这是一个段落</h2>
<h2>这是一个段落</h2>
</body>
</html>
保存后运行,我们就可以看到div下面的h2标签的背景颜色都变成红色,而div上面的h2标签并没有变化:
④:相邻选择器:M+N { }
指的是当前M下面的相邻标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div+h2{
background-color: red;}
</style>
</head>
<body>
<h2>这是一个段落</h2>
<div>这是一个块</div>
<h2>这是一个段落</h2>
<p>这是一个段落</p>
<h2>这是一个段落</h2>
<h2>这是一个段落</h2>
</body>
</html>
注意:这里div要和上下的h2都要相邻,最终出现变化的是下面的h2标签。
(7)、属性选择器
M[attr] {}
在VSCode中输入如下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div[class=search]{
background-color: red;}
</style>
</head>
<body>
<div>这是一个块</div>
<div class="search">这是第二个个块</div>
<div class="search-button">这是第三个块</div>
<div class="box">这时第三个快</div>
</body>
</html>
在style标签中输入了div并且添加了一个class的属性选择器,让他等于search,所以下面只会有class="search"发生效果,那如何才能让下面的search-button也一起生效呢?只要我们在属性选择器之中的class加上星号:* 即可。
<style>
div[class*=search]{
background-color: red;}
</style>
这样,下面的所有div标签中包含search的都会生效。
= :完全匹配
*=:部分匹配
^=:起始匹配
$=:结束匹配
[ ] [ ] [ ] 可以多个中括号进行组合
这里的起始匹配和结束匹配都是什么意思呢?
- 起始匹配:^=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div[class^=search]{
background-color: red;}
</style>
</head>
<body>
<div>这是一个块</div>
<div class="search">这是第二个个块</div>
<div