CSS学习（1）-选择器

news2024/11/24 7:26:16

一、基本选择器

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 的权重，大于行内样式，大于所有选择器，权重最高！

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

代码随想录 -- 回溯算法

代码随想录 -- 回溯算法

文章目录 回溯算法理论什么是回溯法回溯法的效率回溯法解决的问题理解回溯法回溯法模板 组合问题I描述题解优化 组合总和III描述题解 电话号码的字母组合描述题解 组合总和描述题解 组合总和II描述题解 分割回文串描述题解 复原IP地址描述题解 子集描述题解 子集II描述题解 递增…
阅读更多...
【JAVA】JAVA方法的学习和创造

【JAVA】JAVA方法的学习和创造

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法|MySQL| ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不…
阅读更多...
考研C语言复习进阶（2）

考研C语言复习进阶（2）

目录 1. 字符指针 2. 指针数组 3. 数组指针 3.1 数组指针的定义 3.2 &数组名VS数组名 4. 函数指针 5. 函数指针数组 6. 指向函数指针数组的指针 7. 回调函数 8.三步辗转法 9. 指针和数组笔试题解析 10. 指针笔试题 指针的主题&#xff0c;我们在初级阶段的《指…
阅读更多...
Parade Series - Web Streamer Low Latency

Parade Series - Web Streamer Low Latency

Parade Series - FFMPEG (Stable X64) 延时测试秒表计时器 ini/config.ini [system] homeserver storestore\nvr.db versionV20240312001 verbosefalse [monitor] listrtsp00,rtsp01,rtsp02 timeout30000 [rtsp00] typelocal deviceSurface Camera Front schemartsp ip127…
阅读更多...
mac启动skywalking报错

mac启动skywalking报错

这个命令显示已经成功 但是日志报错了以上内容。 然后去修改。vim .bash_profile 查看全局变量&#xff0c;这个jdk却是有2个。所以这个问题没解决。
阅读更多...
豆瓣电影信息爬取与可视化分析

豆瓣电影信息爬取与可视化分析

目录 一、项目背景 二、代码 三、总结 一、项目背景 &#xff08;1&#xff09;利用requests库采集豆瓣网分类排行榜 (“https://movie.douban.com/chart”)中各分类类别前100部电影的相关信息并存储为csv文件。 &#xff08;2&#xff09;利用获取的13个分类类别共1300部电…
阅读更多...
C#，人工智能，机器学习，聚类算法，训练数据集生成算法、软件与源代码

C#，人工智能，机器学习，聚类算法，训练数据集生成算法、软件与源代码

摘要：本文简述了人工智能的重要分支——机器学习的核心算法之一——聚类算法，并用C#实现了一套完全交互式的、可由用户自由发挥的，适用于聚类算法的训练数据集生成软件——Clustering。用户使用鼠标左键（拖动）即可生成任意形状，任意维度，任意簇数及各种数据范围的训练数…
阅读更多...
第十六个实验：FOR循环生成随机数

第十六个实验：FOR循环生成随机数

实验内容&#xff1a; 用For循环生成10个1-2之间的随机数 然后打印出来 实验步骤; 视频&#xff1a; 教学视频
阅读更多...
外卖点餐系统 |基于springboot框架+ Mysql+Java+JSP技术+Tomcat的外卖点餐系统 设计与实现(可运行源码+设计文档)

外卖点餐系统 |基于springboot框架+ Mysql+Java+JSP技术+Tomcat的外卖点餐系统 设计与实现(可运行源码+设计文档)

推荐阅读100套最新项目 最新ssmjava项目文档视频演示可运行源码分享 最新jspjava项目文档视频演示可运行源码分享 最新Spring Boot项目文档视频演示可运行源码分享 目录 前台功能效果图 骑手功能模块 商家功能模块 管理员功能登录前台功能效果图 用户功能模块 系统功能设…
阅读更多...
Dynamo PythonScript 代码速查手册By九哥

Dynamo PythonScript 代码速查手册By九哥

你好&#xff0c;这里是 BIM 的乐趣&#xff0c;我是九哥 今天给大家带来的是我的知识工程的第二套知识库&#xff0c;这套知识库不是教程&#xff0c;是一套完整的笔记&#xff0c;里面包含了大量的 Python 代码。 当然这里也没有实现太多的具体逻辑&#xff0c;单纯的是通过 …
阅读更多...
可视化软件：第一原理计算/VASP + 结构预测/USPEX

可视化软件：第一原理计算/VASP + 结构预测/USPEX

分享一篇 VASPUSPEX 的可视化软件。 感谢论文的原作者&#xff01; 主要内容 “流行的第一原理仿真代码 Vienna Ab initio Simulation Package (VASP) 和晶体结构预测 (CSP) 包、Universal Structure Predictor: Evolutionary Xtallography (USPEX) 已集成到 GDIS 可视化软件…
阅读更多...
项目分享--NO.1

项目分享--NO.1

搭建高可用的web集群.部署网站 包含数据库,ceph/nfs,haproxy,keepalived,ansible部署 1,配置ansible管理环境 创建工作目录,编写ansible配置文件,和主机清单文件,yum配置文件 将yum文件到控制机上,然后用模块上传到被管理机器上 #vim 01-upload-repo.yml --- - name: confi…
阅读更多...
【开源鸿蒙】为QEMU RISC-V虚拟平台构建OpenHarmony轻量系统

【开源鸿蒙】为QEMU RISC-V虚拟平台构建OpenHarmony轻量系统

文章目录 一、背景介绍二、准备OpenHarmony源代码三、准备hb命令3.1 安装hb命令3.2 检查hb命令 四、编译RISC-V架构的OpenHarmony轻量系统4.1 设置hb构建目标4.2 启动hb构建过程 五、问题解决5.1 hb set 报错问题解决 六、参考链接 开源鸿蒙坚果派&#xff0c;学习鸿蒙一起来&a…
阅读更多...
达梦如何备份以及导入

达梦如何备份以及导入

启动达梦服务 右键选择管理服务器 点击系统管理&#xff0c;点击配置&#xff0c;点击转换 归档配置点击归档 创建文件夹&#xff0c;选择文件夹目录点击确定 命令方式 逻辑备份与还原 逻辑导出(dexp)和逻辑导入(dimp)支持如下四种级别操作&#xff1a; 数据库级(FULL)&#…
阅读更多...
【SpringBoot】请求与响应参数 IoC与DI 总结

【SpringBoot】请求与响应参数 IoC与DI 总结

文章目录 ① —— 请求 ——一、简单参数 RequestParam1.1 参数与形参 命名相同1.2 参数与形参 命名不同 二、实体参数2.1 简单实体对象2.2 复杂实体对象 三、数组集合参数3.1 数组3.2 集合 RequestParam 四、日期参数 DateTimeFormat五、JSON参数 RequestBody六、路径参数 Pat…
阅读更多...
Vmware虚拟机使用过程中断电后无法重启处理

Vmware虚拟机使用过程中断电后无法重启处理

背景 今天在用新装的虚拟机进行测试的过程中&#xff0c;忽然笔记本关机了&#xff08;没插电源线&#xff09;&#xff0c;重启电脑后发现虚拟机提示“正在使用中“&#xff0c;具体如下所示&#xff1a; 解决 在相关虚拟机文件夹内查找以 .lck 结尾的文件&#xff0c;名称一…
阅读更多...
如何优化使用Nginx

如何优化使用Nginx

文章目录 &#x1f50a;博主介绍&#x1f964;本文内容数据压缩负载均衡安装OpenResty或ngx_http_lua_module配置Nginx以启用Lua编写Lua脚本配置upstream块以使用Lua变量测试配置 合并请求1. 确保SSI模块已启用2. 配置Nginx以使用SSI3. 使用SSI指令4. 重新加载或重启Nginx 集成…
阅读更多...
【Maven入门篇】(2)IDEA集成Maven环境的具体操作

【Maven入门篇】(2)IDEA集成Maven环境的具体操作

&#x1f38a;专栏【Maven入门篇】 &#x1f354;喜欢的诗句&#xff1a;更喜岷山千里雪 三军过后尽开颜。 &#x1f386;音乐分享【The truth that you leave】 &#x1f970;欢迎并且感谢大家指出我的问题 文章目录 &#x1f354;配置Maven环境⭐方法一&#xff08;当前工程&…
阅读更多...
选频网络与串联谐振回路

选频网络与串联谐振回路

选频网络概述 在高频电子线路中&#xff0c;常以选频网络作为负载。选频网络能选出我们需要的频率分量和滤除不需要的频率分量。 选频网络分类&#xff1a; 1、振荡回路&#xff08;由L、C组成&#xff0c;也称谐振回路&#xff09;&#xff1a;包括单振荡回路、耦合振荡回路…
阅读更多...
Java项目：58 ssm012医院住院管理系统+vue

Java项目：58 ssm012医院住院管理系统+vue

作者主页&#xff1a;源码空间codegym 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 管理员&#xff1b;首页、个人中心、医护人员管理、科室管理、病人管理、病房管理、病人信息管理、病历管理、医嘱管理、手术安排管理、药品信…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023