• 一文带你学会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>

    在这里插入图片描述

  • 相关阅读:
    coctx_swap.S源码阅读
    【Android】Android apk 逆向编译
    【Linux】部署单体项目以及前后端分离项目（项目部署）
    基于DdddOcr通用验证码离线本地识别SDK搭建个人云打码接口Api
    [附源码]java毕业设计渔具店管理系统
    【CH559l单片机入门篇】通过串口打印内部ID信息
    《虹口区促进元宇宙产业发展的试行办法》的通知
    部署OKR需要克服的四大难关
    判断过/欠拟合和学习率
    Docker远程API漏洞
  • 原文地址：https://blog.csdn.net/Gherbirthday0916/article/details/127111166