CSS基础之三大特性

最新推荐文章于 2023-01-08 21:13:45 发布

拄着拐儿唱儿歌

最新推荐文章于 2023-01-08 21:13:45 发布

阅读量87

点赞数

分类专栏： # HTML+CSS 文章标签：前端 css css3 html

本文链接：https://blog.csdn.net/qq_43615148/article/details/123991127

版权

HTML+CSS 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

本文详细介绍了CSS的三大特性：继承性、层叠性和优先级。继承性使得子元素可以继承父元素的一些样式，如颜色和字体；层叠性则是在同一标签上有多个样式时，它们会叠加或覆盖，优先级决定了哪个样式生效。文章通过实例演示了这些概念，并强调了在实际开发中避免复杂的选择器冲突的重要性。

摘要由CSDN通过智能技术生成

CSS特性介绍：

一、CSS继承性：

特点：子元素将父元素的默认样式继承下来。

主要继承的属性大多为文字控制类属性，其他属性可以跑一下试试看是否继承了父类的样式。

常见应用场景：

1、可以直接给ul设置list-style:none属性，去除列表默认样式小圆点
2、直接给body标签统一设置字体类属性

举个栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="GB 2312">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            color: red;
            font-size: 32px;
            font-style: italic;
        }
    </style>
</head>
<body>
    <div class="father">
        <div>我是儿子</div>
    </div>
</body>
</html>

运行效果：
在这里插入图片描述

注意：

如果一些标签自带某些样式时，就不会使用继承下来的属性。
举个栗子：
a标签不会继承颜色
h系列标签不会继承文字大小

二、CSS层叠性

特点：

1、给同一个标签设置不同的样式时，这些样式会进行叠加，共同作用在标签上
2、给同一个标签设置相同的样式时，这些样式会进行覆盖，首先通过优先级，再通过先后顺序进行覆盖。

举个栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="GB 2312">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            color: red;
            font-size: 32px;
            font-style: italic;
        }
        .son{
            font-size: 10px;
            color: green;
        }
        div{
            font-style: normal;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">我是儿子</div>
    </div>
</body>
</html>

运行效果：
在这里插入图片描述

这里儿子把父亲继承下来的文字大小和颜色全部修改成自己喜欢的颜色了，但是又有一个div标签属性将继承下来的斜体改成了正常样式，最终共同作用下，形成了上图效果。

三、CSS优先级

特点：不同选择器有不同的优先级，优先级高的会覆盖优先级低的选择器样式

公式：

继承<通配符<标签<类<id<行内<!important

优先级叠加公式：

在这里插入图片描述

使用步骤：

1、先判断选择器是否能直接选中标签，如果不能选中则是继承，继承优先级最低。
2、能选中，使用计算公式，判断优先级哪个高。
3、如果优先级一样高，谁写在后面谁就是最后的样式。

举几个栗子：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>第1题：普通题</title>
	<style>
		/* (行内, id, 类, 标签) */
		/* !important 最高 */
		/* 继承: 最低 */

		/* (0, 2, 0, 0) */
		#father #son {
			color:blue; 
		} 
		
		/* (0, 1, 1, 1) */
		#father p.c2 {
			color:black;
		} 
		
		/* (0, 0, 2, 2) */
		div.c1 p.c2 {
			color:red;
		} 

		/* 继承, 最低 */
		#father { 
			color:green !important;
		} 

		/* 继承, 最低 */
		div#father.c1 {
			color: yellow ;
		} 

	</style>
</head>
<body>
	<div id="father" class="c1">
		<p id="son" class="c2">
			这行文本是什么颜色的？ 
		</p>
	</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>第2题: 标签选择器选择一类</title>
	<style>
		/* (行内, id, 类, 标签) */
		/* !important 最高 */
		/* 继承: 最低 */
	
		/* 2 */
	  div div {
			color: skyblue;
		} 

		/* 1 */
		div {
			color: red;
		}
	</style>
</head>
<body>
	<div>
		<div>
			<div>
				这行文本是什么颜色？
			</div>
		</div>
	</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>第3题: 权重叠加每位不存在进制</title>
	<style>
		/* (行内, id, 类, 标签) */
		div div div div div div div div div div div div {  
			color: red;
		}
		
		.one { 
			color: pink;
		}
	</style>
</head>
<body>
	<div>
		<div>
			<div>
				<div>
					<div>
						<div>
							<div>
								<div>
									<div>
										<div>
											<div>
												<div class="one">这行文字是什么颜色的？</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>第4题：权重相同此时比较层叠性</title>
	<style>
		/* (0, 0, 2, 1) */
		.c1 .c2 div { 
			color: blue;
		}
		
		/* (0, 1, 0, 1) */
		div #box3 {
			color:green;
		}
		
		/* (0, 1, 0, 1) */
		#box1 div {
			color:yellow;
		}
	</style>
</head>
<body>
	<div id="box1" class="c1">
		<div id="box2" class="c2">
			<div id="box3" class="c3">
				这行文本是什么颜色的？
			</div>
		</div>
	</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>第5题: 全是继承的特殊情况</title>
	<style>
		/* 都是继承, 继承里面谁高, 看继承哪个父级, 哪个父级高, 哪个选择器生效 */

		/* 继承 */
		div p {
			color:red;
		} 

		/* 继承 */
		.father {
			color:blue;
		} 
	</style>
</head>
<body>
	<div class="father">
		<p class="son"> 
			<span>文字</span>
		</p>
	</div>
</body>
</html>