CSS教程（二）- CSS选择器及特性

6 阅读 0 评论 0 点赞

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调用，只能调用一次

2.3 类选择器

介绍
想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。
- 根据元素的class属性值匹配相应的元素，class属性值可以重复使用，实现样式的复用（简言之：用于查找或选取要设置样式的 HTML元素）

语法

.类名 {
    属性1: 属性值1;
    属性2: 属性值2;
    ... 	
}

说明
- 长名称或词组可以使用中横线来为选择器命名。
- 不要使用纯数字、中文等命名，尽量使用英文字母来表示。
- 命名要有意义，尽量使别人一眼就知道这个类名的目的。
口诀
- 样式点定义，结构类调用
特殊用法
1. 类选择器与其他选择器结合使用
```
a.c1{ }
```
  - 注意：标签与类选择器结合时，标签在前，类选择器在后
2. 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个以前的标签

选择器	说明
E:first-child	查找第1个E元素
E:last-child	查找最后一个E元素
E:nth-child(N)	查找第N个E元素（第1个元素N值为1）

公式	功能
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: “” 属性，用来设置 伪元素的内容，如果无内容，则引号留白即可
- 微元素必须是 行内 显示模式
- 权重 和 标签选择器 相同。
应用场景
- 插入内容‌：使用::before和::after伪元素在元素的前后插入内容，如在段落前添加引用符号、图标装饰等‌
- 分割符号‌：使用::before和::after伪元素在列表项之间添加分割线或其他符号，提高列表的可读性‌
- 清除浮动‌：使用::after伪元素来清除浮动，保证容器正确包裹元素‌
- 首行缩进‌：使用::first-line伪元素来设置元素内第一行的样式，如字体、颜色等‌
- 首字母样式‌：使用::first-letter伪元素来设置元素内第一个字母的样式，如字体大小、颜色等‌

选择器	说明
E::before	在E元素里面最前面添加一个伪元素
E::after	在E元素里面最后面添加一个伪元素

示例

<!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

3. 优先级

优先级用来解决样式冲突问题。同一个元素的同一个样式(例如文本色)，在不同地方多次进行设置，最终选用哪一种样式？此时哪一种样式表的优先级高选用哪一种。
- 行内样式的优先级最高。
- 文档内嵌与外链样式表,优先级一致,看代码书写顺序,后来者居上
- 浏览器默认样式和继承样式优先级较低

总结
- 页面中的所有样式将按照以下规则 “层叠” 为新的 “虚拟” 样式表，其中第一优先级最高：
  1. 行内样式（在 HTML 元素中）
  2. 外部和内部样式表（在 head 部分）
  3. 浏览器默认样式
- 行内样式具有最高优先级，并且将覆盖外部和内部样式以及浏览器默认样式。

4. 选择器的优先级

使用选择器为元素设置样式,发生样式冲突时,主要看选择器的权重,权重越大,优先级越高

选择器权重
继承或 * 0
标签选择器 1
(伪)类选择器 10
id选择器 100
行内样式 1000
!import 无穷大
复杂选择器(后代,子代,伪类)最终的权重为各个选择器权重值之和

选择器	权重
继承或 *	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选择器及特性

点赞(0) 打赏

本文分类：文章资讯
本文标签：CSS教程（二）- CSS选择器及特性
浏览次数：6 次浏览
本文链接：https://freeymw.com/article/33811.html

上一篇 > 实战二：网络爬虫
下一篇 > ArrayList和LinkList的区别

评论列表共有 0 条评论

暂无评论

CSS教程（二）- CSS选择器及特性

1、CSS 选择器

1. 作用

2. 分类

2.1 标签选择器

2.2 ID选择器

2.3 类选择器

2.4 通用选择器

2.5 群组选择器

2.6 后代选择器

2.7 子代选择器

2.8 伪类选择器

1、链接伪类选择器

2、焦点伪类选择器

3、结构伪类选择器

4、伪元素选择器

3. 样式表特性

1. 层叠性

2. 继承性

3. 优先级

4. 选择器的优先级

评论列表 共有 0 条评论

发表评论 取消回复

评论列表共有 0 条评论

发表评论取消回复