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，一经查实，立即删除！

相关文章

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

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

第六章 Spring Cloud Alibaba Nacos之集群架构说明 文章目录 前言一、Nacos支持三种部署模式二、集群部署说明三、预备环境 前言 到目前为止&#xff0c;已经完成了对Nacos的一些基本使用和配置&#xff0c;接下来还需要了解一个非常重要的点&#xff0c;就是Nacos的集群相关的…
阅读更多...
金斗云 HKMP智慧商业软件 任意用户创建漏洞复现

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

0x01 产品简介 金斗云智慧商业软件是一款功能强大、易于使用的智慧管理系统，通过智能化的管理工具，帮助企业实现高效经营、优化流程、降低成本，并提升客户体验。无论是珠宝门店、4S店还是其他零售、服务行业，金斗云都能提供量身定制的解决方案，助力企业实现数字化转型和智…
阅读更多...
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;访客只能访问服务器 三、拓扑如下图 四、配置流程…
阅读更多...
Linux系统(Centos)下MySQL数据库中文乱码问题解决

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

问题描述&#xff1a;在进行数据库使用过程中&#xff0c;数据库里的数据中文都显示乱码。操作数据库的时候&#xff0c;会出现中文乱码问题。 解决方法如下&#xff1a; 第一步&#xff1a;打开虚拟机进入系统&#xff0c;启动MySQL。 第二步&#xff1a;连接登录MySQL输入…
阅读更多...
执行力不足是因为选择模糊

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

选择模糊&#xff1a;执行力不足的根源 选择模糊是指在面对多个选项时&#xff0c;缺乏明确的目标和方向。这种模糊感会导致犹豫不决&#xff0c;进而影响我们的执行力。 选择模糊的表现&#xff1a; 目标不明确&#xff0c;不知道应该做什么。优先级混乱&#xff0c;不清楚…
阅读更多...
分布式技术栈、微服务架构 区分

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

1.分布式技术栈 这些技术栈都是为了更好的开发分布式架构的项目。 &#xff08;大营销平台的系统框架如下图&#xff0c;扩展的分布式技术栈&#xff09; &#xff08;1&#xff09;Dubbo——分布式技术栈 DubboNacos注册中心是应用可以分布式部署&#xff0c;并且提供RPC接…
阅读更多...
Codeforces Round 955 E. Number of k-good subarrays【分治、记忆化】

Codeforces Round 955 E. Number of k-good subarrays【分治、记忆化】

E. Number of k-good subarrays 题意 定义 b i t ( x ) bit(x) bit(x) 为 x x x 的二进制表示下 1 1 1 的数量 一个数组的子段被称为 k − g o o d k-good k−good 的当且仅当&#xff1a;对于这个子段内的每个数 x x x&#xff0c;都有 b i t ( x ) ≤ k bit(x) \leq k…
阅读更多...
鸿蒙开发管理：【@ohos.account.distributedAccount (分布式帐号管理)】

鸿蒙开发管理：【@ohos.account.distributedAccount (分布式帐号管理)】

分布式帐号管理 本模块提供管理分布式帐号的一些基础功能&#xff0c;主要包括查询和更新帐号登录状态。 说明&#xff1a; 本模块首批接口从API version 7开始支持。后续版本的新增接口&#xff0c;采用上角标单独标记接口的起始版本。开发前请熟悉鸿蒙开发指导文档&#xff…
阅读更多...
自动化设备上位机设计 四

自动化设备上位机设计 四

目录 一 设计原型 二 后台代码 一 设计原型 二 后台代码 using SimpleTCP; using SqlSugar; using System.Text;namespace 自动化上位机设计 {public partial class Form1 : Form{SqlHelper sqlHelper new SqlHelper();SqlSugarClient dbContent null;bool IsRun false;i…
阅读更多...
论文翻译 | (DSP)展示-搜索-预测：为知识密集型自然语言处理组合检索和语言模型

论文翻译 | (DSP)展示-搜索-预测：为知识密集型自然语言处理组合检索和语言模型

摘要 检索增强式上下文学习已经成为一种强大的方法&#xff0c;利用冻结语言模型 (LM) 和检索模型 (RM) 来解决知识密集型任务。现有工作将这些模型结合在简单的“检索-读取”流程中&#xff0c;其中 RM 检索到的段落被插入到 LM 提示中。 为了充分发挥冻结 LM 和 RM 的…
阅读更多...
# Sharding-JDBC 从入门到精通（9）- 综合案例（二）添加商品

# Sharding-JDBC 从入门到精通（9）- 综合案例（二）添加商品

Sharding-JDBC 从入门到精通&#xff08;9&#xff09;- 综合案例&#xff08;二&#xff09;添加商品 一、Sharding-JDBC 综合案例-添加商品-dao 1、在 shopping 子工程&#xff08;子模块&#xff09;中&#xff0c;创建 dao 接口类 ProductDao.java /*** dbsharding\sh…
阅读更多...
基于深度学习LightWeight的人体姿态之行为识别系统源码

基于深度学习LightWeight的人体姿态之行为识别系统源码

一. LightWeight概述 light weight openpose是openpose的简化版本&#xff0c;使用了openpose的大体流程。 Light weight openpose和openpose的区别是&#xff1a; a 前者使用的是Mobilenet V1&#xff08;到conv5_5&#xff09;&#xff0c;后者使用的是Vgg19&#xff08;前10…
阅读更多...
哈希表——C语言

哈希表——C语言

哈希表&#xff08;Hash Table&#xff09;是一种高效的数据结构&#xff0c;能够在平均情况下实现常数时间的查找、插入和删除操作。 哈希表的核心是哈希函数&#xff0c;哈希函数是一个将输入数据&#xff08;通常称为“键”或“key”&#xff09;转换为固定长度的整数的函数…
阅读更多...
Efficient Contrastive Learning for Fast and Accurate Inference on Graphs

Efficient Contrastive Learning for Fast and Accurate Inference on Graphs

发表于:ICML24 推荐指数: #paper/⭐⭐⭐ 创新点一颗星,证明三颗星(证明的不错,值得借鉴,但是思路只能说还行吧) 如图, 本文采取的创新点就是MLP用原始节点,GCN用邻居节点的对比学习.这样,可以加快运算速度 L E C L − 1 ∣ V ∣ ∑ v ∈ V 1 ∣ N ( v ) ∣ ∑ u ∈ N ( v )…
阅读更多...
k8s 部署 springboot 项目内存持续增长问题分析解决

k8s 部署 springboot 项目内存持续增长问题分析解决

写在前面 工作中遇到&#xff0c;请教公司前辈解决&#xff0c;简单整理记忆博文内容涉及一次 GC 问题的分析以及解决理解不足小伙伴帮忙指正 &#x1f603;,生活加油 99%的焦虑都来自于虚度时间和没有好好做事&#xff0c;所以唯一的解决办法就是行动起来&#xff0c;认真做完…
阅读更多...
语音识别FBank特征提取学习笔记

语音识别FBank特征提取学习笔记

语音识别就是把一段语音信号转换成对应的文本信息&#xff0c;这一过程包括四个大的模块&#xff0c;分别是&#xff1a;特征提取、声学模型、语言模型、字典与解码。 本篇就来梳理一下特征提取模块的实现思路和方法。 常用的语音特征有&#xff1a; 梅尔频率倒谱系数&#x…
阅读更多...
学生管理系统（通过顺序表，获取连续堆区空间实现）

学生管理系统（通过顺序表，获取连续堆区空间实现）

将学生的信息&#xff0c;以顺序表的方式存储&#xff08;堆区&#xff09;&#xff0c;并且实现封装函数 &#xff1a; 1】顺序表的创建&#xff0c; 2】判满、 3】判空、 4】往顺序表里增加学生信息、 5】遍历学生信息 6】任意位置插入学生信息 7】任意位置删除学生信…
阅读更多...
0301STM32GPIO外设输出

0301STM32GPIO外设输出

STM32GPIO外设输出 STM32内部的GPIO外设GPIO简介基本结构GPIO位结构输入部分&#xff1a;输出部分&#xff1a; GPIO八种工作模式浮空/上拉/下拉输入模拟输入开漏/推挽输出复用开漏/推挽输出 手册寄存器描述GPIO功能描述外设的GPIO配置GPIO寄存器描述端口输入数据寄存器端口输出…
阅读更多...
QT入门笔记-自定义控件封装 30

QT入门笔记-自定义控件封装 30

具体代码如下: QT core guigreaterThan(QT_MAJOR_VERSION, 4): QT widgetsCONFIG c17# You can make your code fail to compile if it uses deprecated APIs. # In order to do so, uncomment the following line. #DEFINES QT_DISABLE_DEPRECATED_BEFORE0x060000 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023