【HTML基础篇003】前端基础之CSS选择器大全

在下周周ovo

已于 2023-03-09 08:08:23 修改

阅读量621

点赞数 6

分类专栏：从零开始百天学习前端基础文章标签： css 前端 html

于 2023-01-11 23:54:34 首次发布

本文链接：https://blog.csdn.net/weixin_64471900/article/details/128353481

版权

从零开始百天学习前端基础专栏收录该内容

5 篇文章 1 订阅

订阅专栏

本文介绍了CSS的基本概念，包括行内样式、内部样式表、外部样式表和导入样式表的四种引入方式。接着详细讲解了CSS选择器，如元素选择器、ID选择器、类选择器、通用选择器、分组选择器、组合器（后代、子、相邻和弟弟选择器），以及属性选择器。此外，还提到了伪类和伪元素选择器以及CSS选择器的优先级规则。

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

✨一、CSS的基本介绍

CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

✨二、CSS的几种引入方式

🌸2.1、方法一：行内样式

通过直接写在标签里面
<div style="color: pink; margin-top: 10px;border: 1px solid blue">行内样式</div>
🌸2.2、方法二：内部样式表

在head中通过style标签定义
<head>
    <style>
        p{
            color:pink;
            border:blue 1px solid;
        }
    </style>
</head>
🌸2.3、方法三：链入外部样式表

把样式单独写在css文件中，然后在HTML文件中通过link标签导入
<link rel="stylesheet" type="text/css" herf="外部的CSS文件.css">
🌸2.4、方法四：导入外部样式表

通过@import 引入也是最不推荐的一种方法
<style>
    @import"外部的CSS文件.css";
</style>

✨三、CSS选择器

🌸3.1、CSS 元素选择器

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

🌸3.2、CSS id 选择器

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

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

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

实际栗子：

这条 CSS 规则将应用于 id=" num1 " 的 HTML 元素：
#num1{
    color: yellow;
    text-align: center;
}
特别注意：id 名称不能以数字开头。

🌸3.3、CSS 类选择器

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

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

实际栗子：

在此例中，所有带有 class="c1" 的 HTML 元素将为#ff6700的颜色且居中对齐：
.c1 {
    color: #ff6700;
    text-align: center;
}
特别注意：类名同样不能以数字开头

🌸3.4、CSS 通用选择器

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

实际栗子：

下面的 CSS 规则会影响页面上的每个 HTML 元素：
* {
  text-align: center;
  color: blue;
}

🌸3.5、CSS 分组选择器

当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。

来看下面这段CSS代码
h1 {
  text-align: center;
  color: red;
}
p {
  text-align: center;
  color: red;
}
我们不难发现p标签与h1标签的样式是相同的，根据简化原则我们最好对选择器进行分组，以最大程度地缩减代码。如需对选择器进行分组，请用逗号来分隔每个选择器。

我们可以将上面代码简化成下面这种形式：
h1, p {
  text-align: center;
  color: red;
}

🌸3.6、CSS 组合器

🎉3.6.1、后代选择器

后代选择器匹配属于指定元素后代的所有元素。要特别注意与分组选择器的区别

下面的例子选择 <div> 元素内的所有 <p> 元素，并且设置元素颜色为burlywood：
div p {
    color: burlywood;
}

🎉3.6.2、子选择器

子选择器匹配属于指定元素子元素的所有元素（只会选择儿子）。

下面的例子选择属于 <div id="num2"> 元素子元素的所有 <p> 元素：
#num2>p {
    color: yellow;
}

🎉3.6.3、毗邻选择器

相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。

兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”（在它上面紧挨着也不算）。

下面的例子选择紧挨着 <div> 元素之后的所有 <p> 元素变为aqua颜色：
div+p {
    color: aqua;
}

🎉3.6.4、弟弟选择器

匹配指定元素的同级元素的所有元素。

下面的例子选择属于 <div> 元素的同级元素的所有 <p> 元素：
div~p {
    color: #0a3651;
}

🎉3.6.5、总结

选择器示例描述
element element div p 选择 div 元素内部的所有 p 元素
element>element div>p 选择父元素为 div 元素的所有 p 元素
element+element div+p 选择紧接在 div 元素之后的 p 元素
element~element2 p~ul 选择 p 元素同级并在 p 元素后面的所有 ul 元素

选择器	示例	描述
element element	div p	选择 div 元素内部的所有 p 元素
element>element	div>p	选择父元素为 div 元素的所有 p 元素
element+element	div+p	选择紧接在 div 元素之后的 p 元素
element~element2	p~ul	选择 p 元素同级并在 p 元素后面的所有 ul 元素

🌸3.7、CSS 属性选择器

根据属性来为元素设置样式也是常用的场景。

相关的例子如下：

选择器示例描述
[attribute] [target] 带有 target 属性所有元素
[attribute=value] [target=_blank] targe 属性等于"_blank" 的所有元素
[attribute~=value] [title~=houdunren] title 属性包含单词 "houdunren" 的所有元素
[attribute|=value] [title|=hd] title 属性值为 "hd"的单词，或hd-cms 以-连接的的独立单词
[attribute*=value] a[src*="hdcms"] src 属性中包含 "hdcms" 字符的每个 a 元素
[attribute^=value] a[src^="https"] src 属性值以 "https" 开头的每个 a 元素
[attribute$=value] a[src$=".jpeg"] src 属性以 ".jpeg" 结尾的所有 a 元素

选择器	示例	描述
[attribute]	[target]	带有 target 属性所有元素
[attribute=value]	[target=_blank]	targe 属性等于"_blank" 的所有元素
[attribute~=value]	[title~=houdunren]	title 属性包含单词 "houdunren" 的所有元素
[attribute\|=value]	[title\|=hd]	title 属性值为 "hd"的单词，或hd-cms 以-连接的的独立单词
[attribute*=value]	a[src*="hdcms"]	src 属性中包含 "hdcms" 字符的每个 a 元素
[attribute^=value]	a[src^="https"]	src 属性值以 "https" 开头的每个 a 元素
[attribute$=value]	a[src$=".jpeg"]	src 属性以 ".jpeg" 结尾的所有 a 元素

🌸3.8、分组和嵌套

🎉3.8.1、分组

当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。

比如我们要为div标签和p标签统一设置字体为红色：
div, p {
  color: red;
}
但是通常，我们会分两行来写，更清晰:
div,
p {
  color: red;
}

🎉3.8.2、嵌套

多种选择器可以混合起来使用，比如：.clas类内部所有p标签设置字体颜色为红色。

可以用以下方式来表示：
.clas p {
  color: red;
}

🌸3.9、伪类选择器

为元素的不同状态或不确定存在的元素设置样式规则。

状态示例说明
:link a:link 选择所有未被访问的链接
:visited a:visited 选择所有已被访问的链接
:hover a:hover 鼠标移动到元素上时
:active a:active 点击正在发生时
:focus input::focus 选择获得焦点的 input 元素
:root :root 选择文档的根元素即 html。
:empty p:empty 选择没有子元素的每个 p 元素（包括文本节点）。
:first-child p:first-child 选择属于父元素的第一个子元素的每个 p 元素
:last-child p:last-child 选择属于其父元素最后一个子元素每个 p 元素。
:first-of-type p:first-of-type 选择属于其父元素的首个 p 元素的每个 p 元素
:last-of-type p:last-of-type 选择属于其父元素的最后 p 元素的每个 p 元素。
:only-of-type p:only-of-type 选择属于其父元素唯一的 p 元素的每个 p 元素。
:only-child p:only-child 选择属于其父元素的唯一子元素的每个 p 元素。
:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个 p 元素。
:nth-child(odd) p:nth-child(odd) 选择属于其父元素的奇数 p 元素。
:nth-child(even) p:nth-child(even) 选择属于其父元素的偶数 p 元素。
:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个 p 元素的每个 p 元素。
:nth-last-child(n) p:nth-last-child(2) 同上，从最后一个子元素开始计数。
:nth-last-of-type(n) p:nth-last-of-type(2) 同上，但是从最后一个子元素开始计数。
:not(selector) :not(p) 选择非 p 元素的每个元素

状态	示例	说明
:link	a:link	选择所有未被访问的链接
:visited	a:visited	选择所有已被访问的链接
:hover	a:hover	鼠标移动到元素上时
:active	a:active	点击正在发生时
:focus	input::focus	选择获得焦点的 input 元素
:root	:root	选择文档的根元素即 html。
:empty	p:empty	选择没有子元素的每个 p 元素（包括文本节点）。
:first-child	p:first-child	选择属于父元素的第一个子元素的每个 p 元素
:last-child	p:last-child	选择属于其父元素最后一个子元素每个 p 元素。
:first-of-type	p:first-of-type	选择属于其父元素的首个 p 元素的每个 p 元素
:last-of-type	p:last-of-type	选择属于其父元素的最后 p 元素的每个 p 元素。
:only-of-type	p:only-of-type	选择属于其父元素唯一的 p 元素的每个 p 元素。
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个 p 元素。
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个 p 元素。
:nth-child(odd)	p:nth-child(odd)	选择属于其父元素的奇数 p 元素。
:nth-child(even)	p:nth-child(even)	选择属于其父元素的偶数 p 元素。
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个 p 元素的每个 p 元素。
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数。
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数。
:not(selector)	:not(p)	选择非 p 元素的每个元素

🌸4.0、伪元素选择器

常见的伪元素选择器：

::first-letter 选择元素文本的第一个字母。
::first-line 选择元素文本的第一行。
::before 在元素内容的最前面添加新内容。（常用）
::after 在元素内容的最后面添加新内容。（常用）
::selection匹配用户被用户选中或者处于高亮状态的部分
::placeholder匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效
::before 在元素内容的最前面添加新内容

✨四、CSS选择器的优先级

元素会被多个样式一层层作用，这就是层叠样式表的来源。如果多个样式做用在元素上就会产生优先级权重问题。

使用类、ID、伪类都有不同的权重，具体应用哪条规则要看权限大小。

相同权重的规则应用最后出现的
可以使用 !important 强制提升某个规则的权限，但并不推荐使用。因为如果过多的使用!important会使样式文件混乱不易维护。万不得已可以使用!important

权重应用

规则粒度
ID 0100
class，类属性值 0010
标签,伪元素 0001
* 0000
行内样式 1000

通配符的权限为 0，而继承的规则没有权重