CSS复合选择器—2

最新推荐文章于 2022-09-22 19:37:04 发布

kkkk_1112

最新推荐文章于 2022-09-22 19:37:04 发布

阅读量400

点赞数 1

本文链接：https://blog.csdn.net/kkkk_1112/article/details/108757986

版权

CSS复合选择器

复合选择器的分类：

后代选择器 （重点）
子元素选择器
交集选择器
并集选择器（重点）
链接伪类选择器（重点）

（1）后代选择器（重点）
概念：后代选择器又称为包含选择器
作用：用来选择元素或者元素组的子孙后代
格式：

父级  子级{属性：属性值；属性：属性值}

当标签发生嵌套时，内层标签是外层标签的后代。

.class h2{color:red;foont-size:16px;}

（2）子元素选择器
作用：子元素选择器作为某元素的子元素的元素。
语法：

父级 > 子级{属性：属性值；}

<head>
	<title>子元素选择器</title>
	<!--这里的子元素，指的只是亲儿子，不包括孙子-->
	<style >	
		div>strong {
			color: red;

		}
	</style>
</head>

<body>
	<div>
		<strong>儿子</strong>
		<strong>儿子</strong>
		<strong>儿子</strong>
	</div>
	<div>
		<p>
			<strong>孙子</strong>
			<strong>孙子</strong>
			<strong>孙子</strong>
		</p>
	</div>
</body>

结果：只有 “儿子”变成了红色，孙子不变色。

意义：这里的子指的是亲儿子，不包括孙子。

（3）交集选择器
条件：交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。
代码：

<head>
	<title>交集选择器</title>
	<style >
		/*需求：让p标签变成红色*/
		/*交集选择器：既是 p标签 ，又是 .red类选择器*/
		p.red{
			color: red;
		}
	</style>
</head>

<body>
	<p class="red">红色</p>
	<p class="red">红色</p>
	<p class="red">红色</p>
	<div class="red">红色</div>
	<p>蓝色</p>
	<p>蓝色</p>
	<p>蓝色</p>
</body>

结果：只有 p标签中存在 class类的标签变成了红色。

格式： p.red 是一个名字，中间不能有空格。交集选择器并不常用

（4）并集选择器（重点）
应用：如果某些选择器定义的样式相同，就可以利用并集选择器，让代码更简洁。

语法：
.class,h3 {color : red ; font-size : 25px ; }
类选择器, 标记选择器{属性1：属性值1；属性2：属性值2；}

记忆：
并集选择器常用于集体声明，逗号隔开，所有选择器都会执行后面样式，逗号是“和”的意思。

代码：

<head>
	<title>并集选择器</title>
	<style >
		/*客户需求 p 和 span 里面都是红色*/
		/*并集选择器，通常用于集体声明，因为选择器里面的样式相同。*/
		p,span{
			color: red;
		}

	</style>
</head>
<body>
	<p >红色</p>
	<p >红色</p>
	<p >红色</p>
	<span>蓝色</span>
	<span>蓝色</span>
	<span>蓝色</span>
	<div >我和你</div>
	<div >我和你</div>
	<h1>blue</h1>
	<h1>blue</h1>
</body>

（5）链接伪类选择器（重点）
类选择器：用点 .demo
伪类选择器：用冒号 :link
作用：用于向某些选择器添加特殊的效果。比如：给链接添加特殊效果、或者可以选择第1个，第n个选择器。

连接名	意思
a:link	未访问的链接
a:visited	已访问的链接
a:hover	鼠标移动到链接上
a:active	选定的链接

尽量按照顺序记忆和书写：love hate
代码：

<head>
	<title>链接伪类</title>
	<style>
		/*未访问的链接*/
		a:link{
			text-decoration: none;
			color:#333;
		}
		/*已访问的链接*/
		a:visited{
			color:orange; 
		}
		/*鼠标经过链接的状态*/
		a:hover{
			color:red;
		}
		/*当我们点击的时候（按下鼠标不松开）*/
		a:active{
			color:green;
		}
	</style>
</head>
<body>
	<a href="http://www.xiaomi.com">小米手机</a>
</body>

我们需要给链接单独指定样式，不然就不会显示：

<html>
<head>
	<title>链接伪类</title>
	<style>
		/*我们在实际工作中都要给链接单独指定样式*/
		.nav a{
			color: red;
		}
	</style>
</head>
<body>
	<div class="nav">
		<a href="#">手机</a>
	</div>
</body>
</html>

一般我们不需要写出来四个，在实际开发中用的最多的写法：

<head>
/*实际工作中会给a单独指定样式*/
 a{
			color: #333;
			text-decoration: none;

		}
		/*鼠标放在nav里面的链接才会变色*/
		.nav a:hover{
			color: orange;
		}
</head>

复合选择器的总结

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择元素后代	选择所有的子孙后代	较多	符号是空格 .nav a
子孙选择器	选择最近一级元素	只选择亲儿子	较少	符号是 > .nav > a
交集选择器	选择两个标签交集的部分	既是又是	较少	没有符号，中间不能隔开 p.one
并集选择器	选择某些相同样式的选择器	可以用于集体声明	较多	符号是逗号 .nav,header
链接伪类选择器	给链接更改状态		较多	重点记住 a{} 和 a:hover实际开发的写法

标签的选择模式（重点）

标签的分类：
（1）块级元素（block-level）
（2）行内元素（inline-level）
（3）行内块元素（inline-block）

（1）块级元素（block-level）

常见的块内元素有：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等等，其中<div>是最常见的块元素。

特点如下：
1.竖着显示，自己独占一行。
2.高度(height)、宽度（width）、外边（border）、以及内边距都可以控制
3.宽度默认是容器（父级宽度）的100%
4.是一个容器及盒子，里面可以放行内或者块级元素。

attation:
1.只有文字才能组成段落，因此 p 里面不能放块元素，特别是 p 不能放 div
2.同理还有 h1~h6、dt，他们都是文字类块级标签，里面不能放其他的块级元素

（2）行内元素（inline-level）

常见的行内元素有：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>其中<span>是最典型的行内元素，或称内联元素。

特点：
1.相邻行内元素在一行上，一行可以显示多个
2.高、宽直接设置是无效的
3.默认宽度就是它本身内容的宽度
4.行内元素只能容纳文本 或者 其他行内元素

attation:
1.链接中不能再放链接
2.特殊情况 a 里面可以放块级元素，但是给 a 转换一下块级模式最安全。

（3）行内块元素（inline-block）

比较常见的标签 <img /> 、<input />、 <td>

特点：
1.和相邻行内元素在一行上，但是之间会有空白缝隙，一行可以显示多个。
2.默认宽度就是它本身的宽度
3.高度、行高、外边距以及内边距都可以控制。

三种模式的区别：

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放置一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含任何标签
行内元素	一行可以放置多个行内元素	不可以直接设置宽度高度	它本身内容的宽度	容纳文本或者其他行内元素
行内块元素	一行放多个行内块元素	可以设置宽度和高度	它本身内容的宽度

标签显示模式相互转换 display

块转行内： display:inline；
行内转块：display:block;
块、行内元素转成行内块：display:inline-block;
代码：

<head>
	<title>行内块元素</title>
	<style >
		img{
			height: 200px;
			width: 200px;
		}
		span{
			/*把行内元素转换成块内元素*/
			display: block;
			width: 100px;
			height: 100px;
			background-color: pink;
		}
		div{
		/*把块内元素转换成行内元素*/
			display: inline;
			width: 100px;
			height: 100px;
			background-color: blue;
		}
		a{
		/*把行内元素转换成行内块元素*/
			display: inline-block;
			text-decoration: none;
			width: 80px;
			height: 100px;
			background-color: purple;

		}
	</style>
</head>
<body>
	<img src="images/3.jpg" alt="空白">
	<img src="images/3.jpg" alt="空白">
	<span>行内</span>
	<div>块</div>
	<a href="#">百度</a>
	<a href="#">新浪</a>

案例：简单导航栏

<!DOCTYPE html>
<html>
<head>
	<title>导航栏案例</title>
	<style >
		a{
			/*将行内元素转换成行内块元素*/
			display: inline-block;
			text-decoration: none;
			/*框的大小*/
			width: 100px;
			height: 30px;
			/*背景颜色*/
			background-color: pink;
			/*文字颜色*/
			color: white;
			font-size: 16px;
			/*文字居中*/
			text-align: center;
		}
		a:hover{
			/*鼠标经过时会变颜色*/
			color: orange;
		}

	</style>
</head>
<body>
	<a href="#">体育</a>
	<a href="#">娱乐</a>
	<a href="#">汽车</a>
</body>
</html>

结果：
在这里插入图片描述
这个图片有一个问题：文字只是水平居中，没有垂直居中，那么如何垂直居中呢？就要借助接下来的行高（line-height）

行高（line-height）

行高（line-height）与高度（height）之间的关系：

行高 = 高度，文字垂直居中
行高 > 高度，文字偏下
行高 < 高度，文字偏上

/*line-height = height 文字垂直居中*/
line-height: 30px;

CSS背景（background）

(1)背景颜色（color）

background-color: red;

如果不写，默认值是transparent（透明的）

(2)背景图片（image）

/*url是必须要写的*/
background-image: url(images/L.jpg);

语法：

background-image:none|url(url)

tips:
url是必须要写的，
url里面的地址不要加引号

参数	作用
none	无背景图片（默认）
url	使用相对地址或者绝对地址

(3)背景平铺（repeat）
语法：
background-repeat:repeat | no-repeat |repeat-x | repeat-y

参数	作用
repeat	背景图像在纵向和横向上平铺的（默认）
no-repeat	背景图像不平铺
repeat-x	背景图像在横向上平铺
repeat-y	背景图像在纵向上平铺

/*背景图片不平铺*/
background-repeat: no-repeat;
/*背景图片横向平铺*/
background-repeat: repeat-x;

(4)背景位置（position）重点

语法：
background-position : length | position

参数	值
length	百分数或者由浮点数字和单位标识符组成的长度值
position	top / center / bottom / left / center / right 方位名词

tips:

 - 必须先指定background-image属性
 - position后面是 X坐标和 Y坐标，可以使用方位名词 或者精确单位

 - 如果只指定了一个数值，那么该数值用于X坐标，另一个默认为Y坐标，默认居中

 - 如果只指定了一个方位名词，另一个值默认居中，为50%
 
 - 如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如 left,top和top,left效果一致。
 
 - 如果指定两个值，精确单位和方位名字混合使用，则第一个值是X坐标，第二个值是Y坐标。

代码：

/*background-position: X坐标 Y坐标*/
/*左下角*/
background-position: left bottom;

/*水平居中 垂直居中*/
background-position: center center;

/*可以指定精确方位，只写一个，这个值是X坐标，另一个是垂直居中的*/
background-position: 30px ;

/*可以混合使用*/
background-position: 30px top;

案例：

<!DOCTYPE html>
<html>
<head>
	<title>Document</title>
	<style>
		.icon{
			width: 150px;
			height: 35px;
			/*背景颜色*/
			background-color: red;
			/*背景图片*/
			background-image: url(images/l.png);
			/*背景不平铺*/
			background-repeat: no-repeat;
			/*图片的位置*/
			background-position: 10px center;
		}
	</style>
</head>
<body>
		<div class="icon">
		</div>
</body>
</html>

(5)背景附着
语法：
background-attachment :scroll | fixed

参数	作用
scroll	背景图像是随对象内容滚动
fixed	背景图像固定

代码：

background-attachment: fixed;

背景简写：
没有固定的写法，下面是最常用的写法；
background: 背景颜色、背景图片地址、背景平铺、背景滚动、背景位置

举例：导航栏的简写

<!DOCTYPE html>
<html>
<head>
	<title>导航栏</title>
	<style >
		.nav a{
			/*将行内元素转换成行内块元素*/
			display: inline-block;
			/*设置盒子的宽、高*/
			width: 200px;
			height: 50px;
			/*背景简写*/
			background: url(images/h.png) no-repeat;
			color: white;
			/*去掉链接下面的下划线*/
			text-decoration: none;
			/*行高=高度，文字垂直居中*/
			line-height: 50px;
		}
		.nav{
			/*div盒子是水平居中的*/
			text-align: center;
		}
		.nav a:hover{
			/*当鼠标经过的时候，背景换一个颜色*/
			background-image: url(images/l.png);
		}
	</style>
</head>
<body>
	<div class="nav">
		<a href="#">网站首页</a>
		<a href="#">网站首页</a>
		<a href="#">网站首页</a>
		<a href="#">网站首页</a>
		<a href="#">网站首页</a>
		<a href="#">网站首页</a>
	</div>
</body>
</html>

（6）背景透明
语法：
background :rgba(0,0,0,0.3)
最后一个参数是 alpha 透明度，取值范围在 0~1之间
习惯上把0.3 中的0省略：background : rgba(0,0,.3)
背景半透明指的是盒子背景半透明，盒子里面的内容不受影响。

背景总结

属性	作用	值
background-color	背景颜色	预定义的颜色 / 十六进制 / rgb代码
background-image	背景图片	url (图片路径)
background-repeat	是否平铺	repeat / no-repeat / repeat-x / repeat-y
background-position	背景位置	length / position 分别是 x 和 y 坐标，切记，如果有精确数值单位的，一定先 x后 y
background-attachment	背景固定还是附着	scroll / fixed
背景简写		背景颜色、背景图片地址、背景平铺、背景滚动、背景位置
背景透明	让盒子半透明	background : rgba(0,0,0,0.3)

CSS的三大特性

（1）CSS层叠性

概念：
层叠性是指多种CSS样式的叠加。
是浏览器解决冲突的一个能力，如果一个属性通过两个相同选择器设置在同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉。
原则：
样式冲突遵循的原则是“就近原则”，哪个样式离着结构近，就执行哪个样式
样式不冲突，就不会层叠

（2）CSS继承性

概念
子标签会继承父标签的某些样式，如文本颜色和字号。
想要设置一个可继承的属性，只需将它应用于父元素即可。即子承父业。
注意：
恰当的使用继承可以简化代码，降低CSS样式的复杂性，比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承。
子元素可以继承父元素的样式（text- , font- ，line-这些元素开头的都可以继承，以及color属性）

（3）CSS优先级（重点）

权重计算公式
概念：
定义CSS样式时，经常出现两个或更多规则应用于同一元素上，此时：
选择器相同时，则执行叠加
选择器不同，就会出现优先级的问题。

<!DOCTYPE html>
<html>
<head>
	<title>继承</title>
	<style >
		.one{
			color: blue;
		}
		div{
			color: red;
		}
		
	</style>
</head>
<body>
	<div class="one">
		权重的大小
	</div>
</body>
</html>

第二种情况：选择器不相同，一个是div标签，一个是.one类，类的优先级较高，所以呈现出的时蓝色

<head>
	<title>继承</title>
	<style >
		
		div{
			color: blue;
		}
		div{
			color: red;
		}
	</style>
</head>
<body>
	<div class="one">
		权重的大小
	</div>
</body>

第一种情况，选择器相同，执行叠加，即按照哪一个离body更近，呈现出来的是哪个效果。最后的结果是红色

1）权重计算公式 CSS Specificity（特殊性）

标签选择器	计算权重公式
继承或者 *	0,0,0,0
每个元素	0,0,0,1
每个类、伪类	0,0,1,0
每个ID	0,1,0,0
每个行内样式 style=" "	1,0,0,0
每个 ! Important 重要的	无穷大

<head>
	<title>继承</title>
	<style >
		
		div{
			color: blue!important;
		}
		div{
			color: red;
		}
		#tow{
			color: yellow;
		}
	</style>
</head>
<body>
	<div class="one" id="tow" style="color:green">	权重的大小</div>
</body>

优先级 ：继承或者* < 标签 < 类 < ID <  style（行内样式表）  <  !important

权重叠加
我们经常用交集选择器、后代选择器等，是由多个基础选择器组合而成的，那么权重的计算方法就是进行叠加：

 div ul li ----> 0,0,0,3
 .nav ul li ---->0,0,1,2
 a:hover ----->0,0,1,1
 .nav a ----->0,0,1,1

继承的权重为0，举例：

<head>
	<title></title>
	<style>
		div{
			color: red;
		}
		/*无论demo没有选择 p 标签， 所以继承的权重为0*/
		.demo {
			color: blue;
		}
		p{
			color: green;
		}
	</style>
</head>
<body>
	<div class="demo">
		<p>继承的权重</p>
	</div>
</body>

上面的代码结果，呈现出来的是绿色。虽然类的权重比标签的权重高，但是继承的权重为0，也就是说，如果子元素自己规定了颜色，那么无论父亲结点给的什么颜色，权重都归0，也就是呈现出来的是子元素的自己的颜色。如果代码中 .demo变成了 .demo p ，那么呈现出来的结果就是 .demo p里面规定的颜色了

权重的叠加 举例：

<head>
	<title>权重叠加</title>
	<style >
		/*权重 0,0,1,0+0,0,0,1 =0,0,1,1*/
		.nav a {
			color: red;
		}
		/*权重 0,0,1,0*/
		.first{
			color: green;
		}
	</style>
</head>
<body>
	<div>人生四大乐事</div>
	<div class="nav">
	<!--因为first的权重 < .nav a 的权重，所以“久旱逢甘霖”呈现出来的颜色还是red-->
		<a href="#" class ="first">久旱逢甘霖</a>
		<a href="#">他乡遇故知</a>
		<a href="#">洞房花烛夜</a>
		<a href="#">金榜题名时</a>
	</div>
</body>

如何让久旱逢甘霖呈现出我想要的绿色来呢？
解决方法如下：
.nav .first{
			color: green;
		}

将 .first 改成 .nav .first 后代选择器的形式，权重也增加了

attation:
（1)数位之间没有进制

（2）继承的权重是 0 ：我们修改样式，一定要看该标签有没有被选中，如果被选中了，那么以上面的公式来计算权重，谁大听谁的；如果没有被选中，那么权重为0，因为继承的权重为0

（3）如果权重相同，则根据层叠性，就近原则

总结
在这里插入图片描述