CSS的样式、基本选择器及其优先级

最新推荐文章于 2025-08-29 06:30:00 发布

原创最新推荐文章于 2025-08-29 06:30:00 发布 · 379 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端技术

CSS的样式、基本选择器及其优先级

CSS的使用：CSS与html的结合使用
CSS基本选择器
优先级
- 选择器的优先级
- 样式表的优先级

CSS的使用：CSS与html的结合使用

根据定义CSS的位置不同，分为行内样式、内部样式和外部样式

行内样式

也称为内联样式
直接在标签中编写样式，通过使用标签内部的style属性；

一般在测试的时候使用居多：
语法：
<html标签 style="样式1：值1;样式2：值2;....样式N：值N;">hello my css</html标签>
案例：
<div style="color: red;">hello my css</div>

弊端：只能对当前的标签生效，没有做到内容和样式相分离，耦合度太高。

内部样式

定义在head标签内，通过style标签，该标签内容就是CSS代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>内部样式</title>
        <style>
            div{
                color: red;
            }
        </style>
    </head>
    <body>
        <div>hello my css</div>
    </body>
</html>

外部样式

1、提前定义css资源文件
2、在head标签内，定义link标签引入外部样式文件。

try.css文件定义在与html页面同级的css文件夹中：

div {
color: red;
}

html文件中引入

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>外部样式</title>
        <link rel="stylesheet" href="css/lina.css" />
    </head>
    <body>
        <div>hello my css</div>
    </body>
</html>

作用域的范围:外部样式表>内部样式表>行内样式表

优先级：外部样式表<内部样式表<行内样式表;

同样的样式作用在同一个标签身上：就近原则；不同样式作用在同一个标签身上:叠加生效。

CSS基本选择器

筛选具有相似特征的元素

id选择器（较少用）

选择具有相同id属性值的元素，建议html页面中的id值唯一

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

PS： ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

虽然多个元素可以使用同一个id选择器控制样式，但是不推荐。如果需要同样的样式对多个标签生效，使用class选择器。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!-- id选择器 -->
		<style>
			#myDiv{
				color: aqua;
			}
		</style>
	</head>
	<body>
		<div id="myDiv">文字1</div>
		<div id="myDiv">文字2</div>
	</body>
</html>

class选择器(常用）

选择具有相同的class属性值的元素

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!-- class选择器 -->
		<style>
			.myClass{
				color: #800080;
			}
		</style>
	</head>
	<body>
		<div class="myClass">文字1</div>
		<div class="myClass">文字2</div>
	</body>
</html>

元素选择器/标签选择器（较少用）

选择具有相同标签名称的元素。

定义选择器语法：标签名称{}；PS：标签名称必须是html提供好的标签。

使用标签选择器：自动使用在所有的同名的标签上

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!-- 标签选择器 -->
		<style>
			p{
				color: chartreuse;
			}
		</style>
	</head>
	<body>
		<p>文字1</p>
		<p>文字2</p>
	</body>
</html>