CSS层叠样式表_css 样式层级-CSDN博客

本文链接：https://blog.csdn.net/DiverseWWL/article/details/120749549

本文详细介绍了CSS层叠样式表的基本概念、引入方式及其优先级，强调了表现与内容分离的重要性。此外，文章还深入讲解了各种选择器的用法，包括基本选择器、层级选择器、属性选择器以及伪类选择器，强调了选择器在页面元素选取中的灵活性和重要性。同时，探讨了如何根据场景选择合适的样式引入方式，以及如何优化样式代码以提高可维护性。

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

CSS层叠样式表

一、CSS是什么？
二、CSS选择器
选择优先级
总结

一、CSS是什么？

css层叠样式表（Cascading Style Sheets）
层叠样式表其实就是对静态页面进行装饰，但是，特别要注意的点是：通常建议表现形式与页面内容分离。

css引入方式

行内样式（将样式直接写在标签上），需要使用style属性该,方式可用于提高样式的优先级，多次使用会导致代码臃肿，不利于后期维护。
内联样式，将页面内容与表现形式进行分离，方便对样式进行统一管理。
外联样式，对内联样式进行进一步的抽离，方便多个页面共用同一个样式，创建一个css文件，需要该样式的HTML直接引用样式即可。

样式优先级
就近原则：行内样式 > 内联样式 > 外联样式
注意事项：今后尽量不要对同个html进行多个样式书写

如何选择三种样式写法？
1、如果样式是固定并且不修改并且很少情况，行内样式
2、如果样式针对当前html页面做的样式，并且量比较大的情况下，内联样式
3、如果你的样式是通用，如果你的css代码很多，外联样式，需要创建一个css文件，引入即可。

二、CSS选择器

选择器可以快速、方便的选择所需要使用的页面元素

基本选择器

基础选择器分为三种：标签选择器、类选择器、id选择器。

标签选择器

标签选择器主要是根据标签的名字进行元素的选择,会选中当前页面所有该标签。

语法：标签名{}

例如：div{color:red;font-size:20px;}

代码如下（示例）：

<style>
div{
	color: #00BFFF;
}
p{
	color: #483D8B;
}
h4{
	color: #1E90FF;
}
</style>

<body>
<div class="div-cls">地球生命共同体，何以成为联合国讲坛“主题词”</div>
<div class="p-cls" id="p-id">开启人类高质量发展新征程 生态海南 多姿多彩</div>
<div class="div-cls">壮美边疆 神奇兵团 世界因此美丽</div>
<p class="p-cls">抗疫头条：郑州二七万达参与检测的都是阴性，无大碍</p>
<h4 class="h4-cls">学习头条：谢小飞分享进步了，再接再厉</h4>
</body>

类选择器

类选择器是通过class属性进行元素的获取，可用于对多个元素进行相同的样式设置。

语法：.类名{}

例如：.div-cls{color:red;}
代码如下（示例）：

<style>
.div-cls{
	color: red;
}
.p-cls{
	color: green;
}
.h4-cls{
	color: blue;
}
</style>

<body>
<div class="div-cls">地球生命共同体，何以成为联合国讲坛“主题词”</div>
<div class="p-cls" id="p-id">开启人类高质量发展新征程 生态海南 多姿多彩</div>
<div class="div-cls">壮美边疆 神奇兵团 世界因此美丽</div>
<p class="p-cls">抗疫头条：郑州二七万达参与检测的都是阴性，无大碍</p>
<h4 class="h4-cls">学习头条：谢小飞分享进步了，再接再厉</h4>
</body>

id选择器

id选择器是通过id属性给元素一个唯一标识（设置多个id相同不会报错，会影响后期js的学习，建议id值要唯一）

语法：#id名{}

例如：#div-id{color:red;}
代码如下（示例）：

<style>
#p-id{
	color: #483D8B;
}
</style>

<body>
<div class="div-cls">地球生命共同体，何以成为联合国讲坛“主题词”</div>
<div class="p-cls" id="p-id">开启人类高质量发展新征程 生态海南 多姿多彩</div>
<div class="div-cls">壮美边疆 神奇兵团 世界因此美丽</div>
<p class="p-cls">抗疫头条：郑州二七万达参与检测的都是阴性，无大碍</p>
<h4 class="h4-cls">学习头条：谢小飞分享进步了，再接再厉</h4>
</body>

属性选择器

属性选择器是根据元素上已有的属性标识进行选择

语法：[属性名=’’]{}

属性值以XXX开头

语法[属性名 ^=“XXX”]{}

属性值以XXX结尾

语法[属性名 $=“XXX”]{}

属性值包含XXX

语法[属性名 *=“XXX”]{}

<style>
/*具有title属性的元素*/
[title]{
  font-size: 18px;
}
/* 以...开始 */
[href^="http"]{
  color: #008B8B;
}
/* 以...结束 */
[href$="cn"]{
  color: #483D8B;
}
/*href中包含有i*/
[href*='i']{
  color: #808080;
}
</style>
<body>
<button title="普通按钮">普通按钮</button>
<a href="http://www.baidu.com">百度链接</a>
<a href="www.sina.cn">新浪博客</a>
<a href="http://www.yunhe.cn">腾讯新闻</a>
</body>

层级选择器

后代选择器

选择作为某元素后代的元素

语法：标签1 标签2 {}

子元素选择器

选却带有特定父元素的元素

语法：标签1>标签2 {}

兄弟选择器

两种元素必须拥有相同的父元素，但两个不必直接紧随

语法：标签1~标签2 {}

相邻兄弟选择器

选取第一个元素之后紧跟的元素

语法：标签1+标签2 {}

		<style>
			
			/* 层级选择器 */
			
			/* 后代选择器 */
			div span{
				color: #008000;
			}
			/* 子元素选择器 */
			div > span{
				color: red;
			}
			/* 兄弟选择器 */
			div ~ p{
				background-color: #FFC0CB;
			}
			/* 相邻兄弟选择器 */
			p + span {
				background-color: #008000;
			}
		</style>
	</head>
	<body>
		
		<!-- 在包裹关系中，样式有继承关系 -->
		<div>
		    div中的不带标签的内容
			<p>
				<a href="">百度一下
					<span>你就知道  </span>
				 </a>
			</p>
			<a href="">百度一下</a>
		    <span>后代选择器，注意很常用</span>
		</div>
		<!-- 所有的选择器默认是从body标签中进行查找元素的 -->
		<p>
		    <span>p标签中的span标签</span>
		</p>
		
	</body>

组合选择器

组合选择器是根据元素在页面中的同级关系进行选择，用于同时选取多个元素，为不同的元素设置相同的样式，用逗号分割每个元素。

<style>
/* 逗号就代表前后的元素是同等级的 */
div span,p span{
    color: #00BFFF;
}
</sytle>
<body>
<div>
    div中的不带标签的内容
    <span>组合选择器，注意很常用</span>
</div>
<p>
    <span>p标签中的span标签</span>
</p>

<h4>
    <span>h4标签中的span标签</span>
</h4>
</body>

伪类选择器、通配符

伪类选择器	描述
:only-of-type	选择每个p元素是其父级的唯一p元素
:only-child	选择每个p元素是其父级的唯一子元素
:nth-child(n)	选择每个p元素是其父级的第n个子元素
:nth-last-child(n)	选择每个p元素的是其父级的第n个子元素，从最后一个子项计数
:nth-of-type(n)	选择每个p元素是其父级的第n个p元素
:nth-last-of-type(n)	选择每个p元素的是其父级的第n个p元素，从最后一个子项计数