CSS选择器及创建

最新推荐文章于 2023-03-31 10:33:45 发布

努力的小灰灰

最新推荐文章于 2023-03-31 10:33:45 发布

阅读量391

点赞数

文章标签： css 学习前端

本文链接：https://blog.csdn.net/m0_49034593/article/details/126285082

版权

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

一 CSS语法

选择器 {属性1：值1；属性2：值2；...}（键值对形式）

我们可以将 CSS 选择器分为五类：

简单选择器（根据名称、id、类来选取元素）
组合器选择器（根据它们之间的特定关系来选取元素）
伪类选择器（根据特定状态选取元素）
伪元素选择器（选取元素的一部分并设置其样式）
属性选择器（根据属性或属性值来选取元素）

CSS 元素选择器

元素选择器根据元素名称来选择 HTML 元素。

p {
  text-align: center;
  color: red;
}
在这里，页面上的所有 <p> 元素都将居中对齐，并带有红色文本颜色

CSS id 选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素。

元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！

要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。

#para1 {
  text-align: center;
  color: red;
}
这条 CSS 规则将应用于 id="para1" 的 HTML 元素

CSS 类选择器

类选择器选择有特定 class 属性的 HTML 元素。

如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

还可以指定只有特定的 HTML 元素会受类的影响。

.center {
  text-align: center;
  color: red;
}
所有带有 class="center" 的 HTML 元素将为红色且居中对齐

p.center {
  text-align: center;
  color: red;
}
只有具有 class="center" 的 <p> 元素会居中对齐

CSS 通用选择器

通用选择器（*）选择页面上的所有的 HTML 元素。

* {
  text-align: center;
  color: blue;
}
影响页面上的每个 HTML 元素

CSS 分组选择器

分组选择器选取所有具有相同样式定义的 HTML 元素。

h1, h2, p {
  text-align: center;
  color: red;
}
将h1，h2，p选择器进行分组

选择器	例子	例子描述
.class	.intro	选取所有 class="intro" 的元素。
#id	#firstname	选取 id="firstname" 的那个元素。
*	*	选取所有元素。
element	p	选取所有 <p> 元素。
element,element,..	div, p	选取所有 <div> 元素和所有 <p> 元素。

二 CSS创建

插入样式表的方法有三种：外部样式表(External style sheet)，内部样式表(Internal style sheet)，内联样式(Inline style)

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表。

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

使用内联样式，你需要在相关的标签内使用样式（style）属性。

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

层叠顺序

页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表，其中第一优先级最高：

行内样式（在 HTML 元素中）
外部和内部样式表（在 head 部分）
浏览器默认样式

因此，行内样式具有最高优先级，并且将覆盖外部和内部样式以及浏览器默认样式。

参考：如何添加 CSS (w3school.com.cn)