web（三）

VIP文章 isWhj.ReTurN_N

已于 2022-12-30 20:31:08 修改

阅读量284

点赞数

文章标签： html

于 2022-11-04 15:21:23 首次发布

本文链接：https://blog.csdn.net/m0_74071065/article/details/127588750

版权

-下面我们开启第三周的学习-
上周我们学习了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