CSS学习（1）-选择器

一、基本选择器

1. 通配选择器

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

* {
属性名: 属性值;
}

举例：

/* 选中所有元素 */
* {
color: orange;
font-size: 40px;
}

主要用于：清除样式。

2. 元素选择器

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

标签名 {
属性名: 属性值;
}

举例：

/* 选中所有h1元素 */
h1 {
color: orange;
font-size: 40px;
}
/* 选中所有p元素 */
p {
color: blue;
font-size: 60px;
}

注意：
元素选择器无法实现差异化设置，例如上面的代码中，所有的 p 元素效果都一样。

3. 类选择器

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

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

举例：

/* 选中所有class值为speak的元素 */
.speak {
color: red;
}
/* 选中所有class值为answer的元素 */
.answer {
color: blue;
}

注意点：

  1. 元素的 class 属性值不带 . ，但 CSS 的类选择器要带 . 。

  2. class 值，是我们自定义的，按照标准：不要使用纯数字、不要使用中文、尽量使用
    英文与数字的组合，若由多个单词组成，使用 - 做连接，例如： left-menu ，且命名
    要有意义，做到 “见名知意”。

  3. 一个元素的 class 属性，能写多个值，要用空格隔开，例如：

    <!-- 该写法正确，class属性，能写多个值 -->
<h1 class="speak big">你好啊</h1>

4. id 选择器

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

#id值 {
属性名: 属性值;
}

举例：

/* 选中id值为earthy的那个元素 */
#earthy {
color: red;
font-size: 60px;
}

注意：

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

5. 基本选择器总结

在这里插入图片描述

二、复合选择器

1. 交集选择器

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

选择器1选择器2选择器3...选择器n {}

举例：

/* 选中：类名为beauty的p元素，为此种写法用的非常多！！！！ */
p.beauty {
color: blue;
}
/* 选中：类名包含rich和beauty的元素 */
.rich.beauty {
color: green;
}

注意：

  1. 有标签名，标签名必须写在前面。
  2. id 选择器、通配选择器，理论上可以作为交集的条件，但实际应用中几乎不用 —— 因为没
    有意义。
  3. 交集选择器中不可能出现两个元素选择器，因为一个元素，不可能即是 p 元素又是 span 元
    素。
  4. 用的最多的交集选择器是：元素选择器配合类名选择器，例如： p.beauty 。

2. 并集选择器

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

选择器1, 选择器2, 选择器3, ... 选择器n {}

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

举例：

/* 选中id为peiqi，或类名为rich，或类名为beauty的元素 */
#peiqi,
.rich,
.beauty {
	font-size: 40px;
	background-color: skyblue;
	width: 200px;
}

注意：

  1. 并集选择器，我们一般竖着写。
  2. 任何形式的选择器，都可以作为并集选择器的一部分 。
  3. 并集选择器，通常用于集体声明，可以缩小样式表体积。

3. HTML元素间的关系

分为：①父元素、②子元素、③祖先元素、④后代元素、⑤兄弟元素。

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

4. 后代选择器

作用：选中指定元素中，符合要求的后代元素。
语法：

选择器1选择器2  选择器3......选择器n{
}

（先写祖先，再写后代）
选择器之间，用空格隔开，空格可以理解为：
“xxx中的”，其实就是后代的意思。
举例：

/*选中ul中的所有li*/
ulli{
  color:red; 
}
/*选中ul中所有li中的a*/
ullia{
 color:orange;
}
/*选中类名为subject元素中的所有li*/
.subjectli{
color:blue;
}
/*选中类名为subject元素中的所有类名为front-end的li*/
.subjectli.front-end{
 color:blue;}

注意：

  • 后代选择器，最终选择的是后代，不选中祖先。
  • 儿子、孙子、重孙子，都算是后代。

5. 子元素选择器

作用：
选中指定元素中，符合要求的子元素（儿子元素）。（先写父，再写子）
子代选择器又称：子元素选择器、子选择器。
语法：

选择器1>选择器2>选择器3>......选择器n{
}

举例：

/* div中的子代a元素 */
div>a {
color: red;
}
/* 类名为persons的元素中的子代a元素 */
.persons>a{
color: red;
}

注意：

  1. 子代选择器，最终选择的是子代，不是父级。
  2. 子、孙子、重孙子、重重孙子 … 统称后代；子就是指儿子。注意二者的区别。

6. 兄弟选择器

6.1 相邻兄弟选择器

作用：选中指定元素后，符合条件的相邻兄弟元素。所谓相邻，就是紧挨着他的下一个。
语法：

选择器1+选择器2 {
}

示例：

/* 选中div后相邻的兄弟p元素 */
div+p {
	color:red;
}
6.2 通用兄弟选择器

作用：选中指定元素后，符合条件的所有兄弟元素。
语法：

选择器1~选择器2 {
}

实例：

/* 选中div后的所有的兄弟p元素 */
div~p {
color:red;
}

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

7. 属性选择器

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

1. [属性名] 选中具有某个属性的元素。
2. [属性名="值"] 选中包含某个属性，且属性值等于指定值的元素。
3. [属性名^="值"] 选中包含某个属性，且属性值以指定的值开头的元素。
4. [属性名$="值"] 选中包含某个属性，且属性值以指定的值结尾的元素。
5. [属性名*=“值”] 选择包含某个属性，属性值包含指定值的元素。

举例：

/* 选中具有title属性的元素 */
div[title]{color:red;}
/* 选中title属性值为atguigu的元素 */
div[title="atguigu"]{color:red;}
/* 选中title属性值以a开头的元素 */
div[title^="a"]{color:red;}
/* 选中title属性值以u结尾的元素 */
div[title$="u"]{color:red;}
/* 选中title属性值包含g的元素 */
div[title*="g"]{color:red;}

8. 伪类选择器

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

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

常用的伪类选择器

8.1 动态伪类

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

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

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

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

    什么是激活？—— 按下鼠标不松开。
    注意点：遵循 LVHA 的顺序，即： link 、 visited 、 hover 、 active。

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

    表单类元素才能使用 :focus 伪类。
    当用户：点击元素、触摸元素、或通过键盘的 “ tab ” 键等方式，选择元素时，就是获
    得焦点。

8.2 结构伪类

常用的：

  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 个。

9. 伪元素选择器

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

三、选择器的优先级（权重）

通过不同的选择器，选中相同的元素 ，并且为相同的样式名设置不同的值时，就发生了样式的冲突。到底应用哪个样式，此时就需要看优先级了。
优先级如下：

行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器。

  1. 计算方式：每个选择器，都可计算出一组权重，格式为： (a,b,c)

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

    例如：
    在这里插入图片描述

  2. 比较规则：
    按照从左到右的顺序，依次比较大小，当前位胜出后，后面的不再对比，例如：

(1,0,0) > (0,2,2)
(1,1,0) > (1,0,3)
(1,1,3) > (1,1,2)
  1. 特殊规则：
    1. 行内样式权重大于所有选择器。
    2. !important 的权重，大于行内样式，大于所有选择器，权重最高！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/462130.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

MySQL语法分类 DQL（3）排序查询

MySQL语法分类 DQL（3）排序查询

为了更好的学习这里给出基本表数据用于查询操作 create table student (id int, name varchar(20), age int, sex varchar(5),address varchar(100),math int,english int );insert into student (id,name,age,sex,address,math,english) values (1,马云,55,男,杭州,66,78),…
阅读更多...
Linux中 vim 编辑器的使用

Linux中 vim 编辑器的使用

文章目录 前言一、vim编辑器模式二、简单的插入、保存和退出三、 命令模式下常用命令即其作用1. 命令模式 思维导图 前言 首先&#xff0c;了解一下 什么是vim 编辑器&#xff1f;在不同的系统中&#xff0c;文本的管理也会不同&#xff1b;windos系统就不多说了&#xff0c…
阅读更多...
【视频异常检测】Diversity-Measurable Anomaly Detection 论文阅读

【视频异常检测】Diversity-Measurable Anomaly Detection 论文阅读

Diversity-Measurable Anomaly Detection 论文阅读 Abstract1. Introduction2. Related Work3. Diversity-Measurable Anomaly Detection3.1. The framework3.2. Information compression module3.3. Pyramid deformation module3.4. Foreground-background selection3.5. Trai…
阅读更多...
第七课-----分支切平面

第七课-----分支切平面

割平面方法的基本思想是对于一个优化问题而言&#xff0c;通过不断添加约束条件来切割可行域&#xff0c; 最终将可行域不断变小&#xff0c;相当于搜索空间变小。在LP中讲过&#xff0c;一个等式约束就等价于一个超平面&#xff0c;一个不等式约束就代表一个半空间&#xff0c…
阅读更多...
从零开始搭建游戏服务器 第二节 Actor模型与应用

从零开始搭建游戏服务器 第二节 Actor模型与应用

目录 复习本节内容正文什么是Actor模型如何应用创建Actor基类创建RootActor创建AkkaContext创建ConnectActorManager和ConnectActor生成actor并发送消息给它 课后作业结尾 复习 上一节我们使用gradle构建了一个多模块系统。 并且在登录服启动了Netty服务&#xff0c;监听confi…
阅读更多...
spacy进行简单的自然语言处理的学习

spacy进行简单的自然语言处理的学习

自然语言处理基本概念 概念&#xff1a;自然语言处理&#xff0c;是让机器理解人的语言的过程。 作用&#xff1a;通过使用自然语言处理&#xff0c;机器可以理解人的语言&#xff0c;从而进行语义分析&#xff0c;例如&#xff1a;从一句话中判断喜怒哀乐&#xff1b;从一段文…
阅读更多...
lua脚本的基础内容

lua脚本的基础内容

官方地址&#xff1a;http://luajit.org/ 官方wiki地址&#xff1a;http://wiki.luajit.org/Home 推荐书籍&#xff1a; OpenResty 最佳实践&#xff1a;https://moonbingbing.gitbooks.io/openresty-best-practices/content/ lua基础文档&#xff1a;https://www.runoob.com/l…
阅读更多...
数据库-mysql安装

数据库-mysql安装

我们使用两种方式安装配置mysql数据库 一种采用无安装绿色版 一种采用官方提供的msi&#xff0c;windows安装版 亲测两种都可运行&#xff0c;有的电脑可能其中一种不能运行那可以尝试另外一种&#xff0c;有条件的同学可以试试docker版。 mysql安装 初次安装mysql之前建议大家…
阅读更多...
消息队列思想学习（以及池化思想延展）

消息队列思想学习（以及池化思想延展）

目录 消息队列的功能 消息中间件必备 池化思想以及弹性线程池的设计 弹性连接池 [核心参数&#xff1a;初始连接数&#xff0c;最大连接数&#xff0c;最大空闲时间] 弹性线程池 [核心参数&#xff1a;coreThreadCount, maxThreadCount] 引言&#xff1a;为啥要把消息队列…
阅读更多...
JUC之Java对象内存布局

JUC之Java对象内存布局

Java对象 对象在堆中的存储布局 它保存了什么 对象指向它的类元数据的指针&#xff0c;虚拟机通过这个指针来确定这个对象是哪个类的实例 对象头有多大&#xff1f;在64位系统中&#xff0c;Mark Word占了8个字节&#xff0c;类型指针占了8个字节&#xff0c;一共是16个字…
阅读更多...
uniapp——第2篇：编写vue语法

uniapp——第2篇：编写vue语法

前提&#xff0c;建议先学会前端几大基础&#xff1a;HTML、CSS、JS、Ajax&#xff0c;还有一定要会Vue!&#xff08;Vue2\Vue3&#xff09;都要会&#xff01;&#xff01;&#xff01;不然不好懂 一、去哪写&#xff1f; 就在【pages】的你的人一个页面文件夹里的【.vue】文…
阅读更多...
中间件 | RPC - [Dubbo]

中间件 | RPC - [Dubbo]

INDEX 1 Dubbo 与 web 容器的关系2 注册发现流程3 服务配置3.1 注册方式 & 订阅方式3.2 服务导出3.3 配置参数 4 底层技术4.1 Dubbo 的 spi 机制4.2 Dubbo 的线程池4.3 Dubbo 的负载均衡策略4.3 Dubbo 的协议 1 Dubbo 与 web 容器的关系 dubbo 本质上是一个 RPC 框架&…
阅读更多...
计算机二级Python题目13

计算机二级Python题目13

目录 1. 基本题 1.1 基本题1 1.2 基本题2 1.3 基本题3 2. turtle画图 3. 大题 3.1 大题1 3.2 大题2 1. 基本题 1.1 基本题1 lseval(input()) s"" for item in ls:if type(item)type("香山"):s item print(s) 1.2 基本题2 import random random.se…
阅读更多...
使用tui-image-editor 图片编辑 标注图片

使用tui-image-editor 图片编辑 标注图片

需求背景&#xff1a; 鼠标悬浮在图片上 出现编辑按钮 点击编辑 对该图片进行编辑&#xff08;输入文案、涂鸦、标记、裁剪等&#xff09; 可以体验一下它线上编辑器 Image-editor | TOAST UI :: Make Your Web Delicious! 使用 首先在你的前端项目中安装&#xff1a; np…
阅读更多...
ｐｙｔｈｏｎ－在图片上标实心圆点

ｐｙｔｈｏｎ－在图片上标实心圆点

代码&#xff1a; from PIL import Image, ImageDraw# 打开图像 image_path path_to_your_image.jpg image Image.open(image_path)# 创建一个可以在上面绘图的对象 draw ImageDraw.Draw(image)# 设置圆点的坐标和颜色 x 100 # 圆点的x坐标 y 100 # 圆点的y坐标 color …
阅读更多...
【JVM】GCRoot

【JVM】GCRoot

GC root原理 通过对枚举GCroot对象做引用可达性分析&#xff0c;即从GC root对象开始&#xff0c;向下搜索&#xff0c;形成的路径称之为 引用链。如果一个对象到GC roots对象没有任何引用&#xff0c;没有形成引用链&#xff0c;那么该对象等待GC回收。 可以作为GC Roots的对…
阅读更多...
Vue命令式组件的编写与应用

Vue命令式组件的编写与应用

目录 1.引言 2.传统的组件 3.命令式组件 4.命令式组件的应用场景 1.引言 大家好&#xff01;今天我们来聊聊Vue.js中的一个有趣话题——命令式组件。你有没有觉得&#xff0c;有时候我们在Vue模板里写组件&#xff0c;就像是在玩搭积木&#xff0c;每个积木都有固定的形状…
阅读更多...
第二百零六回

第二百零六回

文章目录 1. 概念介绍2. 思路与方法2.1 实现思路2.2 实现方法 3. 示例代码4. 内容总结 我们在上一章回中介绍了"给geolocator插件提交问题的结果"相关的内容&#xff0c;本章回中将介绍自定义标题栏.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我…
阅读更多...
set与zset数据类型

set与zset数据类型

set类型基础 redis集合(set)类型和list列表类型类似&#xff0c;都可以用来存储多个字符串元素的 集合。但是和list不同的是set集合当中不允许重复的元素。而且set集合当中元素是没有顺序的&#xff0c;不存在元素下标。 redis的set类型是使用哈希表构造的&#xff0c;因此复…
阅读更多...
Java面向对象案例之描述专业和学生（4）

Java面向对象案例之描述专业和学生（4）

类的方法图 学生类&#xff1a; 属性&#xff1a;学号&#xff0c;姓名&#xff0c;年龄&#xff0c;所学习的专业方法&#xff1a;学习的方法&#xff0c;描述学习状态。描述内容包括姓名、学号、年龄、所学习的专业信息 专业类&#xff1a; 属性&#xff1a;专业编号&#xf…
阅读更多...
最新文章

Copyright @ 2022~2023