CSS 【详解】样式选择器（含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器）

CSS 样式选择器，用于选中页面中的 html 元素，以便添加 CSS 样式。

按渲染性能由高到低 依次是：

ID 选择器 #id

通过元素的 id 属性选中元素，区分大小写

<p id="p1" >第一段</p>

#p1{color: red;
}

但不推荐使用，因为：

  • id 选择器的优先级较高，不方便重置样式
  • id 选择器主要给 JS 使用

类选择器 .class

通过元素的 class 属性中的样式类名选中元素，区分大小写

最推荐使用的 CSS 选择器，因为类选择器语义化强，且方便重置样式。

<span class="important" >重点词汇</span>

.important{color: red;font-weight: bold;
}

同一个元素，可以添加多个样式类，用空格隔开

<span class="important big" >巨大的重点词汇</span>

.important {color: red;font-weight: bold;
}
.big {font-size: 60px;
}

标签选择器 标签名

通过元素的标签名选中元素，不区分大小写

<a href="https://www.baidu.com/" target="_blank" >百度</a>

a {text-decoration: none; /* 无文本装饰（消除默认的下划线） */
}

不推荐使用，因为标签选择器性能不佳，维护成本高

通配选择器 *

选中页面中除伪元素外的所有 html 元素，常用于清除浏览器的默认样式，但不推荐使用，因为消耗性能。

/* 清除所有html标签默认的外边距和内边距 */
* {margin: 0;padding: 0;
}

属性选择器 [属性]

根据元素的属性和属性值来选中元素，属性不区分大小写，属性值区分大小写

属性选择器描述
[attribute]用于选取带有指定属性的元素。
[attribute=value]用于选取带有指定属性和值的元素。
[attribute~=value]用于选取属性值中包含指定词汇的元素，非常适合包含多种组合属性值的场景
[attribute|=value]属性值起始片段选择器，该值必须是整个单词。
[attribute^=value]匹配属性值以指定值开头的每个元素。
[attribute$=value]匹配属性值以指定值结尾的每个元素。
[attribute*=value]匹配属性值中包含指定值的每个元素。

伪类选择器 :状态名

根据元素的不同状态来选中元素

同一个标签，不同的状态，有不同的样式，就叫做“伪类”
伪类选择器例子例子描述
:activea:active选择活动的链接。（鼠标点击标签，但是不松手时）
:checkedinput:checked选择每个被选中的<input> 元素。
:disabledinput:disabled选择每个被禁用的 <input> 元素。
:emptyp:empty选择没有子元素的每个 <p> 元素。
:enabledinput:enabled选择每个已启用的 <input> 元素。
:first-childp:first-child选择作为其父的首个子元素的每个 <p> 元素。
:first-of-typep:first-of-type选择作为其父的首个 <p> 元素的每个 <p> 元素。
:focusinput:focus选择获得焦点的 <input> 元素。
:hovera:hover选择鼠标悬停其上的链接。
:in-rangeinput:in-range选择具有指定范围内的值的 <input> 元素。
:invalidinput:invalid选择所有具有无效值的 <input> 元素。
:lang(language)p:lang(it)选择每个 lang 属性值以 “it” 开头的 <p> 元素。
:last-childp:last-child选择作为其父的最后一个子元素的每个 <p> 元素。
:last-of-typep:last-of-type选择作为其父的最后一个 <p> 元素的每个 <p> 元素。
:linka:link选择所有未被访问的链接。
:not(selector):not§选择每个非 <p> 元素的元素。
:nth-child(n)p:nth-child(2)选择作为其父的第二个子元素的每个 <p> 元素。
:nth-last-child(n)p:nth-last-child(2)选择作为父的第二个子元素的每个<p>元素，从最后一个子元素计数。
:nth-last-of-type(n)p:nth-last-of-type(2)选择作为父的第二个<p>元素的每个<p>元素，从最后一个子元素计数
:nth-of-type(n)p:nth-of-type(2)选择作为其父的第二个 <p> 元素的每个 <p> 元素。
:only-of-typep:only-of-type选择作为其父的唯一 <p> 元素的每个 <p> 元素。
:only-childp:only-child选择作为其父的唯一子元素的 <p> 元素。
:optionalinput:optional选择不带 “required” 属性的 <input> 元素。
:out-of-rangeinput:out-of-range选择值在指定范围之外的 <input> 元素。
:read-onlyinput:read-only选择指定了 “readonly” 属性的 <input> 元素。
:read-writeinput:read-write选择不带 “readonly” 属性的 <input> 元素。
:requiredinput:required选择指定了 “required” 属性的 <input> 元素。
:rootroot选择元素的根元素。
:target#news:target选择当前活动的 #news 元素（单击包含该锚名称的 URL）。
:validinput:valid选择所有具有有效值的 <input> 元素。
:visiteda:visited选择所有已访问的链接。

列表中使用伪类选择器

伪类选择器含义
li:nth-child(2)第2个 li
li:nth-child(n)所有的li
li:nth-child(2n)所有的第偶数个 li
li:nth-child(2n+1)所有的第奇数个 li
li:nth-child(-n+5)前5个 li
li:nth-last-child(-n+5)最后5个 li
li:nth-child(7n)选中7的倍数

n 表示 0,1,2,3,4,5,6,7,8…（当n小于1时无效，因为n = 0 也是不会选中的）

表格中使用伪类选择器

  • tr:nth-child(odd)：匹配表格的第1, 3, 5行，等同于tr:nth-child(2n+1)。
  • tr:nth-child(even)：匹配表格的第2, 4, 6行，等同于tr:nth-child(2n)。

  • 伪类选择器的实战范例

    • 使用 :nth-child() 实现斑马条纹、对齐边缘、指定区间列表高亮、动态列表自适应布局
      https://blog.csdn.net/weixin_41192489/article/details/122089484

    • CSS 实现动态显示隐藏（:checked 和 :target 的妙用）
      https://blog.csdn.net/weixin_41192489/article/details/126267866

    • 使用 :target 实现展开更多、收起、Tab选项卡切换https://blog.csdn.net/weixin_41192489/article/details/121969768

    • 使用 :placeholder-shown 实现MaterialDesign风格的交互
      https://blog.csdn.net/weixin_41192489/article/details/121976627

    • 使用 :placeholder-shown校验空值、提示不能为空
      https://blog.csdn.net/weixin_41192489/article/details/121977510

    • :checked 实现展开收起
      https://demo.cssworld.cn/selector/9/2-1.php

    • :checked 实现选项卡切换
      https://demo.cssworld.cn/selector/9/2-2.php

    • :checked实现自定义单选框、复选框、开关、标签复选、素材单选
      https://blog.csdn.net/weixin_41192489/article/details/122050069

    • 使用 :valid 和 :invalid 实现原生表单校验
      https://blog.csdn.net/weixin_41192489/article/details/122070084

    • 使用:required和:optional实现表单校验提示文字
      https://blog.csdn.net/weixin_41192489/article/details/122072879

    • :focus-within 实现下拉列表
      https://blog.csdn.net/weixin_41192489/article/details/121959850

    • 输入框聚焦时，高亮前方的标签（见链接内的方法5）
      https://blog.csdn.net/weixin_41192489/article/details/121784196

    • 鼠标悬浮显示放大图片 vs 鼠标点击显示放大图片
      https://blog.csdn.net/weixin_41192489/article/details/121944791

    • :empty 隐藏空元素、缺失字段智能提示
      https://blog.csdn.net/weixin_41192489/article/details/122086159

    • :only-child 实现多状态的动态加载动画
      https://blog.csdn.net/weixin_41192489/article/details/122088416

    • :fullscreen 实现点击图片全屏显示
      https://blog.csdn.net/weixin_41192489/article/details/122328725

    伪元素选择器 ::

    用于选择和样式化元素的一部分，而非整个元素

    CSS2中伪元素采用单冒号前缀语法， CSS2.1中伪元素改用双冒号前缀，所有支持双冒号的浏览器同样也支持旧的单冒号语法。考虑浏览器兼容性的话，推荐使用旧的单冒号语法，否则建议使用新的双冒号前缀

    ::before 和 ::after

    需配合content属性一起使用，用于在元素前面和后面设置内容，详见
    https://blog.csdn.net/weixin_41192489/article/details/115100040

    常用的实战范例：

    • 元素前后添加图标（::before 和 ::after 的妙用）
      https://blog.csdn.net/weixin_41192489/article/details/134858462
    • css 巧用 ::after 和 ::before 实现竖排分类导航
      https://blog.csdn.net/weixin_41192489/article/details/134885007
    • css 巧用 ::after 实现 tab 切换动效
      https://blog.csdn.net/weixin_41192489/article/details/134881852

    ::first-letter 首字母

    <p>很久很久以前</p>
<p>Long long ago</p>

    p::first-letter {font-size: 2em;color: red;
}

    在这里插入图片描述

    ::first-line 第一行

      <div style="width: 120px"><p>很久很久以前，有一个白发苍苍的老人</p></div>

    p::first-line {color: red;
}

    在这里插入图片描述

    ::selection 鼠标拖拽选中的区域

    <p>很久很久以前，有一个白发苍苍的老人</p>

    p::selection {color: red;background-color: yellow;
}

    在这里插入图片描述

    ::placeholder 文字占位符

    <input placeholder="请输入" />

    /* input 不写，则会选中页面所有元素的占位符 */
input::placeholder {color: red;
}

    在这里插入图片描述

    关系选择器

    通过元素间的关系选中元素

    子代选择器 >

    标签内包裹的第一层标签是它的子代

    <div><p>我是div的儿子</p>
</div>

    div>p{color:red;
}

    后代选择器 空格

    标签内的所有标签都是它的后代

      <div class="parent"><p class="red">我是子代（属于后代）</p><p>我是子代（属于后代，但没有 .red）</p><div><div class="red">我是孙代（也属于后代）</div></div></div>

    /* 所有属于.parent元素内部的.red元素都将被染成红色。*/
.parent .red {color: red;
}

    在这里插入图片描述

    兄弟选择器 ~

    选中同一个父元素下，在指定元素之后的所有同级元素，所以严格讲，应该叫 后面兄弟选择器

    <div><button>按钮1(不会变红)</button><p>段落</p><button>按钮2（会变红）</button>
</div>

    p ~ button {color: red;
}

    在这里插入图片描述

    CSS 没有 前面兄弟选择器 ，可以参考下方链接模拟实现
    https://blog.csdn.net/weixin_41192489/article/details/121784196

    相邻兄弟选择器 +

    选中紧跟在一个元素之后的下一个元素

      <div class="parent"><p>段落</p><button>按钮1</button><button>按钮2</button></div>

    p + button {color: red;
}

    在这里插入图片描述

    交集选择器

    选中页面中同时符合多个选择器的元素

    • 选择器之间没有空格（有空格就是后代选择器）
    • 如果存在标签选择器，标签选择器必须放在前面
        <p class="red">很久很久以前1</p><p>很久很久以前2</p>

    /* 选中 p 标签中class值含 red 的元素 */
p.red {color: red;
}

    在这里插入图片描述

    并集选择器 ,

    多个选择器中，只要满足其中一个，就会被选中

    • 多个选择器之间用 , 隔开
     <p class="error">报错信息</p><p class="important">重要信息</p><p>其他信息</p>

    .error,
.important {color: red;
}

    在这里插入图片描述

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

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

相关文章

【LinuxC语言】手撕Http之处理POST请求

【LinuxC语言】手撕Http之处理POST请求

文章目录 前言声明POST的组成读取POST信息读取消息体长度读取消息体解析消息体How to use?总结前言 在互联网的世界中，HTTP协议无疑是最重要的协议之一。它是Web的基础，支持着我们日常生活中的大部分在线活动。尽管有许多现成的库可以处理HTTP请求，但了解其底层工作原理是…
阅读更多...
全面解析：儿童编程等级考试及其区别

全面解析：儿童编程等级考试及其区别

目录 1. 前言2. 儿童编程等级考试的重要性3. 儿童编程等级考试的特点4. 儿童编程等级考试4.1 非专业级软件能力认证（CSP-J/S）4.2 GESP编程能力等级认证4.3 青少年编程能力等级测试（CPA）4.4 全国青少年软件编程等级考试4.5 全国青少年编程能力等级考试（PAAT)1. 前言 近年来…
阅读更多...
【学习笔记】Mybatis-Plus（四）：MP中内置的插件

【学习笔记】Mybatis-Plus（四）：MP中内置的插件

内置插件 目前MP已经存在的内部插件包括如下&#xff1a; 插件类名作用PaginationInnerInterceptor分页插件。可以代替以前的PageHelperOptimisticLockerInnerInterceptor乐观锁插件。用于幂等性操作&#xff0c;采用版本更新记录DynamicTableNameInnerInterceptor动态表名Te…
阅读更多...
【Rust】Cargo介绍

【Rust】Cargo介绍

一、Cargo简介 Cargo 是Rust语言的包管理工具&#xff0c;它帮助我们管理我们项目的依赖。做js开发的同学应该了解nodejs的包管理工具npm&#xff0c;Cargo和npm做的事情是一样的。C和C的同学可能对这个就比较陌生了&#xff0c;C/C语言没有统一的依赖管理工具&#xff0c;各个…
阅读更多...
Spring中常见知识点及使用

Spring中常见知识点及使用

Spring Framework 是 Java 生态系统中最流行的开源框架之一&#xff0c;它提供了一系列强大的功能&#xff0c;用于构建企业级应用。以下是一些常见的 Spring 知识点及其使用方法&#xff1a; 1. 依赖注入&#xff08;Dependency Injection&#xff09; 依赖注入是 Spring 的…
阅读更多...
【SpringCloud应用框架】Nacos集群架构说明

【SpringCloud应用框架】Nacos集群架构说明

第六章 Spring Cloud Alibaba Nacos之集群架构说明 文章目录 前言一、Nacos支持三种部署模式二、集群部署说明三、预备环境 前言 到目前为止&#xff0c;已经完成了对Nacos的一些基本使用和配置&#xff0c;接下来还需要了解一个非常重要的点&#xff0c;就是Nacos的集群相关的…
阅读更多...
【芯片制造】【问题整理】明场检测和暗场检测

【芯片制造】【问题整理】明场检测和暗场检测

背景&#xff1a; 什么是明场检测和暗场检测 主要功能&#xff1a; 1、在明场检测中&#xff0c;光源直接照射到样品表面&#xff0c;透射光或反射光被收集并成像。样品上的颗粒、划痕、凹坑会改变光的反射和透射&#xff0c;形成对比&#xff0c;能够快速扫描大面积样品。 2、…
阅读更多...
SAP - 初识

SAP - 初识

人过三十不学艺&#xff1b;活到老学到老。。。。。。 怎么说都有理&#xff0c;说不如做 低头做事&#xff0c;抬头看天 先做&#xff0c;至少了解下是个什么&#xff1f; 1. SAP是什么 https://www.sap.cn/ -- 思爱普中国 https://www.sap.cn/about/wha…
阅读更多...
金斗云 HKMP智慧商业软件 任意用户创建漏洞复现

金斗云 HKMP智慧商业软件 任意用户创建漏洞复现

0x01 产品简介 金斗云智慧商业软件是一款功能强大、易于使用的智慧管理系统，通过智能化的管理工具，帮助企业实现高效经营、优化流程、降低成本，并提升客户体验。无论是珠宝门店、4S店还是其他零售、服务行业，金斗云都能提供量身定制的解决方案，助力企业实现数字化转型和智…
阅读更多...
无人机遥控器指令加密方法

无人机遥控器指令加密方法

遥控信息的安全问题是无人机遥控系统设计和任务实施过程中最重要的问题之一。然而日益发展的电子侦察和电子对抗技术&#xff0c;使第三方可以截获已方所发送的遥控指令&#xff0c;分析和窃取遥控信息的内容&#xff0c;从而伪造遥控信息&#xff0c;对己方无人机构成严重威胁…
阅读更多...
12.x86游戏实战-汇编指令and or not

12.x86游戏实战-汇编指令and or not

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 本次游戏没法给 内容参考于&#xff1a;微尘网络安全 上一个内容&#xff1a;11.x86游戏实战-汇编指令add sub inc dec and指令是与的意思 or指令是或的意思 …
阅读更多...
MUX VLAN实现二层流量的弹性管控

MUX VLAN实现二层流量的弹性管控

一、模拟场景&#xff0c;企业有一台服务器&#xff0c;部门A&#xff0c;部门B&#xff0c;访客 二、要求&#xff1a;三者都可以访问服务器&#xff0c;部门A和B可以进行部门内部通信&#xff0c;A和B不可以通信&#xff0c;访客只能访问服务器 三、拓扑如下图 四、配置流程…
阅读更多...
计算机网络编程和并发的知识

计算机网络编程和并发的知识

OSI七层协议 OSI&#xff08;Open Systems Interconnection&#xff09;模型是一个七层的网络通信模型&#xff0c;用于标准化不同层级的网络通信。从下到上分别是&#xff1a; 物理层&#xff08;Physical Layer&#xff09;&#xff1a;负责在物理媒介上传输原始的比特流。…
阅读更多...
springcloud 面试经常被问问题

springcloud 面试经常被问问题

Spring Cloud 是一个基于 Spring Boot 的微服务架构解决方案&#xff0c;包含了许多用于构建和管理微服务的工具和框架。在面试中&#xff0c;与 Spring Cloud 相关的问题通常会涉及其核心概念、组件、常用模式和解决方案。以下是一些在 Spring Cloud 面试中经常被问到的问题及…
阅读更多...
Linux系统(Centos)下MySQL数据库中文乱码问题解决

Linux系统(Centos)下MySQL数据库中文乱码问题解决

问题描述&#xff1a;在进行数据库使用过程中&#xff0c;数据库里的数据中文都显示乱码。操作数据库的时候&#xff0c;会出现中文乱码问题。 解决方法如下&#xff1a; 第一步&#xff1a;打开虚拟机进入系统&#xff0c;启动MySQL。 第二步&#xff1a;连接登录MySQL输入…
阅读更多...
Java面试题系列 - 第4天

Java面试题系列 - 第4天

题目&#xff1a;深入理解Java泛型与类型擦除 背景说明&#xff1a;Java泛型是Java SE 5引入的一种新特性&#xff0c;它允许在编译时检查类型安全&#xff0c;并且所有的强制转换都是自动和隐式的&#xff0c;提高了代码的重用率。然而&#xff0c;Java泛型的实现背后有一个重…
阅读更多...
执行力不足是因为选择模糊

执行力不足是因为选择模糊

选择模糊&#xff1a;执行力不足的根源 选择模糊是指在面对多个选项时&#xff0c;缺乏明确的目标和方向。这种模糊感会导致犹豫不决&#xff0c;进而影响我们的执行力。 选择模糊的表现&#xff1a; 目标不明确&#xff0c;不知道应该做什么。优先级混乱&#xff0c;不清楚…
阅读更多...
Docker-12 Docker常用命令

Docker-12 Docker常用命令

一、查看docker版本信息 docker version # 查看Docker版本信息二、启动/停止docker 服务 systemctl start docker # 启动 docker 服务 systemctl stop docker # 停止 docker 服务三、镜像命令 docker images # 查看镜像 docker search 镜像名称 # 搜索镜像…
阅读更多...
分布式技术栈、微服务架构 区分

分布式技术栈、微服务架构 区分

1.分布式技术栈 这些技术栈都是为了更好的开发分布式架构的项目。 &#xff08;大营销平台的系统框架如下图&#xff0c;扩展的分布式技术栈&#xff09; &#xff08;1&#xff09;Dubbo——分布式技术栈 DubboNacos注册中心是应用可以分布式部署&#xff0c;并且提供RPC接…
阅读更多...
BOM和DOM

BOM和DOM

关于DOM、BOM和diff算法 浏览器对象模型&#xff08;Browser Object Model&#xff0c;简称BOM&#xff09;和文档对象模型&#xff08;Document Object Model&#xff0c;简称DOM&#xff09;是Web开发中的两个核心概念&#xff0c;它们都与浏览器和网页的交互有关。以下是BOM…
阅读更多...
最新文章

Copyright @ 2022~2023