聊聊日常使用的CSS选择器

2024-03-15 127 阅读9分钟

Web标准的核心理念是结构标准、样式标准和行为标准相分离，其中HTML负责结构，CSS负责样式，JavaScript负责行为。

1、简介

CSS全称是层叠样式表（Cascading Style Sheets ），简单的说就是给HTML结构设置样式，例如“文字大小、颜色、元素宽高”等来美化HTML，让HTML变得更漂亮的。

2、CSS样式介绍

2.1 CSS样式分类

2.1 行内样式（内嵌样式、内联样式）

写在标签的style属性中，只能控制当前标签的样式，对其他标签无效

2.2 内部样式

需要写在页面内部，将所有css代码放在页面的标签中，强烈建议加上scoped属性，使当前样式的作用域为局部，只影响当前页面，如上图
scoped属性只能在Vue的单文件组件标签上使用，并会自动添加一个带有唯一ID的类名到每个元素上，从而确保样式不会影响到其他组件，如上图

2.3 外部样式

写在单独的 .css 文件中，在页面中使用<link>标签引入使用
<link> 标签属性说明： href ：引入的文档来自于哪里； rel ：( relation ：关系）说明引入的文档与当前文档之间的关系， rel="stylesheet" 指示被链接的文档是一个样式表，该样式表应该被应用于当前HTML文档，这样，浏览器就会知道它需要加载这个外部CSS文件，并将其中定义的样式应用到当前的HTML内容上。

**补充1：**我们的代码里，一般有两种引入css文件的方式：

方式1：使用src

方式2：使用@import

问题1：目前上面两种写法的作用域都是全局，如果上面两种方式<style>标签中都加上作用域scoped会是什么效果呢，是否作用域都变成局部了？

2.4 总结

优先级规则：行内样式 > 内部样式 = 外部样式

1. 内部样式、外部样式，这二者的优先级相同，且：后面的会覆盖前面的；

2. 同一个样式表中，优先级也和编写顺序有关，且：后面的会覆盖前面的；

类别	优点	缺点	作用范围
行内样式	优先级最高	1. 结构与样式未分离 2. 代码结构混乱 3. 样式不能复用	当前标签
内部样式	1. 样式可复用 2. 代码结构清晰	1. 结构与样式未彻底分离 2. 样式不能多页面复用	当前页面
外部样式	1. 样式可多页面复用 2. 代码结构清晰 3. 结构与样式彻底分离 4. 可触发浏览器的缓存机制，提高访问速度	需要引入才能使用	多个页面

3、CSS语法规范

选择器与声明块之间，属性名与属性值之间，均有一个空格，理论上能省略，但最好写上。

4、CSS选择器

4.1 CSS基本选择器

4.1.1 通配选择器

作用：可以选中所有的HTML元素。

语法：

4.1.2 元素选择器

作用：为页面中某种HTML元素统一设置样式

语法：

补充：

全部HTML元素可参考MDN网站：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a

4.1.3 类选择器

作用：根据元素的 class 值，来选中某些元素。

语法：

元素的 class 属性值不带 . ，但 CSS 的类选择器要带 . ；
class 值，是我们自定义的，按照标准：不要使用纯数字、不要使用中文、尽量使用英文与数字的组合，若由多个单词组成，使用 - 做连接，例如：per-panel，要命名要有意义，做到 “见名知意”；
一个元素不能写多个 class 属性，元素的属性不能重复，后写的会失效。

4.1.4 ID选择器

作用：根据元素的 id 属性值，来精准的选中某个元素。

语法：

id 属性值：尽量由字母、数字、下划线 _ 、短杠 - 组成，最好以字母开头、不要包含空格、区分大小写。
一个元素只能拥有一个 id 属性，多个元素的 id 属性值不能相同。

4.1.5 总结

优先级：行内样式 > ID选择器 > 类选择器 > 元素选择器 > *

基本选择器	特点	用法
通配选择器	可选中所有标签	* {color: red}
元素选择器	可选中所有同种标签，但是不能差异化选择	h1 {color: red}
类选择器	可选中所有特定类名的元素	.errorTips {color: red}
ID选择器	可选中特定id值的元素	#returnBtn {color: red}

4.2 CSS复合选择器

4.2.1 交集选择器

作用：选中同时符合多个条件的元素（逻辑里的且，既...又...）

语法：选择器1选择器2选择器3...选择器n

注意：有标签名，标签名必须写在前面

4.2.2 并集选择器

作用：可以选中多个选择器对应的元素（逻辑里的或）

语法：选择器1, 选择器2, 选择器3, ... 选择器n

4.2.3 后代选择器

作用：选中指定元素中，符合要求的后代元素（儿子女儿、孙子孙女、重孙重孙女，都算是后代）。

语法：选择器1 选择器2 选择器3 ...... 选择器n

4.2.4 子代选择器

作用：选中指定元素中，符合要求的子元素（儿子|女儿）。

语法：选择器1>选择器2>选择器3>...... 选择器n

选中类名为table子代中的所有tbody的子代中的所有tr的子代中的所有td

4.2.5 兄弟选择器

4.2.5.1 相邻兄弟选择器

作用：选中指定元素后，符合条件的相邻兄弟元素(紧挨着的下一个)。

语法：选择器1+选择器2

4.2.5.2 通用兄弟选择器

作用：选中指定元素后，符合条件的所有兄弟元素（我后面的所有符合条件的兄弟元素）

语法：选择器1s~选择器2

补充：为什么兄弟选择器只能选择后面的兄弟元素呢？这主要是因为 CSS 的解析方式是从上到下、从左到右解析的

4.2.6 属性选择器

作用：选中属性值符合一定要求的元素。

语法：

1. [属性名] 选中具有某个属性的元素，例如选中类名form-control且有disabled或readonly属性的元素

2. [属性名="值"] 选中包含某个属性，且属性值等于指定值的元素，例如选中属性值type等于text的input元素

3. [属性名^="值"] 选中包含某个属性，且属性值以指定的值开头的元素，例如选中属性值type以t开头的input元素

4. [属性名$="值"] 选中包含某个属性，且属性值以指定的值结尾的元素，例如选中属性值type以t结尾的input元素

5. [属性名*=“值”] 选择包含某个属性，属性值包含指定值的元素，例如选中table后代中的属性值class包含col-的th元素

4.2.7 伪类选择器

伪类：— 像类( class )，但不是类，是元素的一种特殊状态，作用是选中特殊状态的元素。

4.2.7.1 动态伪类

:link 超链接未被访问的状态。
:visited 超链接访问过的状态。
:hover 鼠标悬停在元素上的状态。
:active 元素激活的状态（按下鼠标不松开）。
:focus 获取焦点的元素（表单类元素才能使用）。

4.2.7.2 结构伪类

常用的：

:first-child 所有兄弟元素中的第一个，且这个元素必须与CSS指定的元素类型相匹配才能生效。
:last-child 所有兄弟元素中的最后一个，且这个元素必须与CSS指定的元素类型相匹配才能生效。
:nth-child(n) 所有兄弟元素中的第 n 个，
:first-of-type 所有同类型兄弟元素中的第一个。
:last-of-type 所有同类型兄弟元素中的最后一个。
:nth-of-type(n) 所有同类型兄弟元素中的第n个。

了解即可：

:nth-last-child(n) 所有兄弟元素中的倒数第 n 个。
:nth-last-of-type(n) 所有同类型兄弟元素中的倒数第n个。
:only-child 选择没有兄弟的元素（独生子女）。
:only-of-type 选择没有同类型兄弟的元素。
:root 根元素。
:empty 内容为空元素（空格也算内容）。

补充关于 n 的值：

0 或不写：什么都选不中 —— 几乎不用。
n ：选中所有子元素 —— 几乎不用。
1~正无穷的整数：选中对应序号的子元素。
2n 或 even ：选中序号为偶数的子元素。
2n+1 或 odd ：选中序号为奇数的子元素。
-n+3 ：选中的是前 3 个。

4.2.7.3 否定伪类

:not(选择器) 排除满足括号中条件的元素。

4.2.7.4 UI伪类

:checked 被选中的复选框或单选按钮。
:enable 可用的表单元素（没有 disabled 属性）。
:disabled 不可用的表单元素（有 disabled 属性）。

4.2.7.5 目标伪类（了解）

:target 选中锚点指向的元素。

4.2.7.6 语言伪类（了解）

:lang() 根据指定的语言选择元素

4.2.8 伪元素选择器

作用：选中元素中的一些特殊位置。

常用伪元素：

::first-letter 选中元素中的第一个文字。
::first-line 选中元素中的第一行文字。
::selection 选中被鼠标选中的内容。
::placeholder 选中输入框的提示文字。
::before 在元素最开始的位置，创建一个子元素（必须用 content 属性指定内容）。
::after 在元素最后的位置，创建一个子元素（必须用 content 属性指定内容）。

4.3 总结-选择器的优先级（权重）

通过不同的选择器，选中相同的元素，并且为相同的样式名设置不同的值时，就发生了样式的冲突。

简单的优先级：!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > *

此时，如下图，通过之前学习的优先级，已经不能算出应用哪个样式了，我们该怎么办呢？

这时，我们就需要计算每个选择器的权重，格式为： (a,b,c) ：

a : ID选择器的个数。
b : 类、伪类、属性选择器的个数。
c : 元素、伪元素选择器的个数。

大家数一下，为啥下图第一张边框是蓝色，第二张边框是灰色呢？

下图的单元格背景色为何是灰色？

附计算地址（MDN提供）：

specificity.keegan.st/

5、CSS三大特性

5.1 层叠性s

概念：如果发生了样式冲突，那就会根据一定的规则（选择器优先级），进行样式的层叠（覆

盖）

5.2 继承性

概念：元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。

规则：优先继承离得近的。

常见的可继承属性： text-?? ， font-?? ， line-?? 、 color ，具体参考MDN网站：developer.mozilla.org/zh-CN/docs/…

5.3 优先级

简单比较： !important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > * > 继承的样式。

详细比较： 计算权重

答案

问题1：

只有使用src引入页面的css文件加上scoped属性才能改变作用域为局部，@import方式引入css文件即使加上scoped属性，作用域也是是全局