• 一文带你学会CSS选择器

    一文带你学会CSS选择器

    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>

    在这里插入图片描述

  • 相关阅读:
    Unity收费对谁影响最大
    一个实用批处理指令制作过程分享:Perforce更新完后打开VisualStudio再编译
    SpringBoot+Vue项目自媒体社区平台
    perf工具使用
    【Node.js】Express
    前端工程化精讲第二十一课 容器方案：从构建到部署，容器化方案的优势有哪些？
    Apache Ranger 的架构是怎样的？
    导致系统性能失败的10个原因
    用netty实现简易rpc
    “前端”工匠系列（二）：合格的工匠，怎么做好价值落地
  • 原文地址：https://blog.csdn.net/Gherbirthday0916/article/details/127111166