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.mfbz.cn/a/778763.html

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

相关文章

eclipse ide中文件编码的修改，解决中文乱码的问题。

eclipse ide中文件编码的修改，解决中文乱码的问题。

1、先上一张图&#xff1a; 记得之前设置过&#xff0c;但是稍微一变&#xff0c;环境编码又到了ISO-8859-1了&#xff0c;然后就出现了乱码。 2、设置eclipse的编码&#xff1a; Preferences--General -- Content Types -- Text -- Java Properties File -- Default encoding…
阅读更多...
要想贵人相助，首先自己得先成为贵人！

要想贵人相助，首先自己得先成为贵人！

点击上方△腾阳 关注 转载请联系授权 在金庸江湖里&#xff0c;有两位大侠&#xff0c;一个是萧峰&#xff0c;一个是郭靖。 郭靖在《射雕英雄传》里是绝对的主角&#xff0c;在《神雕侠侣》当中也是重要的配角&#xff0c;甚至可以说是第二主角。 谈起郭靖&#xff0c;很多…
阅读更多...
策略为王股票软件源代码-----如何修改为自己软件61----资讯菜单修改-----举例---------调用同花顺网页------

策略为王股票软件源代码-----如何修改为自己软件61----资讯菜单修改-----举例---------调用同花顺网页------

http://stock.sina.com.cn 将原来的新浪行情，修改为同花顺， 搜索 stock.sina.com.cn... StkUI\View\InfoView.cpp(58):char
阅读更多...
20K Stars！一个轻量级的 JS 库

20K Stars！一个轻量级的 JS 库

大家好，我是CodeQi！ 一位热衷于技术分享的码仔。 Driver.js 是一个轻量级的 JavaScript 库，旨在帮助开发人员创建网站或应用程序的引导和教程。通过 Driver.js，您可以引导用户了解网站的各个功能和使用方式。 Driver.js 提供了高度可定制的功能，使其能够适应各种需求和…
阅读更多...
【Python学习笔记】菜鸟教程Scrapy案例 + B站amazon案例视频

【Python学习笔记】菜鸟教程Scrapy案例 + B站amazon案例视频

背景前摇&#xff08;省流可以跳过这部分&#xff09; 实习的时候厚脸皮请教了一位办公室负责做爬虫这块的老师&#xff0c;给我推荐了Scrapy框架。 我之前学过一些爬虫基础&#xff0c;但是用的是比较常见的BeautifulSoup和Request&#xff0c;于是得到Scrapy这个关键词后&am…
阅读更多...
在AvaotaA1全志T527开发板上使用AvaotaOS 部署 LNMP 服务

在AvaotaA1全志T527开发板上使用AvaotaOS 部署 LNMP 服务

准备工作 在这之前&#xff0c;确保设备已经联网&#xff0c;可以用 ifconfig 命令查看联网状态。这里使用的是 WIFI 联网&#xff0c;可以看到已经获取了IP地址。 由于安装需要较长时间&#xff0c;建议使用 screen 后台登录&#xff0c;这里看到系统默认已经安装了 screen …
阅读更多...
6800和8080单片机读写时序和液晶屏接口

6800和8080单片机读写时序和液晶屏接口

前言&#xff1a; 随着单片机发展&#xff0c;集成度越来越高&#xff0c;因此目前单片机较少使用RD和WR信号操作外设&#xff0c;因此很多时候&#xff0c;变成了6800和8080单片机读写液晶屏了。早期的读写本质上是对一个地址进行即时的操作&#xff0c;现在可能是等数据送到…
阅读更多...
vue中自定义设置多语言(包括使用vue-i18n)，并且运行js脚本自动生成多语言文件

vue中自定义设置多语言(包括使用vue-i18n)，并且运行js脚本自动生成多语言文件

在项目中需要进行多个国家语言的切换时&#xff0c;可以用到下面方法其中一个 一、自定义设置多语言 方法一: 可以自己编写一个设置多语言文件 在项目新建js文件&#xff0c;命名为&#xff1a;language.js&#xff0c;代码如下 // language.js 文档 let languagePage {CN…
阅读更多...
baomidou多数据源切换注解@DS没有效果

baomidou多数据源切换注解@DS没有效果

baomidou多数据源切换注解DS没有效果 <dependency><groupId>com.baomidou</groupId><artifactId>dynamic-datasource-spring-boot-starter</artifactId><version>3.1.1</version> </dependency> ##原因 方法上有Transaction…
阅读更多...
2024年AI技术深入研究

2024年AI技术深入研究

2024年AI技术持续快速发展，应用领域广泛，产业发展迅速，市场趋势积极，学术研究深入。 AI技术进展大模型发展 2024年，智谱AI正在研发对标OpenAI Sora的高质量文生视频模型，预计最快年内发布。智谱AI的进展显示了国内AI大模型领域的快速发展，以及与国际领先技术的竞争态势…
阅读更多...
全网最详细的Appium自动化测试框架（一）环境搭建

全网最详细的Appium自动化测试框架（一）环境搭建

一、环境搭建 1、安装python3 2、安装appium-destop 3 、安装python虚拟环境 ,安装依赖库 : pip install Appium-Python-Client pip install pytest 4、安装java brew install java 配置好环境变量 5、安装 android-platform-tools &#xff08;也可以用android sdk 工…
阅读更多...
关于多人开发下git pull报错代码冲突问题的解决方案

关于多人开发下git pull报错代码冲突问题的解决方案

关于多人开发下git pull报错代码冲突问题的解决方案 问题描述 最近多人开发项目习惯性先 git pull 来更新代码的时候&#xff0c;遇到了下面的问题&#xff1a;error: Your local changes to the following files would be overwritten by merge: Please, commit your change…
阅读更多...
Zabbix触发器

Zabbix触发器

目录 触发器基础概念 创建和管理触发器 示例 定义一个触发器 在 Zabbix 中&#xff0c;触发器&#xff08;Trigger&#xff09;用于定义在监控数据满足特定条件时触发警报或动作。触发器是实现监控告警和自动响应的核心组件之一。以下是关于 Zabbix 触发器的详细解释和用法…
阅读更多...
Windows 11 安装 安卓子系统 (WSA)

Windows 11 安装 安卓子系统 (WSA)

How to Install Windows Subsystem for Android (WSA) on Windows 11 新手教程&#xff1a;如何安装Windows 11 安卓子系统 说明 Windows Subsystem for Android 或 WSA 是由 Hyper-V 提供支持的虚拟机&#xff0c;可在 Windows 11 操作系统上运行 Android 应用程序。虽然它需…
阅读更多...
解决问题：使用PageHelper.startPage和PageInfo实现分页，但是得到的total和传入的页面大小pageSize一样

解决问题：使用PageHelper.startPage和PageInfo实现分页，但是得到的total和传入的页面大小pageSize一样

我们需要的是total得到的数值是数据库里所有数据的条数。 1、包别引错 <!--PageHelper开始--><dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper-spring-boot-starter</artifactId><version>1.4.6</…
阅读更多...
c++:struct和class的区别

c++:struct和class的区别

C和C中struct的区别 (1)C中不支持成员函数&#xff08;只能通过函数指针成员变量间接支持&#xff09;&#xff0c;而C源生支持。 (2)C中不支持static成员&#xff0c;而C中支持。后面会详细讲&#xff0c;C static class是一个大知识点 (3)访问权限&#xff0c;C中默认public…
阅读更多...
2024年【金属非金属矿山（地下矿山）安全管理人员】考试报名及金属非金属矿山（地下矿山）安全管理人员模拟考试题

2024年【金属非金属矿山（地下矿山）安全管理人员】考试报名及金属非金属矿山（地下矿山）安全管理人员模拟考试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年金属非金属矿山&#xff08;地下矿山&#xff09;安全管理人员考试报名为正在备考金属非金属矿山&#xff08;地下矿山&#xff09;安全管理人员操作证的学员准备的理论考试专题&#xff0c;每个月更新的金属非…
阅读更多...
Ratf协议图解、Nacos CP集群源码分析

Ratf协议图解、Nacos CP集群源码分析

文章目录 Nacos CP集群说明Raft协议leader选举重新选举leader多个Candidate情况更新操作&#xff0c;日志复制网络分区 源码实现服务注册leader选举leader心跳包 Nacos CP集群 说明 CAP原则 C 一致性 ConsistencyA 可用性 Availability分区容错性 Partition tolerance 分区…
阅读更多...
SR-IOV学习笔记

SR-IOV学习笔记

参考&#xff1a;《深入浅出DPDK》&前人的各种博客 SR-IOV全称Single Root IO Virtualization&#xff0c;单根虚拟化(多么高大上的名字>.<)&#xff0c;是 Intel 在 2007年提出的一种基于硬件的虚拟化解决方案。 虚拟化背景 那什么又是虚拟化呢&#xff1f;抽象来…
阅读更多...
警惕AI泡沫：巨额投资与回报失衡

警惕AI泡沫：巨额投资与回报失衡

尽管高科技巨头们在AI基础设施上投入巨资&#xff0c;但AI带来的收入增长尚未显现&#xff0c;揭示了生态系统末端用户价值的重大缺口。 红杉资本分析师David Cahn认为&#xff0c;AI企业需每年赚取约6000亿美元才能抵消其AI基础设施&#xff08;如数据中心&#xff09;的成本&…
阅读更多...
最新文章

Copyright @ 2022~2023