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

news2024/10/6 0:30:22

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.coloradmin.cn/o/1900605.html

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

相关文章

mybatis-plus参数绑定异常

mybatis-plus参数绑定异常

前言 最近要搞个发票保存的需求&#xff0c;当发票数据有id时说明是发票已经保存只需更新发票数据即可&#xff0c;没有id时说明没有发票数据需要新增发票&#xff1b;于是将原有的发票提交接口改造了下&#xff0c;将调用mybatis-plus的save方法改为saveOrUpdate方法&#xff…
阅读更多...
Spring AOP、Spring MVC工作原理、发展演变、常用注解

Spring AOP、Spring MVC工作原理、发展演变、常用注解

Spring AOP 概念 AOP全称为Aspect Oriented Programming&#xff0c;表示面向切面编程。切面指的是将那些与业务无关&#xff0c;但业务模块都需要使用的功能封装起来的技术。 AOP基本术语 **连接点&#xff08;Joinpoint&#xff09;&#xff1a;**连接点就是被拦截到的程序执…
阅读更多...
如何在Windows 11上复制文件和文件夹路径？这里提供几种方法

如何在Windows 11上复制文件和文件夹路径？这里提供几种方法

在Windows 11上复制文件或文件夹的路径就像在右键单击菜单中选择一个选项或按键盘快捷键一样简单。我们将向你展示如何在电脑上以各种方式进行操作。 从右键单击菜单 复制文件或文件夹路径的最简单方法是在该项目的右键单击菜单中选择一个选项。你也可以使用此方法复制多个项…
阅读更多...
Golang | Leetcode Golang题解之第218题天际线问题

Golang | Leetcode Golang题解之第218题天际线问题

题目&#xff1a; 题解&#xff1a; type pair struct{ right, height int } type hp []pairfunc (h hp) Len() int { return len(h) } func (h hp) Less(i, j int) bool { return h[i].height > h[j].height } func (h hp) Swap(i, j int) { h[i], h[j]…
阅读更多...
2024年【北京市安全员-B证】报名考试及北京市安全员-B证最新解析

2024年【北京市安全员-B证】报名考试及北京市安全员-B证最新解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年北京市安全员-B证报名考试为正在备考北京市安全员-B证操作证的学员准备的理论考试专题&#xff0c;每个月更新的北京市安全员-B证最新解析祝您顺利通过北京市安全员-B证考试。 1、【多选题】《中华人民共和国安…
阅读更多...
【HICE】dns正向解析

【HICE】dns正向解析

1.编辑仓库 2.挂载 3.下载软件包 4.编辑named.conf 5.编辑named.haha 6.重启服务 7.验证本地域名是否解析
阅读更多...
一个pdf分割成多个pdf，一个pdf分成多个pdf

一个pdf分割成多个pdf，一个pdf分成多个pdf

在数字化办公和学习中&#xff0c;pdf格式因其良好的兼容性和稳定性而受到广泛欢迎。但有时候&#xff0c;我们可能需要将一个大的pdf文件分割成多个小文件&#xff0c;以便于分享、打印或编辑。今天&#xff0c;我就来教大家几种简单有效的方法&#xff0c;让你轻松实现pdf文件…
阅读更多...
Python应用开发——30天学习Streamlit Python包进行APP的构建（13）

Python应用开发——30天学习Streamlit Python包进行APP的构建（13）

st.chat_input 显示聊天输入窗口小部件。 Function signature[source]st.chat_input(placeholder="Your message", *, key=None, max_chars=None, disabled=False, on_submit=None, args=None, kwargs=None) Returns(str or None) The current (non-empty) value of…
阅读更多...
HTML【详解】表格 table 标签（table的属性，语义化表格，简易表格，合并单元格）

HTML【详解】表格 table 标签（table的属性，语义化表格，简易表格，合并单元格）

html 中的表格 <table> 由行 <tr> 组成&#xff0c;每行由单元格 <td> 组成。 所以表格是由行组成&#xff08;行由列组成&#xff09;&#xff0c;而不是由行和列组成。 table 标签 display: table &#xff0c;属于块级元素。 table 的属性 border&#…
阅读更多...
[图解]企业应用架构模式2024新译本讲解23-标识映射2

[图解]企业应用架构模式2024新译本讲解23-标识映射2

1 00:00:00,950 --> 00:00:02,890 好&#xff0c;我们往下走 2 00:00:04,140 --> 00:00:04,650 一样的 3 00:00:04,660 --> 00:00:07,170 这前面也见过了&#xff0c;定义一个对象数组 4 00:00:07,870 --> 00:00:12,820 数组的长度就是字段的数量&#xff0c;4个…
阅读更多...
2 极/2 零 （2P2Z） 补偿器

2 极/2 零 （2P2Z） 补偿器

极/2 零 &#xff08;2P2Z&#xff09; 补偿器是模拟 II 型控制器的数字实现。它是一种滤波器&#xff0c;通过考虑两个极点和一个零点&#xff0c;将特定的增益和相位升压引入系统。您必须战略性地选择每个极点和零点的频率位置&#xff0c;这将有助于实现所需的系统性能。在该…
阅读更多...
Lunaproxy与711Proxy的对比与优劣分析

Lunaproxy与711Proxy的对比与优劣分析

今天我们来深入对比两款在市场上备受关注的代理IP服务&#xff1a;Lunaproxy和711Proxy。接下来&#xff0c;我们将从多个角度对这两款服务进行详细分析&#xff0c;帮助大家做出明智的选择。 优势分析 711Proxy的优势 1. 性价比高&#xff1a;711Proxy提供多种灵活的套餐选…
阅读更多...
一款强大且免费开源的多连接数据库管理工具

一款强大且免费开源的多连接数据库管理工具

大家好&#xff0c;今天给大家分享一款免费开源的跨平台数据库管理工具DbGate。 DbGate是一款免费开源的跨平台数据库管理工具&#xff0c;支持多种数据库&#xff0c;包括MySQL、PostgreSQL、SQL Server、MongoDB、SQLite等。它可以在Windows、Linux、Mac操作系统上运行&#…
阅读更多...
Zynq系列FPGA实现SDI视频编解码+UDP以太网传输，基于GTX高速接口，提供3套工程源码和技术支持

Zynq系列FPGA实现SDI视频编解码+UDP以太网传输，基于GTX高速接口，提供3套工程源码和技术支持

目录 1、前言工程概述免责声明 2、相关方案推荐本博已有的 SDI 编解码方案本博已有的以太网方案本博已有的FPGA图像缩放方案1G/2.5G Ethernet PCS/PMA or SGMII架构以太网通信方案AXI 1G/2.5G Ethernet Subsystem架构以太网通信方案本方案的缩放应用本方案在Xilinx--Kintex系列…
阅读更多...
全面解析智慧校园行政办公的协作日程功能

全面解析智慧校园行政办公的协作日程功能

在智慧校园的行政办公生态系统中&#xff0c;协作日程功能成为促进团队互动与工作同步的桥梁&#xff0c;它超越了传统个人日程的范畴&#xff0c;强调的是集体效率与信息的无缝对接。这一功能设计的核心&#xff0c;在于创造一个开放而有序的平台&#xff0c;让教育工作者们能…
阅读更多...
开源数据科学平台Anaconda简介

开源数据科学平台Anaconda简介

开源数据科学平台Anaconda简介 零、时光宝盒 最近&#xff0c;某金融行业女性选择以跳楼的形式结束自己的生命&#xff0c;这件不幸的事情成了热门话题&#xff0c;各种猜测的都有&#xff0c;有些人评论的话真的很过分。我想起前段时间看到的&#xff0c;有个女学生跳江&#…
阅读更多...
数据的存储方式——大小端序

数据的存储方式——大小端序

大小端存储的故事源自于《格列佛游记》&#xff08;Gullivers Travels&#xff09;&#xff0c;这是爱尔兰作家乔纳森斯威夫特&#xff08;Jonathan Swift&#xff09;于1726年所著的一部讽刺小说。在其中&#xff0c;主人公格列佛&#xff08;Lemuel Gulliver&#xff09;游历…
阅读更多...
[leetcode hot 150]第一百一十七题，填充每个节点的下一个右侧节点

[leetcode hot 150]第一百一十七题，填充每个节点的下一个右侧节点

题目&#xff1a; 给定一个二叉树&#xff1a; struct Node {int val;Node *left;Node *right;Node *next; } 填充它的每个 next 指针&#xff0c;让这个指针指向其下一个右侧节点。如果找不到下一个右侧节点&#xff0c;则将 next 指针设置为 NULL 。 初始状态下&#x…
阅读更多...
测试环境：使用OpenSSL生成证书并配置Https

测试环境：使用OpenSSL生成证书并配置Https

文章目录 需求1、安装OpenSSL1.1、安装包下载1.2、安装&#xff08;以window 64位为例&#xff09;1.3、配置环境变量&#xff08;非必须&#xff09; 2、生成证书2.1、新建文件夹2.2、生成根证书2.2.1、生成私钥2.2.2、生成根证书&#xff0c;并且自签名 2.3、服务端证书生成2…
阅读更多...
2-4 Softmax 回归的从零开始实现

2-4 Softmax 回归的从零开始实现

就像我们从零开始实现线性回归一样&#xff0c; 我们认为softmax回归也是重要的基础&#xff0c;因此应该知道实现softmax回归的细节。 本节我们将使用刚刚在2-3节中引入的Fashion-MNIST数据集&#xff0c; 并设置数据迭代器的批量大小为256。 import torch from IPython impo…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023