CSS学习-选择器

一、基本选择器

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/461272.html

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

相关文章

57、服务攻防——应用协议RsyncSSHRDP漏洞批扫口令猜解

57、服务攻防——应用协议RsyncSSHRDP漏洞批扫口令猜解

文章目录 口令猜解——Hydra-FTP&RDP&SSH配置不当——未授权访问—Rsync文件备份协议漏洞——应用软件-FTP&Proftpd搭建 口令猜解——Hydra-FTP&RDP&SSH FTP&#xff1a;文本传输协议&#xff0c;端口21&#xff1b;RDP&#xff1a;windows上远程终端协议…
阅读更多...
多媒体会议系统的优势与核心组成

多媒体会议系统的优势与核心组成

随着科技的发展&#xff0c;多媒体会议系统已经成为现代商务沟通的重要工具。这种集成了多种通信和信息技术的系统&#xff0c;旨在提高会议的效率和参与度&#xff0c;具有诸多优势。本文将对多媒体会议系统进行详细的介绍和分析&#xff0c;并探讨其对现代商务沟通的影响。 …
阅读更多...
Python程序设计基础——代码习题

Python程序设计基础——代码习题

1 __name__属性 import demodef main():if __name__ __main__:print(这个程序被直接运行。)elif __name__demo:print(这个程序作为模块被使用。) main()3.3 编写程序&#xff0c;生成包含1000个0~100之间的随机整数&#xff0c;并统计每个元素出现的次数。 import randomx[r…
阅读更多...
springboot基于java的畅销图书推荐系统

springboot基于java的畅销图书推荐系统

摘 要 二十一世纪我们的社会进入了信息时代&#xff0c;信息管理系统的建立&#xff0c;大大提高了人们信息化水平。传统的管理方式对时间、地点的限制太多&#xff0c;而在线管理系统刚好能满足这些需求&#xff0c;在线管理系统突破了传统管理方式的局限性。于是本文针对这一…
阅读更多...
Springboot 整合 Elasticsearch（五）：使用RestHighLevelClient操作ES ②

Springboot 整合 Elasticsearch（五）：使用RestHighLevelClient操作ES ②

&#x1f4c1; 前情提要&#xff1a; Springboot 整合 Elasticsearch&#xff08;三&#xff09;&#xff1a;使用RestHighLevelClient操作ES ① 目录 一、Springboot 整合 Elasticsearch 1、RestHighLevelClient API介绍 1.1、全查询 & 分页 & 排序 1.2、单条件查询…
阅读更多...
PFA烧杯透明聚四氟乙烯刻度量杯

PFA烧杯透明聚四氟乙烯刻度量杯

PFA烧杯&#xff0c;刻度清晰&#xff0c;耐酸碱&#xff0c;和有机溶剂。
阅读更多...
模板进阶：非类型模板参数，特化

模板进阶：非类型模板参数，特化

一、非类型模板参数 非类型模板参数&#xff0c;就是用一个常量作为 类/函数 的模板参数&#xff0c;在 类/函数 中可以被当成常量使用。 template<class T, size_t N>// N 为一个非类型模板参数 class Stack { public:Stack(){_a new T[N];} protected:T* _a; };int m…
阅读更多...
Python环境安装及Selenium引入

Python环境安装及Selenium引入

Python环境安装 环境下载 Download Python | Python.org 环境安装 需使用管理员身份运行 查看环境是否安装成功 python --version 如果未成功则检查环境变量配置 安装 Selenium 库 pip install selenium Selenium 可以模拟用户在浏览器中的操作&#xff0c;如点击按钮、填写…
阅读更多...
Python的异常处理机制之基础代谢

Python的异常处理机制之基础代谢

try语句是Python中的异常处理机制。当我们预料到某个代码块可能会引发异常时&#xff0c;可以将这部分代码放在try语句块中。如果try语句块中的代码执行时发生异常&#xff0c;Python会跳出当前的执行流程&#xff0c;并查找是否有对应的异常处理代码。 try语句的基本语法如下…
阅读更多...
C++第五弹---类与对象(二)

C++第五弹---类与对象(二)

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】 类与对象 1、类对象模型 1.1、如何计算类对象的大小 1.2、类对象的存储方式猜测 1.3、结构体内存对齐规则 2、this指针 2.1、this指针的引出 2.2…
阅读更多...
Spring Cloud Alibab 入门搭建，包含Nacos中心，注册服务发现服务，Feign请求，GateWay网关，sentinel限流

Spring Cloud Alibab 入门搭建，包含Nacos中心，注册服务发现服务，Feign请求，GateWay网关，sentinel限流

源码在最后 一、安装Nacos注册中心 1.1查看Nacos官网&#xff0c;安装Nacos服务&#xff0c;下载源码或者安装包 1.2启动服务&#xff0c;默认端口为8848&#xff0c; 二、创建服务注册&发现 2.1使用脚手架&#xff0c;创建注册服务和发现服务项目&#xff0c;我用的版…
阅读更多...
轻松玩转消息通信：SimpleAmqpClient 和 RabbitMQ 在C++中的终极指南

轻松玩转消息通信：SimpleAmqpClient 和 RabbitMQ 在C++中的终极指南

Rabbmq服务端 安装 这里我使用docker安装rabbitmq服务端,没有安装的就先去看其他的博客安装rabbitmq或者docker #拉取rabbitmq docker pull rabbitmq:management #运行rabbitmq,记得打开防火墙端口 docker run -d --hostname rabbitsrv --name rabbit -p 5672:5672 -p 15672…
阅读更多...
【DL经典回顾】激活函数大汇总（十七）（Softmax2d附代码和详细公式）

【DL经典回顾】激活函数大汇总（十七）（Softmax2d附代码和详细公式）

激活函数大汇总&#xff08;十七&#xff09;&#xff08;Softmax2d附代码和详细公式&#xff09; 更多激活函数见激活函数大汇总列表 一、引言 欢迎来到我们深入探索神经网络核心组成部分——激活函数的系列博客。在人工智能的世界里&#xff0c;激活函数扮演着不可或缺的角…
阅读更多...
机器硬件命令

机器硬件命令

一、查看机器核数 有以下几种方法 1、lscpu命令 lscpu命令可以显示关于CPU的信息&#xff0c;包括核数、线程数等。在终端中输入以下命令即可查看CPU核数&#xff1a;该命令会输出CPU每个物理插槽的核数。 lscpu | grep "Core(s) per socket" | awk {print $NF} …
阅读更多...
zed2i录制前的准备

zed2i录制前的准备

录制前需设置文件主要有两个 文件一&#xff1a;catkin_zed/src/zed-ros-wrapper-3.8.x/zed_wrapper/params/common.yaml # params/common.yaml # Common parameters to Stereolabs ZED and ZED mini cameras ---# Dynamic parameters cannot have a namespace brightness: …
阅读更多...
力扣大厂热门面试算法题 36-38

力扣大厂热门面试算法题 36-38

36. 有效的数独&#xff0c;37. 解数独&#xff0c;38. 外观数列&#xff0c;每题做详细思路梳理&#xff0c;配套Python&Java双语代码&#xff0c; 2024.03.16 可通过leetcode所有测试用例。 目录 36. 有效的数独 解题思路 完整代码 Java Python 37. 解数独 解题思…
阅读更多...
ElementUI Message 消息提示，多个显示被覆盖的问题

ElementUI Message 消息提示，多个显示被覆盖的问题

现象截图&#xff1a; 代码&#xff1a;主要是在this.$message 方法外层加上 setTimeout 方法 <script> export default {name: "HelloWorld",props: {msg: String,},methods: {showMessage() {for (let i 0; i < 10; i) {setTimeout(() > {this.$mess…
阅读更多...
k8s-高可用etcd集群 26

k8s-高可用etcd集群 26

reset掉k8s2&#xff0c;k8s3&#xff0c;k8s4节点 清理完网络插件后重启 快速创建一个k8s集群 修改初始化文件 添加master节点 备份 查看etcd配置 启动docker 将etcd二进制命令从容器拷贝到本机 备份 查看快照状态 删除集群资源 恢复 停掉所有的核心组件 从快照恢复 重启所有…
阅读更多...
如何在CasaOS系统玩客云中安装内网穿透工具实现远程访问内网主机下载资源

如何在CasaOS系统玩客云中安装内网穿透工具实现远程访问内网主机下载资源

文章目录 1. CasaOS系统介绍2. 内网穿透安装3. 创建远程连接公网地址4. 创建固定公网地址远程访问 2月底&#xff0c;玩客云APP正式停止运营&#xff0c;不再提供上传、云添加功能。3月初&#xff0c;有用户进行了测试&#xff0c;局域网内的各种服务还能继续使用&#xff0c;但…
阅读更多...
加密算法 —— 有哪些容易入门且实用的算法？

加密算法 —— 有哪些容易入门且实用的算法？

一、背景 对于初学者来说&#xff0c;一些相对容易入门且实用的加密算法如下&#xff1a; 1. Caesar Cipher&#xff08;凯撒密码&#xff09;: - 凯撒密码是最简单的替换式加密算法之一&#xff0c;通过将字母按照固定位数向前或向后偏移来进行加密。尽管在现代安全场景下…
阅读更多...
最新文章

Copyright @ 2022~2023