CSS 复合选择器 CSS特性背景属性显示模式

wwangxu

于 2024-03-24 20:11:13 发布

阅读量978

点赞数 33

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_67140973/article/details/136909860

版权

1. 复合选择器

定义：由两个或多个基础选择器，通过不同的方式组合而成的，可以更准确、更高效的选择目标元素。

1.1 后代选择器

后代选择器：选中某元素的后代元素。

写法：父选择器子选择器{ CSS属性 }

<style>
/* 后代选择器 */
/*  父级 后代  */
	div span {
		color: red;
	}
</style>

<span> 这是span标签，不是 div 后代，不会受限制 </span>
<div>
	<span>这是 div 的儿子 span，会被选择器选中</span>
	<p>
		<span>这是 div 的孙子 span，会被选择器选中</span>
	</p>
</div>

1.2 子代选择器

子代选择器：选中某元素的子代元素（最近的子级）。

写法：父选择器 > 子选择器{ CSS属性 }

<style>
/* 子代选择器 */
	div > span {
		color: red;
	}
</style>

<span> 这是 span 标签，不受选择器选择 </span>
<div>
	<span> 这是 div 的儿子，会被选择器选择 </span>
	<p>
		<span> 这是 div 的孙子，不会被选择器选择 </span>
	</p>
</div>

1.3 并集选择器

并集选择器：选中多组标签设置相同的样式。

写法：选择器1, 选择器2, … , 选择器N { CSS属性 }

<style>
/* 并集选择器 */
	div,
	p,
	span {
		color: red;
	}
</style>

<div>这是 div 标签，会被选择</div>
<p>这是 p 标签，会被选择</p>
<span>这是 span 标签，会被选择</span>

1.4 交集选择器

交集选择器：选中同时满足多个条件的元素。

写法：选择器1选择器2{ CSS属性 }

<style>/
/* 选中满足即是 p 标签，又是 box 类的元素*/
	p.box {
		color: red;
	}
</style>

<p class=“box”>p 标签，并且使用了类选择器 box，会被选择</p>
<p>p 标签，不会被选择</p>
<div class=“box”>div 标签，并且使用了类选择器 box，不会被选择</div>

注意：如果交集选择器中有标签选择器，标签选择器必须书写在最前面。

1.5 伪类选择器

伪类选择器：伪类表示元素状态，选中元素的某个状态设置样式。

写法：选择器:状态 { CSS属性 }

例如：

<style>
/* 鼠标悬停状态（hover） */
	a:hover {
		color: red;
	}
	.box:hover {
		color: green;
	}
</style>

<a href=“#”>a 标签，超链接</a>
<div class=“box”>div 标签，box 类</div>

超链接共有四种状态：

访问前
访问后
鼠标悬停
点击时

选择器	作用
:link	访问前
:visited	访问后
:hover	鼠标悬停
:active	点击时

注意：如果要给超链接设置以上四个状态，需要按照访问前、访问后、鼠标悬停、点击时的顺序书写。

2. CSS 特性

CSS特性：

继承性
层叠行
优先级

2.1 继承性

继承性：子级默认继承父级的文字控制属性。若子级自身也有属性，则子级属性优先。

<style>
	body {
		font-size: 30px;
	}
</style>
<body>
	<div>div 标签，文字大小为30px</div>
	<p>p 标签，文字大小为30px</p>
	<h1>h1 标签，文字大小为 h1 标签大小</h1>
</body>

2.2 层叠性

特点：

相同的属性会覆盖：后面的属性覆盖前面的属性
不同的属性会叠加：不同的属性都会生效

<style>
	div {
		color: red;
		font-weight: 700;
	}
	div {
	/* 相同的颜色属性会覆盖 */
		color: green;
	/* 不同的属性叠加 */
		font-size: 30px;
	}
</style>

<div>div 标签，颜色为绿色，宽度为700，字体大小为30px</div>

2.3 优先级

优先级：也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。

规则：选择器优先级高的样式生效

2.3.1 基础选择器优先级

优先级顺序：通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
选中标签的范围越大，优先级越低；!important可使某一选择器的优先级提到最高，在分号“;”前添加

<style>
	/* 通配符选择器 */
	* {
		color: red;
	}
	/* 标签选择器 */
	div {
		color: green;
	}
	/* 类选择器 */
	.box {
		color: blue;
	}
	/* !important 将优先级提到最高 */
	.imp {
		color: red !important;
	}
	/* id选择器 */
	#text{
		color:orange;
	}
</style>

<p>p 标签，显示红色</p>
<div>div 标签，显示绿色</div>
<div class=“box”>div 标签，显示蓝色</div>
<div class=“box” id=“text”>div 标签，显示橙色</div>
<div class=“box” id=“text” style=“color: purple”>div 标签，显示紫色</div>
<div class=“imp” style=“color: purple”>div 标签，显示红色</div>

2.3.2 复合选择器优先级

当一个标签被多个复合选择器选中时，它们的优先级顺序符合叠加计算规则

叠加计算规则：

优先级顺序：标签选择器 < 类选择器 < id 选择器 < 行内样式 < !important
按照优先级由大到小的顺序，一次比较选择器个数，同一级个数多的优先级高，若个数相同，则向后比较
!important 权重最高
继承权重最低

例如：
在这里插入图片描述

3. 背景属性

属性	描述
background-color	背景色
background-image	背景图
background-repeat	背景图平铺方式
background-position	背景图位置
background-size	背景图缩放
background-attachment	背景图固定
background	背景复合属性¹

<style>
	/* 背景图 */
	background-image: url(图片路径)

	/* 背景图平铺方式：不平铺，图片在背景左上角 */
	background-repeat: no-repeat;
	/* 背景图平铺方式：平铺（默认方式） */
	background-repeat: repeat;
	/* 背景图平铺方式：水平方向平铺 */
	background-repeat: repeat-x;
	/* 背景图平铺方式：垂直方向平铺 */
	background-repeat: repeat-y;

	/*
	背景图位置关键词表示
	上-top；下-bottom；
	左-left；右-right；居中-center
	只规定一个时，另一个默认为居中
	*/
	background-position: center bottom;
	background-position: top right;
	/*
	背景图位置坐标表示
	水平：正数向右，负数向左
	垂直：正数向下，负数向上
	只规定一个时，其表示水平，垂直方向默认居中
	*/
	background-position: 50px 30px;

	/*
	背景图缩放关键字写法：
	cover-等比缩放并覆盖背景区，图片可能不完整
	contain-等比缩放并完全放入背景区，背景区可能留白
	*/
	background-size: cover;
	background-size: contain;
	/* 背景图缩放百分比写法：根据盒子尺寸计算图片大小 */
	background-size: 30%;
	/* 背景图缩放数字写法 */
	background-size: 400px;

	/* 背景图固定 */
	background-attachment: fixed;

	/* 背景复合属性 */
	background: pink url(...) no-repeat;
	
</style>