CSS 选择器的常见用法

我们通过代码来学习CSS选择器的使用

html 复制代码
<div class="font32">我是⼀个div, class为font32</div>
<div class="font32">我是⼀个div, class为font32</div>
<div><a href="#">我是⼀个div</a></div>
<ul>
 <li>aaa</li>
 <li>bbb</li>
 <li><a href="#">ccc</a></li>
</ul>
<ol>
 <li>1111</li>
 <li>2222</li>
 <li>3333</li>
</ol>
<button id="submit">提交</button>

1. 标签选择器

直接针对HTML的标签进行。格式:

html 复制代码
/* 选择所有的a标签, 设置颜⾊为红⾊ */
a {
 color: red;
}

/* 选择所有的div标签, 设置颜⾊为绿⾊ */
div {
 color: green;
}

2. class选择器

使用.className的形式来选择带有特定类名的元素。例如

html 复制代码
/* 选择class为font32的元素, 设置字体⼤⼩为32px */
.font32 {
 font-size: 32px;
}

一个类可以被多个标签使用,一个标签也可以使用多个类(多个类名要使用空格分割,这种做法可以让代码更好复用)

html 复制代码
/*一个类被多个标签使用*/
<p class="font32">这是一个使用 .font32 类的段落。</p>
<div class="font32">这是一个使用 .font32 类的 div。</div>


/*一个标签使用多个类*/
<p class="font32 red-text">这是一个使用 .font32 和 .red-text 类的段落。</p>

3. id选择器

使用#idName的形式来选择具有特定ID的元素。例如:

html 复制代码
/* 选择id为submit的元素, 设置颜⾊为红⾊ */
#submit {
 color: red;
}

id是唯一的,不能被多个标签使用(是和类选择器最大的区别)

4. 复合选择器

复合选择器是将多个选择器组合在一起使用,以选择特定的元素集合。这种选择器的组合可以提高选择元素的精确度,并且可以创建更具体的样式规则。

html 复制代码
/*只设置 ul标签下的 li标签下的 a标签, 颜⾊为红⾊*/
ul li a {
 color: blue;
}

1.以上三个标签选择器ul,li,a中的任意,都可以替换成类选择器,或者id选择器,可以是任意选择器的组合,也可以是任意数量选择器的组合。

2.不一定是相邻的标签,也可以是"孙子"标签。

3.如果需要选择多种标签,可以使用,分割,如p,div{ }表示同时选中p标签和div标签。逗号前后可以是以上任意选择器,也可以是选择器的组合

5. 通配符选择器

通配符选择器是CSS选择器中最简单且最常用的一种选择器,用来匹配文档中的所有元素。通配符选择器使用一个 * 表示,可以选择页面内的所有元素,并将样式应用于这些元素。

html 复制代码
/* 设置⻚⾯所有元素, 颜⾊为红⾊*/
* {
 color: red;
}
相关推荐
WeilinerL15 分钟前
泛前端代码覆盖率探索之路
前端·javascript·测试
浮游本尊19 分钟前
React 18.x 学习计划 - 第五天:React状态管理
前端·学习·react.js
-睡到自然醒~24 分钟前
[go 面试] 前端请求到后端API的中间件流程解析
前端·中间件·面试
洛卡卡了32 分钟前
Sentry 都不想接,这锅还让我背?这xx工作我不要了!
前端·架构
咖啡の猫36 分钟前
Vue 实例生命周期
前端·vue.js·okhttp
JNU freshman1 小时前
vue 之 import 的语法
前端·javascript·vue.js
剑亦未配妥1 小时前
Vue 2 响应式系统常见问题与解决方案(包含_demo以下划线开头命名的变量导致响应式丢失问题)
前端·javascript·vue.js
凉柚ˇ1 小时前
Vue图片压缩方案
前端·javascript·vue.js
慧一居士1 小时前
vue 中 directive 作用,使用场景和使用示例
前端
慧一居士1 小时前
vue 中 file-saver 功能介绍,使用场景,使用示例
前端