CSS 选择器知识点总结

这篇文章的内容是 CSS 的选择器,这是写页面样式的第一步,知道 CSS 有哪些选择器是每个前端工程师必会的内容之一。

一、什么是 CSS 中的选择器?

CSS 中的选择器用于选择要应用样式的 HTML 元素。选择器是 CSS 中的关键部分,允许你精确地定位和样式化特定的元素或元素组。

二、常见的 CSS 选择器及其用法:

1.元素选择器(Element Selector):选择特定的 HTML 元素类型。例如,要选择所有段落元素,使用 p 选择器:

p {/* 样式规则在这里 */
}

2.类选择器(Class Selector):选择具有特定类名的元素。类选择器以点 . 开头,后面跟类名。例如,要选择所有类名为 "highlight" 的元素,使用 .highlight 选择器:

.highlight {/* 样式规则在这里 */
}

3.ID 选择器(ID Selector):选择具有特定 ID 的元素。ID 选择器以井号 # 开头,后面跟元素的 ID。注意,每个页面应该只有一个具有唯一 ID 的元素。例如,要选择 ID 为 "header" 的元素,使用 #header 选择器:

#header {/* 样式规则在这里 */
}

4.后代选择器(Descendant Selector):选择元素的后代元素。后代选择器使用空格分隔元素。例如,要选择所有 <ul> 元素内部的 <li> 元素,使用 ul li 选择器:

ul li {/* 样式规则在这里 */
}

5.直接子元素选择器(Child Selector):选择元素的直接子元素。直接子元素选择器使用 > 符号。例如,要选择< div> 元素的直接子元素 <p>,使用 div > p 选择器:

div > p {/* 样式规则在这里 */
}

6.通用选择器(Universal Selector):选择页面上的所有元素。通用选择器使用 * 符号。例如,要选择页面上的所有元素,使用 * 选择器:

* {/* 样式规则在这里 */
}

7.伪类选择器(Pseudo-class Selector):选择元素的特定状态或位置。伪类选择器以冒号 : 开头。例如,选择所有链接元素的悬停状态,使用 a:hover 选择器:

a:hover {/* 样式规则在这里 */
}

8.伪元素选择器(Pseudo-element Selector):选择元素的特定部分,如首字母或最后一个行。伪元素选择器以双冒号 :: 开头。例如,选择段落的首字母,使用 p::first-letter 选择器:

p::first-letter {/* 样式规则在这里 */
}

这些是 CSS 的常用选择器,将这些选择器组合起来使用,或者是嵌套使用可以改变选择器的权重。

三、CSS 选择器的优先级

CSS 选择器的优先级决定了当多个规则应用于同一元素时,哪个规则的样式将被应用。优先级是由选择器的特定性(specificity)和源代码中的顺序(source order)共同决定的。以下是关于优先级的详细内容:

1.特定性(Specificity):特定性是一个用于衡量选择器权重的值,它由四个部分组成:a、b、c 和 d,它们的值分别代表以下内容:

a:内联样式(在元素的 style 属性中定义的样式)的数量(权重值最高,值为1000)。

b:ID 选择器的数量(权重值为100)。

c:类选择器、属性选择器和伪类选择器的数量(权重值为10)。

d:元素选择器和伪元素选择器的数量(权重值为1)。

e: 通配符选择器(权重值为0)

上述选择器的优先级:a > b > c > d > e

p { /* a=0, b=0, c=1, d=1 */color: red;
}
#header { /* a=0, b=1, c=0, d=0 */background-color: blue;
}
.header { /* a=0, b=0, c=1, d=0 */font-size: 16px;
}

2.源代码顺序(Source Order):如果多个规则的特定性相同,那么后面出现的规则将覆盖先前的规则。这意味着在样式表中后面定义的规则将具有更高的优先级。

p {color: red; /* 这个规则首先出现 */
}p {color: blue; /* 这个规则后出现,将覆盖上一个规则 */
}

3.重要性(!important):如果在规则中使用了 !important,它将覆盖特定性和源代码顺序,成为最高优先级。但是记得不可滥用 !important,因为它会增加代码的维护难度。

p {color: red !important; /* 具有最高优先级 */
}

3.继承性(Inheritance):没有特定性或源代码顺序的概念,但需要注意的是某些样式属性具有继承性,例如字体属性,它们可以从父元素继承到子元素。

以上就是关于 CSS 选择器的内容了,希望今天的内容对初学前端的朋友有所帮助。也希望每一个初学者都能成为一个优秀的前端开发工程师,加油。

最后啰嗦一句,好记性不如烂笔头,希望大家在学习的过程中养成做笔记的习惯,形成自己的知识体系。

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

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

相关文章

论文辅助笔记:Tempo之modules/prompt.py

1 get_prompt_param_cls 2 get_prompt_value 3 Prompt 类 3.1 _init_weights 3.2 forward

Spring Security Oauth2 JWT 添加额外信息

目录 一、问题描述 二、实现步骤 1、自定义TokenEnhancer 2、配置授权服务器 3、自定义UserDetails的User类 三、参考文档 一、问题描述 Oauth2里默认生成的JWT信息并没有用户信息&#xff0c;在认证授权后一般会返回这一部分信息&#xff0c;我对此进行了改造。 Oauth…

CC工具箱使用指南:【按属性分割成SHP】

一、简介 Arcgis中有一个【按属性分割】的工具&#xff0c;可以将要素类按字段值分割成多个gdb要素类&#xff0c;也可以分割成多个SHP要素。 这个工具是在【按属性分割】工具的基础上做了一个强化&#xff0c;可以将分割出来的SHP要素分别放在独立的文件夹内。 实际工作中&…

Java | Leetcode Java题解之第70题爬楼梯

题目&#xff1a; 题解&#xff1a; public class Solution {public int climbStairs(int n) {double sqrt5 Math.sqrt(5);double fibn Math.pow((1 sqrt5) / 2, n 1) - Math.pow((1 - sqrt5) / 2, n 1);return (int) Math.round(fibn / sqrt5);} }

爬虫工具:避免复制文字收费,VIP。。

step ctrl shift i 打开开发者工具 点击...打开设置勾选禁用JavaScript Principle 事件处理&#xff1a;JavaScript 用于处理用户交互&#xff0c;例如点击、滚动、输入等禁用 JavaScript 后&#xff0c;页面上的所有 JavaScript 代码都将不会执行

go语言数据类型转换

go语言数据类型转换 golang不会对数据进行隐式的类型转换&#xff0c;只能手动去执行转换操作&#xff0c;表达式T(v)将值v转换为类型T T : 就是数据类型 V : 就是需要转换的变量一、数值类型转换 数值间转换的时候建议从小范围转换成大范围&#xff0c;比如int8转int16&…

深入理解Java泛型

Java泛型是在JDK 5中引入的一个强大的特性&#xff0c;它允许开发者在编译时提供类型安全的集合操作。泛型的本质是参数化类型&#xff0c;即在类或方法中使用一个或多个类型形参来定义&#xff0c;然后在创建类实例或调用方法时传入具体的类型参数。 泛型的基本使用 泛型的基…

学习网络安全 你必须要学会的20款工具

工欲善其事必先利其器&#xff0c;在新入门网络安全的小伙伴而言。这些工具你必须要有所了解。本文我们简单说说这些网络安全工具吧&#xff01; Web安全类 Web类工具主要是通过各种扫描工具&#xff0c;发现web站点存在的各种漏洞如sql注入、xss等。从而获取系统权限&#xf…

C# 中 有两种常见的类型转换方式:显式转换和 as 运算符

在 C# 中&#xff0c;有两种常见的类型转换方式&#xff1a;显式转换和as 运算符。它们用于在不同类型之间进行转换。以下是对这两种转换方式的详细解释和示例说明&#xff1a; 显式转换&#xff1a;显式转换是通过使用转换操作符&#xff08;如 (typeName)value&#xff09;将…

Pytorch实现扩散模型【DDPM代码解读篇1】

本篇内容属于对DDPM 原理-代码 项目的解读。 具体内容参考一篇推文&#xff0c;里面对DDPM讲解相对细致&#xff1a; 扩散模型的原理及实现&#xff08;Pytorch&#xff09; 下面主要是对其中源码的细致注解&#xff0c;帮助有需要的朋友更好理解代码。 目录 ConvNext块 正…

IoTDB 入门教程 基础篇⑦——数据库管理工具 | DBeaver 连接 IoTDB

文章目录 一、前文二、下载iotdb-jdbc三、安装DBeaver3.1 DBeaver 下载3.2 DBeaver 安装 四、安装驱动五、连接数据库六、参考 一、前文 IoTDB入门教程——导读 二、下载iotdb-jdbc 下载地址org/apache/iotdb/iotdb-jdbc&#xff1a;https://maven.proxy.ustclug.org/maven2/o…

stamps做sbas-insar,时序沉降图怎么画?

&#x1f3c6;本文收录于「Bug调优」专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收藏&&…

【人工智能Ⅱ】实验5:自然语言处理实践(情感分类)

实验5&#xff1a;自然语言处理实践&#xff08;情感分类&#xff09; 一&#xff1a;实验目的与要求 1&#xff1a;掌握RNN、LSTM、GRU的原理。 2&#xff1a;学习用RNN、LSTM、GRU网络建立训练模型&#xff0c;并对模型进行评估。 3&#xff1a;学习用RNN、LSTM、GRU网络做…

AST原理(反混淆)

一、AST原理 jscode var a "\u0068\u0065\u006c\u006c\u006f\u002c\u0041\u0053\u0054";在上述代码中&#xff0c;a 是一个变量&#xff0c;它被赋值为一个由 Unicode 转义序列组成的字符串。Unicode 转义序列在 JavaScript 中以 \u 开头&#xff0c;后跟四个十六进…

机器学习笔记 - Python数据清理通用流程简述

一、简述 Python中数据清理是重要的环节,并通过解决缺失值、离群值、重复和不一致等常见问题以进行下一步的数据分析。 通常我们开始一个新的数据项目时,通因为各种各样的问题,通常获得的数据很少能直接上到模型里面去跑,所以要进行清理,清理数据是一个消除错误、异常值和…

centos 杀死一个进程又启动了

在CentOS中&#xff0c;如果一个进程被杀死后又自动启动&#xff0c;可能是由于系统服务管理器&#xff08;如systemd或init&#xff09;配置了该进程的重启。以下是检查和处理这种情况的方法&#xff1a; 查找启动脚本&#xff1a; 使用systemctl查找服务文件&#xff1a;syst…

flink mysql数据表同步API CDC

概述&#xff1a; CDC简介 Change Data Capture API CDC同步数据代码 package com.yclxiao.flinkcdcdemo.api;import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONObject; import com.ververica.cdc.connectors.mysql.source.MySqlSource; import com.verv…

Python学习笔记------json

json简介 JSON是一种轻量级的数据交互格式。可以按照JSON指定的格式去组织和封装数据 JSON本质上是一个带有特定格式的字符串 主要功能&#xff1a;json就是一种在各个编程语言中流通的数据格式&#xff0c;负责不同编程语言中的数据传递和交互 为了让不同的语言能够相互通…

【12575嵌入式系统】嵌入式系统考前复习题终结版期末复习自考复习

一、 填空题 1. 嵌入式系统是以应用为中心&#xff0c;以计算机技术为基础&#xff0c;软件硬件可裁剪&#xff0c;适应应用系 统 对 功 能 、 可 靠 性 、 成 本 、 体 积 、 功 耗 严 格 要 求 的 专 用 计 算 机 系统。 2. 请 列 举 2 个 嵌 入 式 实 时 操 作 系 统 &…

Python实战开发及案例分析(2)——单目标优化

在Python中&#xff0c;进行单目标优化主要涉及定义一个优化问题&#xff0c;包括一个目标函数和可能的约束条件&#xff0c;然后选择合适的算法来求解。Python提供了多种库&#xff0c;如SciPy、Pyomo、GEKKO等&#xff0c;用于处理各种优化问题。 案例分析&#xff1a;使用 …