导语
:
在上一章节中,我们了解了 CSS 的一些基本语法概念,那么在这一章节中我们就带来 CSS
选择器
知识的分享,选择器
这一章的知识点有一点多,不过我们只要认真去理解,学习它也是没什么问题的,还有,当我们掌握好CSS选择器
的使用后,并能熟练的去运用它,这对于我们之后的正式开发是有很多帮助的。
文章目录
- 基本选择器
- 通配符选择器
- 元素选择器
- 类选择器
- ID选择器
- 基本选择器总结:
- 复合选择器
- 基础复合选择器
- 交集选择器
- 并集选择器
- 补充:HTML元素间的结构关系
- 后代选择器
- 子级选择器
- 兄弟选择器
- 高级复合选择器
- 属性选择器
- 伪类选择器
- 动态伪类
- 结构伪类
- 否定伪类
- UI 伪类:
- 目标伪类
- 语言伪类
- 伪元素选择器
- CSS 选择器优先级(权重)
- CSS 的三大特性
- 层叠性
- 继承性
- 优先级
- 总结
基本选择器
概念
:
本章节分析讲解的顺序是按照,
简单到进阶
的过程讲解,首先基本选择器
,作为 CSS 中的基础项,可以更加简单直接的选定元素。缺点是,处理复杂场景下的选项时,效率一般。
通配符选择器
作用
:可以选中所有的HTML
元素。语法
:
* {属性名: 属性值;
}
示例
:
/* 选中 HTML中的 所有元素 ,为其设定样式*/
* {color: red;font-size: 25px;
}
使用场景:
常用于为其全局 HTML,
清楚默认样式
。
元素选择器
作用
:为页面中某种元素
统一设置样式。语法
:
(直接写)元素标签名 {属性名: 属性值;
}
示例
:
/* 选中页面中,所有的 h1 元素 */
h1 {color: rgb(0, 255, 60);font-size: 25px;
}/* 选中页面中,所有的 p 元素 */
p {color: aquamarine;font-weight: bold;
}
注意
:
元素选择器
无法实现差异化设置
,例如上面的代码中,全局所有的 p 元素效果都一样。
类选择器
作用
:根据元素的class
值,来将某些元素进行归类,并选中这些元素。语法
:
.类名 {属性名: 属性值;
}
示例
:
/* 选中所有class值为speak的元素 */
.speak {background-color: blueviolet;font-size: 25px;
}/* 选中所有class值为answer的元素 */
.answer {color: aquamarine;font-weight: 600;
}
值得注意
:
ID选择器
作用
:根据元素的ID
属性值,来精准的选中某个元素
。语法
:
#id值 {属性名: 属性值;
}
示例
:
/* 选中id值为earthy的那个元素 */
#earthy {color: red;font-size: 60px;
}
【值得注意】
:id
属性值:尽量由字母、数字、下划线( _ )、短杠( - )组成
,最好以字母开头、不要包含空格、区分大小写。- 一个元素只能拥有一个
id
属性,多个元素的id
属性值不能相同,具有唯一性
。 - 一个元素可以同时拥有
id
和class
属性。
基本选择器总结:
基本选择器 | 特性 | 用法 |
---|---|---|
通配选择器 | 选中所有标签,一般用于清除全局默认样式。 | * {color:red} |
元素选择器 | 选中所有同种标签,但是不能差异化 选择。 | h1 {color:red} |
类选择器 | 选中所有特定类名( class 值 )的元素 —— 使用频率很高 。 | .say {color:red} |
ID选择器 | 选中特定 id 值的那个元素(具有唯一性 )。 | #earthy {color:red} |
复合选择器
- 复合选择器建立在基本选择器之上,由多个基础选择器,通过不同的方式组合而成。
- 复合选择器可以在
复杂结构
中,快速而准确的选中元素
。
基础复合选择器
交集选择器
作用
:选中同时符合
多个条件的元素。语法
:
示例
:
/* 选中类名为 speak 的 h1 元素*/
h1.speak {color: aqua;
}/* 选中:类名为beauty的p元素,为此种写法用的非常多!!!! */
p.beauty {color: blue;
}/* 选中:类名包含rich和beauty的元素 */
.rich.beauty {color: green;
}
值得注意
:
- 有标签名,
标签名必须写在前面
。 id
选择器、通配选择器,理论上可以作为交集的条件,但实际应用中几乎不用 —— 因为没有意义。- 交集选择器中
不可能
出现两个元素选择器
,因为一个元素,不可能即是p
元素又是span
元素。 - 用的最多的交集选择器是:
元素选择器配合类名选择器
,例如:p.beauty
并集选择器
概念
:所谓并集就是 或者
的含义(通俗理解:要么......要么......
的意思)。
-
作用
:选中多个选择器对应的元素,又称:【分组选择器
】。 -
语法
:- 多个选择器通过
,
连接,此处,
的含义就是:或
。
- 多个选择器通过
-
示例
:
/* 选中id为peiqi,或类名为rich,或类名为beauty的元素 */
#peiqi,
.rich,
.beauty {font-size: 40px;background-color: skyblue;width: 200px;
}
值得注意
:
- 并集选择器,我们一般竖着写,结构更清晰点。
- 任何形式的选择器,都可以作为并集选择器的一部分 。
- 并集选择器,通常用于集体声明,可以缩小样式表体积。
补充:HTML元素间的结构关系
结构关系可分为
- 父元素
- 子元素
- 祖先元素
- 后代元素
- 兄弟元素
【父元素】
:直接
包裹某个元素的元素,就是该元素的父元素。
【子元素】
:被父元素直接
包含的元素(简记:儿子元素)。
【祖先元素】
:父亲的父亲…,一直往外找,都是祖先元素
注明
:备注:父元素,也算是祖先元素的一种。
【后代元素】
:儿子的儿子…,一直往里找,都是后代元素
注明
:备注:子元素,也算是后代元素的一种。
【兄弟元素】
:具有相同父元素的元素
,互为兄弟元素。
后代选择器
-
作用
:选中指定元素中,符合要求的后代元素 -
语法
:- 选择器之间,
用空格隔开
,空格可以理解为:" xxx 中的",其实就是后代的意思。
- 选择器之间,
-
示例
:
/* 选中ul中的所有li */
ul li {color: red;
}/* 选中ul中所有li中的a */
ul li a {color: orange;
}/* 选中类名为subject元素中的所有li */
.subject li {color: blue;
}/* 选中类名为subject元素中的所有类名为front-end的li */
.subject li.front-end {color: blue;
}
值得注意
:
- 后代选择器,
最终选择的是后代
,不选中祖先元素。 - 儿子、孙子、重孙子,都算是后代。
- 结构一定要符合 HTML 嵌套规则要求,例如:不能
p
中写h1 ~ h6
。
子级选择器
-
作用
:选中指定元素中,符合要求的子
元素(儿子元素)。(先写父,再写子) -
别名
:子元素选择器、子选择器、子代选择器。 -
语法
:- 选择器之间,用
>
隔开,>
可以理解为:" xxx 的子代",其实就是儿子的意思。
- 选择器之间,用
-
示例
:
/* div中的子级a元素 */
div>a {color: red;
}/* 类名为persons的元素中的子级a元素 */
.persons>a {color: red;
}
值得注意
:
- 子代选择器,最终选择的是
子代
,不是父级 - 子、孙子、重孙子、重重孙子 … 统称后代!,子就是指
儿子
。
兄弟选择器
- 相邻兄弟选择器:
作用
:选中指定元素后,符合条件并且紧挨着相邻兄弟
的元素语法
:选择器1 + 选择器2 {} 。
示例
:
/* 选中div后相邻的兄弟p元素 */
div+p {color: red;
}
-
通用兄弟选择器:
作用
:选中指定元素后,符合条件的所有兄弟元素
语法
:选择器1 ~ 选择器2 {} 。
示例
:
/* 选中div后的所有的兄弟p元素 */
div~p {color: red;
}
值得注意
:
- 两种兄弟选择器,查找兄弟的时候,都是
顺序,从上向下找
去匹对的。
高级复合选择器
属性选择器
-
作用
::选中属性值符合一定要求的元素。 -
语法
:[ 属性名 ]
选中具有
某个属性的元素。[ 属性名="值" ]
选中包含某个属性,且属性值等于
指定值的元素。[ 属性名^="值" ]
选包含
某个属性,且属性值以指定的值开头
的元素。[ 属性名$="值" ]
选中包含
某个属性,且属性值以指定的值结尾
的元素。[ 属性名*=“值” ]
选择包含某个属性,属性值包含
指定值的元素。
-
示例
:
/* 选中具有title属性的元素 */
div[title] {color: red;
}/* 选中 title 属性值为cor的元素 */
div[title="cor"] {color: red;
}/* 选中title属性值以c开头的元素 */div[title^="c"] {color: red;
}/* 选中title属性值以r结尾的元素 */
div[title$="r"] {color: red;
}/* 选中title属性值包含o的元素 */
div[title*="o"] {color: red;
}
伪类选择器
作用
:选中特殊状态
的元素概念
:如何理解 【伪类
】 — 像类(class
),但不是类,是元素的一种特殊状态
。
动态伪类
:link
:超链接未被访问的状态
【超链接a 标签独享】:visited
:超链接被访问过的状态
【超链接a 标签独享】:hover
:超链接鼠标悬停在元素上的状态
:active
元素激活
的状态。
:focus
: 元素获取焦点
时的状态
注明
:只有表单类元素
才能使用 :focus
伪类。
结构伪类
:first-child
:所有兄弟元素中的第一个
。:last-child
:所有兄弟元素中的最后一个
。:nth-child(n)
:所有兄弟元素中的第 N 个元素
。:first-of-type
:所有同类型
兄弟元素中的第 一个元素
。:last-of-type
:所有同类型
兄弟元素中的最后一个元素
。:nth-of-type(n)
:所有同类型
兄弟元素中的第 N 个元素
。
注意
:关于 n
的 取值范围
结构伪类扩展补充
【了解即可】:
语法 | 描述 |
---|---|
:nth-last-child(n) | 所有兄弟元素中的倒数 第 n 个。 |
:nth-last-of-type(n) | 所有同类型 兄弟元素中的 倒数第n 个 |
:only-of-type | 选择没有同类型 兄弟的元素。 |
:only-child | 选择没有兄弟的元素 (独生子女)。 |
:root | 选中全局 html 根元素 。 |
:empty | 内容为空元素(空格也算内容)。 |
否定伪类
:not(选择器)
:排除
满足括号中条件的元素
UI 伪类:
:checked
:被选中获取焦点的复选框或单选按钮:enable
: 可用的表单元素
(没有disabled
属性)。:disabled
: 不可用的表单元素
(有disabled
属性)。
使用场景
:UI 伪类,主要运用在 表单元素
。
目标伪类
:target
:选中锚点指向
的元素使用场景
:常用于锚点跳转时,为其匹配到的锚点元素指定样式
语言伪类
:lang()
根据指定的语言类型
选择元素(本质是看lang
属性的值)。
伪元素选择器
作用
:选中元素中的一些特殊位置,在某个位置创建一个元素,并为其指定样式填充
语法 | 描述 |
---|---|
::first-letter | 选中元素中的第一个文字 。 |
::first-line | 选中元素中的第一行文字 。 |
::selection | 选中被鼠标选中 的内容 |
::placeholder | 选中输入框的提示文字 。 |
::before | 在元素最开始 的位置,创建一个子元素,并为其指定样式(需配合content 指定内容) |
::after | 在元素最后 的位置,创建一个子元素,并为其指定样式(也需配合content 指定内容) |
CSS 选择器优先级(权重)
概述
:
通过
不同的选择器
,选中相同的元素
时,并且为相同的样式名
设置了不同的属性值时
,就触发了样式的冲突
! 这时候就需要通过计算选择器的权重优先级
来适配样式了
-
基础选择器权重:
-
复合选择器需通过计算规则决定优先级:
- 计算方式 :每个选择器,都可计算出一组权重,格式为:
(a,b,c)
- 比较规则:按照
从左到右
的顺序,依次比较大小
,当前位胜出后,后面的不再对比,胜出者为最终展示的样式。 如:
- 计算方式 :每个选择器,都可计算出一组权重,格式为:
-
特殊规则:
行内样式
权重大于所有选择器
。!important
的权重,大于行内样式,大于所有选择器,权重最高
!
CSS 的三大特性
层叠性
概念
:如果发生了样式冲突
,会触发一定的规则(先匹配选择器的优先级
,优先级如果相同
,则后声明样式覆盖
掉前面样式。)
继承性
概念
:元素会自动拥有其父元素
、或其祖先元素
上所设置的某些样式
继承规则
:优先继承距离最近的。- 常见可继承属性:
CSS中有许多可继承属性,这些属性可以被子元素继承并应用到其父元素。以下是一些常见的可继承属性:
可继承属性类 | 可继承属性值 |
---|---|
字体属性 | font、font-size、font-style、font-weight、line-height … |
文本属性 | text-align、text-indent、text-transform、text-decoration … |
颜色属性 | color |
列表属性 | list-style、list-style-type、list-style-position … |
表格属性 | border-collapse、border-spacing、caption-side … |
元素可见性属性 | visibility |
光标属性 | cursor |
值得注意
:并非所有的CSS属性都是可继承的
,因此需要根据需要手动为子元素设置相应的样式。
优先级
- 直观理解:
!important
>行内
样式 >ID
选择器 >类
选择器 >元素
选择器 >*
(通配符选择器)>继承
来的样式。 - 细致分析:
需计算权重
总结
本章节,详细的聊了有关 CSS 选择器有关的知识,同时也分析了 CSS
选择器的 权重
的计算方式,最后还总结了 CSS 的三大特性。毫无疑问,本章节知识点还是值得大家去参考学习的,这也是博主创作结束博文的初衷!
🚵♂️ 博主座右铭:向阳而生,我还在路上!
——————————————————————————————
🚴博主想说:将持续性为社区输出自己的资源,同时也见证自己的进步!
——————————————————————————————
🤼♂️ 如果都看到这了,博主希望留下你的足迹!【📂收藏!👍点赞!✍️评论!】
——————————————————————————————