深入理解 CSS 选择器:全面指南

简述:CSS(层叠样式表)选择器是网页设计和开发中至关重要的工具。它们用于选择 HTML 元素并应用样式,使得网页变得美观和具有交互性。这里来记录一下,各种 CSS 选择器及其使用方法。


一. Css各种选择器的权重

!important > 行内式 > id选择器 > 类/伪类/属性选择器 > 标签选择器  >  全局选择器    
分别对应:无穷大 > 1000 > 100 > 10 > 1 > 0         


二. 选择器类型

🟣⚫        Ⅰ. 基本选择器

1. 通配符选择器

通配符选择器 (*) 用于选择所有元素。

* {margin: 0;padding: 0;
}

2. 元素选择器

元素选择器用于选择特定类型的 HTML 元素。

p {color: blue;
}

3. 类选择器

类选择器用于选择具有特定类的元素。类名以 . 开头。

.intro {font-size: 20px;
}

4. ID 选择器

ID 选择器用于选择具有特定 ID 的元素。ID 名以 # 开头。

#header {background-color: grey;
}

🟣⚫        Ⅱ. 组合选择器

1. 后代选择器

后代选择器用于选择某元素的所有后代元素。

div p {color: green;
}

2. 子选择器

子选择器用于选择某元素的直接子元素。

ul > li {list-style-type: none;
}

3. 相邻兄弟选择器

相邻兄弟选择器用于选择紧接在某元素后的兄弟元素。

h1 + p {font-weight: bold;
}

4. 普通兄弟选择器

普通兄弟选择器用于选择某元素后所有的兄弟元素。

h1 ~ p {color: red;
}

🟣⚫        Ⅲ. 属性选择器

1. 存在属性选择器

选择具有某个属性的元素。

a[href] {text-decoration: none;
}

2. 特定属性值选择器

选择具有特定属性值的元素。

input[type="text"] {width: 200px;
}

3. 属性值以特定字符串开头的选择器

选择属性值以特定字符串开头的元素。

a[href^="https"] {color: green;
}

4. 属性值以特定字符串结尾的选择器

选择属性值以特定字符串结尾的元素。

a[href$=".pdf"] {color: red;
}

5. 属性值包含特定字符串的选择器

选择属性值包含特定字符串的元素。

a[href*="example"] {color: blue;
}

🟣⚫        Ⅳ. 伪类选择器

1. 链接伪类选择器

用于选择不同状态下的链接元素。

a:link {color: blue;
}
a:visited {color: purple;
}

2. 动态伪类选择器

用于选择鼠标与元素交互时的不同状态。

a:hover {color: red;
}
a:active {color: yellow;
}

3. 结构性伪类选择器

用于选择特定结构中的元素。

p:first-child {font-weight: bold;
}
p:last-child {font-style: italic;
}
p:nth-child(2) {text-decoration: underline;
}

🟣⚫        Ⅴ. 伪元素选择器

1. 首字母伪元素选择器

用于选择元素的首字母。

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

2. 首行伪元素选择器

用于选择元素的首行。

p::first-line {font-weight: bold;
}

3. 伪内容选择器

用于在元素的内容前后插入内容。

p::before {content: "Note: ";font-weight: bold;
}
p::after {content: " (end of paragraph)";
}

🟣⚫        Ⅵ. 高级选择器

1. 否定伪类选择器

选择不匹配某选择器的元素。

input:not([type="submit"]) {border: 1px solid black;
}
2. :nth-of-type 选择器

选择属于特定类型的第 N 个元素。

li:nth-of-type(2) {color: green;
}
3. :only-child 选择器

选择父元素中唯一的子元素。

p:only-child {font-size: 20px;
}

 🟣⚫        Ⅶ. 组合复杂选择器

你可以组合各种选择器来创建更复杂的选择规则。

div#content > p.intro::first-line {color: blue;
}


三. 所有选择器的类型,文字目录

1. 基本选择器

  • 通配符选择器
  • 元素选择器
  • 类选择器
  • ID 选择器

2. 组合选择器

  • 后代选择器
  • 子选择器
  • 相邻兄弟选择器
  • 普通兄弟选择器

3. 属性选择器

  • 存在属性选择器
  • 特定属性值选择器
  • 属性值以特定字符串开头的选择器
  • 属性值以特定字符串结尾的选择器
  • 属性值包含特定字符串的选择器

4. 伪类选择器

  • 链接伪类选择器
  • 动态伪类选择器
  • 结构性伪类选择器

5. 伪元素选择器

  • 首字母伪元素选择器
  • 首行伪元素选择器
  • 伪内容选择器

6. 高级选择器

  • 否定伪类选择器
  • :nth-of-type 选择器
  • :only-child 选择器

7. 组合复杂选择器

组合各种选择器,来创建更复杂的选择规则。

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

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

相关文章

Ansible主机清单

华子目录 管理Ansible静态清单1.定义主机清单2.两种方式定义主机清单3.使用静态主机清单指定受管主机(默认)3.1产生原因3.2静态主机清单文件本质3.3清单内容分析(不分组)3.4清单内容分析(分组)3.5通过范围简…

void *指针与其他类型指针间赋值

#include<stdio.h> int main() {int a;int *p = &a;void *z = p;char *c = z; }上面的代码编译并不一定会有报错和告警信息,但有些是需要注意的。 分析: int a;:定义了一个整型变量a。 int *p = &a;:定义了一个指向整型变量的指针p,指向变量a的地址。 void…

2024亚太杯中文赛数学建模B题完整论文讲解(含每一问python代码+结果+可视化图)

大家好呀&#xff0c;从发布赛题一直到现在&#xff0c;总算完成了2024 年第十四届 APMCM 亚太地区大学生数学建模竞赛B题洪水灾害的数据分析与预测完整的成品论文。 本论文可以保证原创&#xff0c;保证高质量。绝不是随便引用一大堆模型和代码复制粘贴进来完全没有应用糊弄人…

web服务之Nginx

web服务之Nginx &#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:Li…

将IConfiguration对象转换成一个具体的对象,以面向对象的方式来使用配置

我们倾向于将IConfiguration对象转换成一个具体的对象&#xff0c;以面向对象的方式来使用配置&#xff0c;我们将这个转换过程称为配置绑定。除了将配置树叶子节点配置节的绑定为某种标量对象外&#xff0c;我们还可以直接将一个配置节绑定为一个具有对应结构的符合对象。除此…

电脑截图的快捷键

以下是几种电脑截图的快捷键&#xff1a; Windowsshifts&#xff1a;矩形截图、任意形状截图、全屏截图&#xff08;需要安装office2010以后的版本&#xff0c;有onenote这附件&#xff09;1CtrlAltR&#xff1a;页面区域截屏CtrlAltV&#xff1a;可视页面截屏CtrlAltH&#x…

C++中的进程和线程的通信交互

一.死锁的问题 原因&#xff1a;多个进程或线程共享资源造成的一种僵持状态&#xff1a;1.竞争系统资源&#xff1b;2.进程的推进顺序不当&#xff1b; 产生的必要条件&#xff1a;1.互斥条件&#xff1b;2.请求和保持条件&#xff1b;3.不可剥夺条件&#xff1b;4.环路等待条…

【音视频 | RTSP】RTSP协议详解 及 抓包例子解析(详细而不赘述)

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…

华为开发者大会2024纪要:鸿蒙OS的全新篇章与AI大模型的革命

华为开发者大会2024纪要:鸿蒙OS的全新篇章与AI大模型的革命 在科技的浪潮中,华为再次引领潮流,2024年的开发者大会带来了一系列令人瞩目的创新成果。从鸿蒙操作系统的全新Beta版到盘古大模型的震撼发布,华为正以前所未有的速度重塑智能生态。以下是本次大会的亮点,让我们…

中英双语介绍四大会计师事务所(Big Four accounting firms)

中文版 “四大会计师事务所”&#xff08;Big Four accounting firms&#xff09;是全球最具影响力和规模最大的四家专业服务公司&#xff0c;它们在审计、税务、咨询和财务咨询等领域占据着主导地位。这四家公司分别是普华永道&#xff08;PwC&#xff09;、德勤&#xff08;…

MUNIK解读ISO26262--系统架构

功能安全之系统阶段-系统架构 我们来浅析下功能安全系统阶段重要话题——“系统架构” 目录概览&#xff1a; 系统架构的作用系统架构类型系统架构层级的相关安全机制梳理 1.系统架构的作用 架构的思维包括抽象思维、分层思维、结构化思维和演化思维。通过将复杂系统分解…

哨兵1SAR空间数据包协议数据单元文档(七)

《哨兵1SAR空间数据包协议数据单元》文档对数据包的结构进行了详细描述&#xff0c;并提供了用户数据的格式和解码算法。 原文链接: 哨兵1SAR空间数据包协议数据单元文档英文版 同系列中的其他文章篇链接: 哨兵1SAR空间数据包协议数据单元文档&#xff08;一&#xff09; 哨兵…

【Spring Cloud】Spring Cloud Gateway 中配置跨域

Spring Cloud Gateway 中配置跨域 一、代码配置方式配置跨域二、配置文件方式配置跨域 开发高并发系统时有三把利器用来保护系统&#xff1a;缓存、降级和限流。API网关作为所有请求的入口&#xff0c;请求量大&#xff0c;我们可以通过对并发访问的请求进行限速来保护系统的可…

快速上手文心一言指令:从零开始的详细指南

快速上手文心一言指令&#xff1a;从零开始的详细指南 一、引言 随着人工智能技术的不断进步&#xff0c;自然语言处理&#xff08;NLP&#xff09;已成为现代计算机科学和人工智能领域中的一个重要研究方向。它不仅在学术界取得了显著成果&#xff0c;更在实际应用中展现出巨…

lodash-es 基本使用

中文文档&#xff1a;https://www.lodashjs.com/ cloneDeep方法文档&#xff1a;https://www.lodashjs.com/docs/lodash.cloneDeep#_clonedeepvalue 参考掘金文章&#xff1a;https://juejin.cn/post/7354940462061715497 安装&#xff1a; pnpm install lodash-esnpm地址&a…

Javase-异常

文章目录 1. 异常概述2. 异常的继承结构3. 自定义异常4. 异常的处理5. 异常的使用6. finally语句块7. 方法覆盖与异常 1. 异常概述 什么是异常 ①什么是异常?有什么用? 1.Java中的异常是指程序运行时出现了错误或异常情况&#xff0c;导致程序无法继续正常执行的现象。例如&…

谷粒商城 - 树形菜单递归流查询、三级分类数据查询性能优化、Jmter 性能压测

目录 树形分类菜单&#xff08;递归查询&#xff0c;强扩展&#xff09; 1&#xff09;需求 2&#xff09;数据库表设计 3&#xff09;实现 4&#xff09;关于 asSequence 优化 性能压测 1&#xff09;Jmeter 安装使用说明 2&#xff09;中间件对性能的影响 三级分类数…

【Kubernetes】Pod 资源调度之亲和性调度

Pod 资源调度之亲和性调度 1.Node 亲和性调度1.1 Node 硬亲和性1.2 Node 软亲和性 2.Pod 亲和性调度2.1 Pod 硬亲和2.2 Pod 软亲和2.3 Pod 反亲和 Kubernetes 的 默认调度器 以 预选、优选、选定机制 完成将每个新的 Pod 资源绑定至为其选出的目标节点上&#xff0c;不过&#…

吴恩达深度学习笔记:机器学习策略(2)(ML Strategy (2)) 2.7-2.8

目录 第三门课 结构化机器学习项目&#xff08;Structuring Machine Learning Projects&#xff09;第二周&#xff1a;机器学习策略&#xff08;2&#xff09;(ML Strategy (2))2.7 迁移学习&#xff08;Transfer learning&#xff09; 第三门课 结构化机器学习项目&#xff0…

学习笔记——动态路由——IS-IS中间系统到中间系统(区域划分)

三、IS-IS区域划分 根据IS-IS路由器邻居关系&#xff0c;可以将IS-IS划分为两个区域——骨干区域和非骨干区域。&#xff08;注意&#xff0c;这里的区域不是上文中提到的Area ID&#xff09;由L2的IS-IS邻居构成的区域为骨干区域&#xff0c;由L1的IS-IS邻居构成的区域为非骨…