【html5+css】css引入方式 选择器 以及他们的优先级
warning:
这篇文章距离上次修改已过445天，其中的内容可能已经有所变动。
CSS的引入方式主要有以下几种：
- 内联样式：直接在HTML标签中使用
style属性来设置样式。
<p style="color: red;">这是红色文字</p>- 内部样式表：在HTML文档的
<head>部分，使用<style>标签来包含CSS代码。
<head>
<style>
p { color: blue; }
</style>
</head>- 外部样式表：创建一个CSS文件（比如
styles.css），然后在HTML文档的<head>部分，使用<link>标签来引入这个CSS文件。
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>在CSS中，选择器用于选择需要应用样式的元素。主要的选择器类型包括：
- 元素选择器：直接使用HTML标签作为选择器。
p { color: green; }- 类选择器：通过
.前缀定义，可以被多个元素引用。
.highlight { background-color: yellow; }- ID选择器：通过
#前缀定义，在文档中应该是唯一的。
#first-paragraph { font-size: 20px; }- 属性选择器：可以根据元素的属性或属性值来选择元素。
input[type="text"] { background-color: lightblue; }- 伪类选择器：用于定位元素的不同状态，比如:hover, :active等。
a:hover { text-decoration: underline; }- 伪元素选择器：用于向元素的某些部分添加样式，比如::before和::after。
p::before { content: "前缀"; }在CSS中，样式的优先级遵循以下规则：
- 内联样式（在HTML标签中使用
style属性）> 内部样式表和外部样式表。 - ID选择器 > 类选择器 > 元素选择器。
- 行内样式（内联样式）> 内部样式表 > 外部样式表。
- 继承的样式优先级较低。
- 同一选择器中，标有
!important的规则优先级最高。 - 如果选择器相同，那么最后声明的样式会被应用。
注意：!important应该谨慎使用，因为它可能会破坏CSS的可维护性。
评论已关闭