一文带你学会CSS选择器

1.概述
2.元素选择器
3.id选择器
4.class选择器
5.后代选择器
6.群组选择器

1.概述

一个样式的语法由3部分组成，即选择器、属性和属性值

选择器，就是指用一种方式把你想要的那个元素选中。只有把它选中了，你才可以为这个元素添加CSS样式

2.元素选择器

元素选择器，就是选中相同的元素，然后对相同的元素定义同一个CSS样式

在这里插入图片描述

实例：

DOCTYPE html>
<html lang="utf-8">
<head>
    <meta charset="utf-8"/>
    <title>title>
    <style>
        div {
            color: red;
        }
    style>
head>
<body>
<div>testdiv>
<p>testp>
<span>testspan>
<div>testdiv>
body>
html>

所有div标签中的元素都被渲染为了红色：

在这里插入图片描述

3.id选择器

我们可以为元素设置一个id属性，然后针对设置了这个id的元素定义CSS样式，这就是id选择器。但要注意，在同一个页面中，是不允许出现两个相同的id的。这个与“没有两个人的身份证号相同”是一样的道理

在这里插入图片描述

对于id选择器，id名前面必须要加上前缀“#”，否则该选择器无法生效

示例：

DOCTYPE html>
<html lang="UTF-8">
<head>
    <title>title>
    <style>
        #test {
            color: red;
        }
    style>
head>
<body>
<div id="test">testdiv>
<div>testdiv>
body>
html>

在这里插入图片描述

4.class选择器

class选择器，也就是“类选择器”。我们可以对“相同的元素”或者“不同的元素”定义相同的class属性，然后针对拥有同一个class的元素进行CSS样式操作

在这里插入图片描述

class名前面必须要加上前缀英文句号（.），否则该选择器无法生效

演示：

DOCTYPE html>
<html lang="utf-8">
<head>
    <title>title>
    <style>
        .test {
            color: red;
        }
    style>
head>
<body>
<div>testdiv>
<div class="test">testdiv>
<div class="test">testdiv>
body>
html>

在这里插入图片描述

如果要为两个或多个元素定义相同的样式，建议使用class选择器，因为这样可以减少大量重复代码

5.后代选择器

后代选择器，就是选择元素内部中某一种元素的所有元素：包括子元素和其他后代元素（如“孙元素”）

在这里插入图片描述

父元素和后代元素必须要用空格隔开，表示选中某个元素内部的后代元素

DOCTYPE html>
<html lang="utf-8">
<head>
    <title>title>
    <style>
        #father1 div {
            color: red;
        }

        #father2 span {
            color: blue;
        }
    style>
head>
<body>
<div id="father1">
    <div>testdiv>
    <div>testdiv>
div>
<div id="father2">
    <p>test2p>
    <p>test2p>
    <span>test2span>
div>
body>
html>

在这里插入图片描述

#father1 div {color:red;}表示选择“id为father1的元素”下的所有div元素，然后定义它们的文本颜色为红色

#father2 span{ color:blue;}表示选择“id为father2的元素”下的所有span元素，然后定义它们的文本颜色为蓝色

6.群组选择器

群组选择器，指的是同时对几个选择器进行相同的操作

在这里插入图片描述

对于群组选择器，两个选择器之间必须要用英文逗号（,）隔开，不然群组选择器就无法生效

实例：

DOCTYPE html>
<html lang="utf-8">
<head>
    <title>title>
    <style>
        h3, div, p, span {
            color: red;
        }
    style>
head>
<body>
<h3>testh3>
<div>testdiv>
<p>testp>
<span>testspan>
body>
html>

在这里插入图片描述

相关阅读:
vue3+antd中使用Dayjs实现输出的日期格式化，和限制自定义日期选择器的可选范围
本地连接服务器 jupyter notebook
【Android】UI布局之布局（帧布局、表格布局）
【Leetcode】 131. 分割回文串
win或安卓通过内网穿透(frp)远控Mac的配置指南
【学生网页设计作业源码】基于HTML+CSS+JavaScript简单的大学生书店(13个页面) 二手书店电子商务网站模板源码
Linux操作文档——jumpserver平台系统部署与使用
java毕业设计电子存证系统mybatis+源码+调试部署+系统+数据库+lw
GitLab项目组相关操作（创建项目组Group、创建项目组的项目、为项目添加成员并赋予权限）
详解MySQL C API 相关接口(大白话就是：MySQL的c语言怎么写)

原文地址：https://blog.csdn.net/Gherbirthday0916/article/details/127111166