CSS进阶-CSS的选择器详细介绍

最新推荐文章于 2024-10-15 22:21:38 发布

VaporGas

最新推荐文章于 2024-10-15 22:21:38 发布

阅读量733

点赞数 23

分类专栏： CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_52937170/article/details/142400237

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS简介

CSS 的全称为：层叠样式表 ( Cascading Style Sheets ) 。
CSS 也是一种标记语言，用于给 HTML 结构设置样式，例如：文字大小、颜色、元素宽高等等。

简单理解： CSS 可以美化 HTML , 让 HTML 更漂亮。

核心思想： HTML 搭建结构， CSS 添加样式，实现了：结构与样式的分离。

CSS的编写位置

行内样式

写在标签的 style 属性中，（又称：内联样式）。
语法：<h1 style="color:red;font-size:60px;">CSS入门学习</h1>

内部样式

写在 html 页面内部，将所有的 CSS 代码提取出来，单独放在 <style> 标签中。

语法：

<style>

h1 {

color : red ;

font-size : 40px ;

}

</style>

外部样式

写在单独的 .css 文件中，随后在 HTML 文件中引入使用。

语法：

1. 新建一个扩展名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。

h1 {

color : red ;

font-size : 40px ;

}

2. 在 HTML 文件中引入 .css 文件。
<link rel="stylesheet" href="./xxx.css">

样式表的优先级

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

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

者居上 ” ）

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

者居上 ” ）。

CSS选择器

学习CSS实际上就是学习如何找到一个HTML元素（选择器），并且给HTML元素添加样式

CSS基本选择器

通配选择器

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

语法：

* {

属性名 : 属性值 ;

}

元素选择器

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

语法：

标签名 {

属性名 : 属性值 ;

}

类选择器

作用：根据元素的 class 值，来选中某些元素。
语法：
. 类名 {

属性名 : 属性值 ;

}

id 选择器

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

属性名 : 属性值 ;

}

基本选择器总结

基本选择器	特点	用法
通配选择器	选中所有标签，一般用于清除样式。	* {color:red}
元素选择器	选中所有同种标签，但是不能差异化选择。	h1 {color:red}
类选择器	选中所有特定类名（ class 值）的元素 —— 使用频率很高。	.say{color:red}
ID 选择器	选中特定 id 值的那个元素（唯一的）。	#earthy {color:red}

CSS复合选择器

CSS选择器整体分类两大类：基本选择器和符合选择器

1. 复合选择器建立在基本选择器之上，由多个基础选择器，通过不同的方式组合而成。

2. 复合选择器可以在复杂结构中，快速而准确的选中元素。

交集选择器

作用：选中同时符合多个条件的元素。

交集有并且的含义（通俗理解：即......又...... 的意思），例如：年轻且长得高。

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

注意：

        1. 有标签名，标签名必须写在前面。

        2. id 选择器、通配选择器，理论上可以作为交集的条件，但实际应用中几乎不用 —— 因为没有意义。

        3. 交集选择器中 不可能 出现 两个元素选择器 ，因为一个元素，不可能即是 p 元素又是 span 元素。

        4. 用的最多的交集选择器是：元素选择器配合类名选择器，例如： p.beauty 。

并集选择器

作用：选中多个选择器对应的元素，又称：分组选择器。

所谓并集就是或者的含义（通俗理解：要么 ...... 要么 ...... 的意思），例如：请我喝杯饮料

或者请我吃顿饭。

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

多个选择器通过 , 连接，此处 , 的含义就是：或。

注意：

        1. 并集选择器，我们一般竖着写。

        2. 任何形式的选择器，都可以作为并集选择器的一部分。

        3. 并集选择器，通常用于集体声明，可以缩小样式表体积。

HTML元素间的关系

分为：父元素、子元素、祖先元素、后代元素、兄弟元素

父元素：直接包裹某个元素的元素，就是该元素的父元素。
子元素：被父元素直接包含的元素（简记：儿子元素）。
祖先元素：父亲的父亲 ...... ，一直往外找，都是祖先。（父元素也属于是子元素的祖先元素）
后代元素：儿子的儿子......，一直往里找，都是后代。
兄弟元素：具有相同父元素的元素，互为兄弟元素。

后代选择器

作用：选中指定元素中，符合要求的后代元素。
语法：选择器1 选择器2 选择器3 ...... 选择器n {} （先写祖先，再写后代）

选择器之间，用空格隔开，空格可以理解为： " xxx 中的 " ，其实就是后代的意思。

选择器 1234....n ，可以是我们之前学的任何一种选择器。

注意：

        1. 后代选择器，最终选择的是后代，不选中祖先。

        2. 儿子、孙子、重孙子，都算是后代。

        3. 结构一定要符合之前讲的 HTML 嵌套要求，例如：不能 p 中写 h1 ~ h6 。

子代选择器

作用：选中指定元素中，符合要求的子元素（儿子元素）。（先写父，再写子）

子代选择器又称：子元素选择器、子选择器。

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

注意：

1. 子代选择器，最终选择的是子代，不是父级。

2. 子、孙子、重孙子、重重孙子 ...... 统称后代！，子就是指儿子。

兄弟选择器

相邻兄弟选择器：
- 作用：选中指定元素后，符合条件的相邻兄弟元素。
- 所谓相邻，就是紧挨着他的下一个，简记：睡在我下铺的兄弟。
- 语法：选择器1+选择器2 {}
通用兄弟选择器：
- 作用：选中指定元素后，符合条件的所有兄弟元素。（简记：睡在我下铺的所有兄弟）
- 语法：选择器1~选择器2 {}

注意：两种兄弟选择器，选择的是下面的兄弟。

属性选择器

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

1. [属性名] 选中具有某个属性的元素。

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

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

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

5. [ 属性名 *=“ 值 ”] 选择包含某个属性，属性值包含指定值的元素。

伪类选择器

作用：选中特殊状态的元素。

如何理解 “ 伪 ” ? — 虚假的，不是真的。

如何理解 “ 伪类 ” ？ — 像类 ( class ) ，但不是类，是元素的一种特殊状态。

常用的伪类选择器：

一、动态伪类：

1. :link 超链接 未被访问 的状态。

2. :visited 超链接 访问过 的状态。

3. :hover 鼠标悬停在元素上的状态。

4. :active 元素激活的状态。

什么是激活？ —— 按下鼠标不松开。

注意点：遵循 LVHA 的顺序，即： link 、 visited 、 hover 、 active 。

5. :focus 获取焦点的元素。

表单类元素才能使用 :focus 伪类。

当用户：点击元素、触摸元素、或通过键盘的 “ tab ” 键等方式，选择元素时，就是获

得焦点。

二、结构伪类：

常用的：

1. :first - child 所有兄弟元素中的 第一个 。

2. :last - child 所有兄弟元素中的 最后一个 。

3. :nth - child(n) 所有兄弟元素中的第 n 个。

4. :first - of - type 所有 同类型 兄弟元素中的 第一个 。

5. :last - of - type 所有 同类型 兄弟元素中的 最后一个 。

6. :nth - of - type(n) 所有 同类型 兄弟元素中的第 n 个。

关于 n 的值：

1. 0 或不写：什么都选不中 —— 几乎不用。

2. n ：选中所有子元素 —— 几乎不用。

3. 1~ 正无穷的整数：选中对应序号的子元素。

4. 2n 或 even ：选中序号为偶数的子元素。

5. 2n+1 或 odd ：选中序号为奇数的子元素。

6. - n+3 ：选中的是前 3 个。

了解即可：

1. :nth - last - child(n) 所有兄弟元素中的 倒数第 n 个。

2. :nth - last - of - type(n) 所有 同类型 兄弟元素中的 倒数第 n 个。

3. :only - child 选择没有兄弟的元素（独生子女）。

4. :only - of - type 选择没有 同类型 兄弟的元素。

5. :root 根元素。

6. :empty 内容为空元素（空格也算内容）。

三、否定伪类：

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

四、UI伪类：

1. :checked 被选中的复选框或单选按钮。

2. :enable 可用的表单元素（没有 disabled 属性）。

3. :disabled 不可用的表单元素（有 disabled 属性）。

五、目标伪类

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

六、语言伪类

:lang() 根据指定的语言选择元素（本质是看 lang 属性的值）。

伪元素选择器

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