CSS —— 选择器（带你深入了解如何使用选择器）

一、基础选择器基础选择器：标签（元素）选择器，类选择器，id 选择器，通配符选择器。标签选择器：html 代码中的标签，如 <html>、<body>、<h1>、<p>、<img>。p {color: red;}<p>实验楼</p>类选择器：不能是纯数字，不能是标签名。一般是 . + 对应样式描述p {color:

前端杂货铺

8014人浏览 · 2022-03-26 15:03:15

前端杂货铺 · 2022-03-26 15:03:15 发布

一、基础选择器

基础选择器：标签（元素）选择器，类选择器，id 选择器，通配符选择器。

标签选择器：html 代码中的标签，如 <html>、<body>、<h1>、<p>、<img>。

	p {
        color: red;
    }
	<p>实验楼</p>

在这里插入图片描述

类选择器：不能是纯数字，不能是标签名。一般是 . + 对应样式描述

    p {
      color: red;
    }
    .bgc{
      background-color: yellow;
    }

	<p class="bgc">实验楼</p>

在这里插入图片描述

类选择器：单个元素可以有多个类名(以空格分开多个类名的形式书写)。

    p {
      color: red;
    }
    .bgc{
      background-color: yellow;
    }
	.one{
        font-size: 50px;
    }
    
	<p class="bgc one">实验楼</p>

在这里插入图片描述

id选择器：id 是对 HTML 标签中 id 属性进行选择。选择符是 #。

    p {
      color: red;
    }
    .bgc{
      background-color: yellow;
    }
	#height{
      height: 50px;
    }
    
	<p class="bgc=" id="height">实验楼</p>

在这里插入图片描述

通配符选择器：匹配页面中所有的元素。选择符是 *

	*{
      color: red
    }
    
	<p>你好</p>
    <span>Hello</span>
    <div>CSS选择器</div>

在这里插入图片描述

二、组合选择器

组合选择器：交集选择器（标签指定式选择器），后代选择器（包含选择器），并集选择器。

交集选择器：由两个选择器构成，其中第一个必须是标签选择器，第二个为 class 选择器或 id 选择器。两个选择器之间不能有空格。

	p {
        color: red
    }
    p.one{
        background-color: skyblue;
    }

    <p>好好学习</p>
    <p class="one">你好</p>

在这里插入图片描述

后代选择器：用来选择元素或元素组的后代。写法为把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。

	.one #two p{
        color: red;
    }

    <div class="one">
      <div id="two">
        <p>天天向上</p>
      </div>
    </div>

在这里插入图片描述

子代选择器：与后代选择器相比，子元素选择器只能选择作为某个元素的子元素。子选择器使用大于号作为子结合符。

	p > strong{
        color: red;
    }

	<p>
      <strong>好好学习</strong>
    </p>
    <p>
      <em>
        <strong>天天向上</strong>
      </em>
    </p>

在这里插入图片描述

如果改成后代选择器

	p strong {
        color: red;
    }

在这里插入图片描述

子代选择器只选择指定标签的第一代子元素或者理解为它的直接后代（只指定儿子，而不管孙子），后代选择器是作用于所有子后代元素（不只儿子，还可以选择到孙子，重孙子等等）。

并集选择器：并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class 类选择器、id 选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的 CSS 样式。

	p,
    #one,
    .two{
        color: red;
    }

	<p>好好学习</p>
    <span id='one'>天天向上</span>
    <strong class='two'>冲冲冲</strong>

在这里插入图片描述

三、属性选择器

属性选择器是根据元素的属性及属性值来选择元素。
在这里插入图片描述

	p{
        color: blue;
    }
    p[title='one']{
        color: red;
    }
    p[title~='two']{
        color: green;
    }
    p[title|='three']{
        color: pink;
    }

    <p title="five">我爱学习</p>
    <p title="one">我爱吃饭</p>
    <p title="one two">我爱睡觉</p>
    <p title="three-four">我爱打游戏</p>

在这里插入图片描述

四、伪类选择器

CSS 伪类用于向某些选择器添加特殊的效果。

:link 应用于未被访问过的链接。
:hover 应用于有鼠标指针悬停于其上的元素。
:active 应用于被激活的元素，如被点击的链接、被按下的按钮等。
:visited 应用于已经被访问过的链接。

注意：顺序 L-V-H-A（link-visited-hover-active）

	a {
        color: red;
        text-decoration: none;
    }
    /*链接访问之后的状态*/
    a:visited {
        color: skyblue;
    }
    /*鼠标放到链接上显示的状态*/
    a:hover {
        color: blue;
        text-decoration: line-through;
    }
    /*链接激活的状态*/
    a:active {
        color: pink;
    }

	<a href="">好好学习</a>

五、层叠性和继承性

层叠性是指多种 CSS 样式的叠加。

!important 具有最大优先级。也就是说任何情况下，只要定义了它，它的样式最终就会被应用。

	div{
        color:red !important
    }
    div{
        color:skyblue;
    }

	<div>天天向上</div>

在这里插入图片描述

	div{
        color:red !important
    }
    div{
        color:skyblue;
    }

	<div>天天向上</div>

在这里插入图片描述

源码出现次序。

	.box2 {
        font-size: 100px;
        color: blue;
    }
    .box {
        font-size: 60px;
        color: pink
    }

	<div class='box box2'>天天向上</div>

在这里插入图片描述

注意：先定义的 box2 类样式，再定义的 box 类样式，最后显示的是 box 类中的样式。

优先级：

规则一：行内样式 > 页内样式 > 外部引用样式 > 浏览器默认样式。
规则二：important > 内联 > id > 伪类|类 | 属性选择 > 标签 > 伪对象 > 通配符 > 继承。

继承性就是指我们写 CSS 样式表的时候子元素会继承父元素的某些样式，比如文本颜色和字号。

	.demo {
        font-size: 20px;
        color: blue;
    }

	<div class="demo">
      <span>好好学习</span>
    </div>

在这里插入图片描述
想要设置一个可继承的属性，只需将它应用于父元素即可。

所有字相关的都可以继承，比如：color、text-系列、font-系列、line-系列等。
并不是所有的 CSS 属性都可以继承，例如：边框、外边距、内边距、背景、定位、元素宽高属性就不能继承。
所有盒子相关的属性都不能继承例如：a 标签，h1 标签不会实现继承。

不积跬步无以至千里不积小流无以成江海

2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

Expect脚本实战：多条件匹配与防卡死技巧

在自动化测试和系统初始化中，我们常常使用 Expect 脚本来完成一系列交互操作，比如自动输入密码、监听输出并作出响应。然而，实际项目中可能遇到多步骤输出匹配的场景：只有在先匹配到某一行输出，再匹配到另一行输出时，才需要做出响应。同时，如果 “testX failed” 出现了，但 “set params error” 没有在合理时间内出现，不要卡死，而是打印警告并继续。这个写法的问题在于：如

2048 AI社区

日常用运动 APP 记步数 | Java 保障运动数据准确统计与同步

这些硬件设备通过与 APP 的无缝连接，能够为用户提供更加个性化的运动建议，而 Java 技术则承担着数据处理和同步的重任，确保所有数据都能够精准、实时地反馈给用户。然而，由于不同设备的硬件差异，数据的精确性和一致性往往成为一个挑战。在未来，随着技术的不断创新，运动 APP 还将继续发展，结合更多的智能硬件和 AI 技术，为用户提供更全面、精准的健康数据和运动建议。通过合理利用 Java 的数据处