• 基础选择器

    一、任务目标

    掌握基础选择器的应用

    二、任务背景

    CSS（层叠样式表）选择器是CSS规则的一部分，用来指定需要设置样式的HTML元素。通过选择器可以实现CSS对HTML元素的一对一、一对多、多对一的控制。

    三、任务内容

    选择器类型

    		描述

    示例

    通配选择器通配选择器使用一个星号*表示，*会匹配所有元素* {
        color: red;
    }
    标签选择器通过标签名匹配，匹配文档中所有为此标签名的元素p {
         color: red;
    }
    id选择器通过井号#来定义id选择器，根据元素的id属性匹配（精确匹配）元素#box {
         width: 300px;
    }
    类选择器通过点.来定义类选择器，根据元素的class属性匹配（精确匹配）元素.container {
         height: 100px;
    }
    组合选择器包括四种组合方式：后代选择器、子代选择器、相邻选择器、兄弟选择器#box>.nav p {
         color: blue;
    }

    1、通配选择器

    可以与其他选择器相结合，选择某元素下的所有元素

    1. /*选择类名为box的元素的所有后代，添加一个黑色的字体颜色*/
    2. .box * { color: #000; }

    由于每个浏览器对元素的默认边距不一致，通配选择器常用于reset样式文件中，覆盖浏览器的默认样式

    1. * {
    2. 	margin: 0;
    3. 	padding: 0;
    4. 	border: 0;
    5. }

    2、标签选择器

    标签选择器也常用于reset样式文件中，用于清除元素的默认样式，如li标签的小圆点、a标签的下划线等

    3、id选择器

    id属性的属性值应当是当前文档唯一

    4、类选择器

    class属性值在文档中可以重复

    5、组合选择器

    通过间隔符将基础选择器连接起来，实现组合选择的效果

    选择器

    间隔符

    		描述
    后代选择器空格

    #box a{   }   选择 id 为box元素 内 的所有后代 a 元素(不管一级二级三级全选中)

    子代选择器> 大于号#box>a{   }   选择 box 元素 内 的所有第一级子 a 元素
    相邻选择器+ 加号#box+ul{   }   选择该元素之后与之相邻第一个 ul 元素，且两者具有相同的父元素
    兄弟选择器~ 波浪号#desc~a{   }  选择 id 为 desc 元素之后的  所有与之同层级的 a 元素

    • 例：有以下代码，选择所有类名为title的元素后的第一个

      元素，将其字体颜色改为红色，如下图所示，可使用相邻选择器选择元素设置样式

    1. // 示例代码
    2. <style>
    3.     .title + p {
    4.         color: red;
    5.     }
    6. </style>
    7. <body>
    8.     <p class="title">CSDN能力认证中心</p>
    9.     <p>C1见习能力认证</p>
    10.     <span>C4专项能力认证</span>
    11.     <p>C5全栈能力认证</p>
    12. </body>
  • 相关阅读:
    为什么Go是后端开发的未来
    飞瞳引擎™集装箱AI检测云服务，集装箱信息识别功能免费，全球顶尖AI高泛化性，正常集装箱识别率99.98%，全球2000企业用户
    ESP8266-Arduino编程实例-Si7021温度传感器驱动
    linux
    页错误异常处理(page fault)的实现
    D-Wave公开演示大规模相干量子退火
    5233: 【J1】【map】统计数字
    技术一般，如何年薪百万
    vue 两种路由模式具体实现
    JavaScript测验题回顾-刷题笔记001
  • 原文地址：https://blog.csdn.net/ssss39/article/details/127946498