1、CSS 选择器
1. 作用
- 匹配文档中的某些元素为其应用样式。
- 根据不同需求把不同的标签选出来。
2. 分类
- 分类
- 基础选择器
- 包含 标签选择器、ID选择器、类选择器、通用选择器等
- 复合选择器
- 包含 后代选择器、子代选择器、伪类选择器等
- 基础选择器
2.1 标签选择器
-
介绍
- 又称为元素选择器,根据标签名匹配文档中所有该元素,为页面中某一类标签指定统一的CSS样式。
-
语法
标签名{ 属性1: 属性值1; 属性2: 属性值2; ... }
- 说明
- 选择器:指需设置样式的 HTML 元素。
- 声明块包含一条或多条用分号分隔的声明。
- 每条声明都包含一个 CSS 属性名称和一个值,以冒号分隔。
- 多条 CSS 声明用分号分隔,声明块用花括号括起来。
- 优点
- 能快速为页面中同类型的标签统一设置样式。
- 缺点
- 不能设计差异化样式,只能选择全部的当前标签。
2.2 ID选择器
-
介绍
- 根据元素的 id 属性值匹配文档中唯一的元素,id具有唯一性,不能重复使用。
- 在 CSS 中 ID选择器以 # 来定义
-
语法
#id属性值{ 属性1: 属性值1; 属性2: 属性值2; ... }
-
注意
- id属性值自定义,可以由数字、字母、下划线、- 组成,不能以数字开头;
- 尽量见名知意,多个单词组成时,可以使用连接符,下划线,小驼峰表示。
-
口诀
- 样式#定义,结构id调用,只能调用一次
- 样式#定义,结构id调用,只能调用一次
2.3 类选择器
-
介绍
-
想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用类选择器。
- 根据元素的class属性值匹配相应的元素,class属性值可以重复使用,实现样式的复用(简言之:用于查找或选取要设置样式的 HTML元素)
-
语法
.类名 { 属性1: 属性值1; 属性2: 属性值2; ... }
-
说明
- 长名称或词组可以使用中横线来为选择器命名。
- 不要使用纯数字、中文等命名,尽量使用英文字母来表示。
- 命名要有意义,尽量使别人一眼就知道这个类名的目的。
-
口诀
- 样式点定义,结构类调用
-
特殊用法
-
类选择器与其他选择器结合使用
a.c1{ }
- 注意:标签与类选择器结合时,标签在前,类选择器在后
-
class属性值可以写多个(多个类名之间必必须用 空格 分开),共同应用类选择器的样式
<p class="c1 c2"></p>
-
2.4 通用选择器
-
介绍
- 通配符选择器使用 * 定义,它表示选取页面中所有元素(标签)。
-
语法
* { 属性1: 属性值1; 属性2: 属性值2; ... }
-
说明
-
通常在最开始对页面设置内边距与外边距的设置(默认body与页面会存在边距)。
*{ padding: 0; margin: 0; }
-
2.5 群组选择器
-
介绍
- 也称为并集选择器,可以使用多个不同的选择器为一组元素统一设置样式。
-
语法
selector1,selector2,selector3{ 属性1: 属性值1; 属性2: 属性值2; ... }
2.6 后代选择器
-
介绍
- 匹配满足选择器的所有后代元素(包含直接子元素和间接子元素)
-
语法
selector1 selector2{ 属性1: 属性值1; ... }
-
说明
- 匹配selector1中所有满足selector2的后代元素
- selector1 与 selector2 可以是任意的基础选择器
2.7 子代选择器
-
介绍
- 匹配满足选择器的所有直接子元素,只能选择作为某元素的最近一级子元素
-
语法
selector1>selector2{ 属性1: 属性值1; ... }
-
说明
- selector2 必须是 selector1 的亲子元素
2.8 伪类选择器
-
介绍
- 为元素的不同状态分别设置样式,必须与基础选择器结合使用。
-
特点
用冒号(:)表示
,如::hover、:first-child、:last_child
1、链接伪类选择器
-
分类
:link 超链接访问前的状态 :visited 超链接访问后的状态 :hover 鼠标滑过时的状态 :active 鼠标点按不抬起时的状态(激活)
-
使用
a:link{ } a:visited{ } a:hover{ color: red; } input:focus{ background-color: yellow; }
-
注意
-
超链接如果需要为四种状态分别设置样式,必须按照以下顺序【LVHA】声明
:link :visited :hover :active
-
超链接常用设置 :
a{ /*统一设置超链接默认样式(不分状态)*/ } a:hover{ /*鼠标滑过时改样式*/ }
-
2、焦点伪类选择器
-
:focus
- 用于选取获得焦点的表单元素。
- 一般情况 <input> 类表单元素才能获取
-
示例
input:focus { background-color:yellow; }
3、结构伪类选择器
-
作用
- 根据元素的
结构关系
查找元素
- 根据元素的
-
选择器
选择器 说明 E:first-child 查找第1个E元素 E:last-child 查找最后一个E元素 E:nth-child(N) 查找第N个E元素(第1个元素N值为1) -
:nth-child(公式)
-
作用:根据元素的关系结构
查找多个元素
。公式 功能 2n 偶数标签 2n+1; 2n-1 奇数标签 5n 找到5的倍数的标签 n+5 找到第5个以后的标签 -n+5 找到第5个以前的标签
-
-
-
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> li:first-child { background-color: aquamarine; } li:last-child { background-color: greenyellow; } li:nth-child(2n-1) { background-color: blueviolet; } li:nth-child(n + 2) { background-color: gold; } </style> </head> <body> <ul> <li>li 1</li> <li>li 2</li> <li>li 3</li> <li>li 4</li> <li>li 5</li> <li>li 6</li> </ul> </body> </html>
4、伪元素选择器
-
作用
- 创建
虚拟
元素(伪元素),用来摆放装饰性
的内容
- 创建
-
选择器
选择器 说明 E::before 在E元素里面最前面添加一个伪元素 E::after 在E元素里面最后面添加一个伪元素 -
注意
- 必须设置 content: “” 属性,用来设置
伪元素的内容
,如果无内容,则引号留白
即可 - 微元素必须是
行内
显示模式 权重
和标签选择器
相同。
- 必须设置 content: “” 属性,用来设置
-
应用场景
- 插入内容:使用::before和::after伪元素在元素的前后插入内容,如在段落前添加引用符号、图标装饰等
- 分割符号:使用::before和::after伪元素在列表项之间添加分割线或其他符号,提高列表的可读性
- 清除浮动:使用::after伪元素来清除浮动,保证容器正确包裹元素
- 首行缩进:使用::first-line伪元素来设置元素内第一行的样式,如字体、颜色等
- 首字母样式:使用::first-letter伪元素来设置元素内第一个字母的样式,如字体大小、颜色等
-
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> div { width: 300px; height: 300px; background-color: rosybrown; } div::before { content: "老鼠"; width: 100px; height: 100px; background-color: royalblue; display: block; } div::after { content: "大米"; width: 50px; height: 50px; background-color: palegoldenrod; display: inline-block; } </style> </head> <body> <div>爱</div> </body> </html>
- 总结
3. 样式表特性
1. 层叠性
-
多组CSS样式共同作用于一个元素,就会出现
覆盖(层叠)
另一个冲突的样式。 -
层叠原则
-
样式冲突:遵循
就近原则
(哪个样式离结构近,就执行哪个样式) -
样式不冲突,就不会重叠
-
2. 继承性
-
后代元素可以继承祖先元素中的某些样式(子承父业),如文本颜色和字号。
- 例 : 大部分的文本属性都可以被继承
-
说明
- 恰当地使用继承可以简化代码,降低 CSS 样式的复杂性
- 子元素可以继承父元素的样式(text-,font-,line-这些元素开头的可以继承,以及color属性)
-
拓展
-
行高的继承
- 如果子元素没有设置行高,则会继承父元素的行高为 1.5,此时子元素的行高是:当前子元素的文字大小 * 1.5
- 如果子元素没有设置行高,则会继承父元素的行高为 1.5,此时子元素的行高是:当前子元素的文字大小 * 1.5
-
3. 优先级
-
优先级用来解决样式冲突问题。同一个元素的同一个样式(例如文本色),在不同地方多次进行设置,最终选用哪一种样式?此时哪一种样式表的优先级高选用哪一种。
- 行内样式的优先级最高。
- 文档内嵌与外链样式表,优先级一致,看代码书写顺序,后来者居上
- 浏览器默认样式和继承样式优先级较低
-
总结
-
页面中的所有样式将按照以下规则 “层叠” 为新的 “虚拟” 样式表,其中第一优先级最高:
- 行内样式(在 HTML 元素中)
- 外部和内部样式表(在 head 部分)
- 浏览器默认样式
-
行内样式具有最高优先级,并且将覆盖外部和内部样式以及浏览器默认样式。
-
4. 选择器的优先级
-
使用选择器为元素设置样式,发生样式冲突时,主要看选择器的权重,权重越大,优先级越高
选择器 权重 继承 或 * 0 标签选择器 1 (伪)类选择器 10 id选择器 100 行内样式 1000 !import 无穷大 -
复杂选择器(后代,子代,伪类)最终的权重为各个选择器权重值之和
-
群组选择器权重以每个选择器单独的权重为准,不进行相加计算
/*群组选择器之间互相独立,不影响优先级*/ body,h1,p{ /*标签选择器权重为 1 */ color:red; } .c1 a{ /*当前组合选择器权重为 10+1 */ color:green; } #d1>.c2{ /*当前组合选择器权重为 100+10 */ color:blue; }
本站资源均来自互联网,仅供研究学习,禁止违法使用和商用,产生法律纠纷本站概不负责!如果侵犯了您的权益请与我们联系!
转载请注明出处: 免费源码网-免费的源码资源网站 » CSS教程(二)- CSS选择器及特性
发表评论 取消回复