【JavaEE进阶】CSS选择器的常见用法

CSS选择器的主要功能就是选中页面指定的标签元素,选中了元素,才可以设置元素的属性。

CSS选择器主要有以下几种:

  1. 标签选择器
  2. 类选择器
  3. id选择器
  4. 复合选择器
  5. 通配符选择器

接下来用代码来学习这几个选择器的使用。

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="font32">我是⼀个div, class为font32</div>
    <div class="font32">我是⼀个div, class为font32</div>
    <div><a href="#">我是⼀个div</a></div>
    <span>我是一个span</span>
    <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>
</body>
</html>

初始的页面为:

其中超链接的颜色默认为图中颜色。

一、标签选择器

示例:

css 复制代码
span {
       color: red;
}

这里就是选择所有的span标签,设置颜色为红色。

这时的页面显示为:

可见,span标签元素的颜色变为了红色。

二、类选择器

示例:

css 复制代码
.font32 {
            color: red;
        }

选择class为font32的元素, 设置颜色为红色。

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

这是页面显示为:

三、id选择器

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

示例:

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

这是页面显示为:

四、复合选择器

示例:

css 复制代码
/*只设置 ul标签下的 li标签下的 a标签, 颜⾊为紫⾊*/
ul li a {
            color: purple;
        }
  1. 以上三个标签选择器 ul li a 中的任意, 都可以替换成类选择器, 或者id选择器, 可以是任意选择器的组合, 也可以是任意数量选择器的组合
  2. 不⼀定是相邻的标签, 也可以是"孙子"标签
  3. 如果需要选择多种标签, 可以使用逗号分割, 如 p, div { } 表示同时选中p标签和div标签.逗号前后可以是以上任意选择器, 也可以是选择器的组合.

这是页面显示为:

五、通配符选择器

示例:

css 复制代码
/* 设置⻚⾯所有元素, 颜⾊为红⾊*/
* {
 color: red;
}

这是页面如下图所示:

相关推荐
爱分享的程序员22 分钟前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘27 分钟前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出29 分钟前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的29 分钟前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解32 分钟前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端
CAD老兵35 分钟前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端
南屿im36 分钟前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript
Spider_Man36 分钟前
从零开始构建React天气应用:API集成与UI设计全指南 🌤️
前端·react.js
浩浩测试一下1 小时前
渗透信息收集- Web应用漏洞与指纹信息收集以及情报收集
android·前端·安全·web安全·网络安全·安全架构
西陵1 小时前
Nx带来极致的前端开发体验——借助CDD&TDD开发提效
前端·javascript·架构