CSS - 深入理解选择器的使用方式



CSS基本选择器

  1. 通配选择器
  2. 元素选择器
  3. 类选择器
  4. id 选择器

通配选择器

  • 作用:可以选中所有HTML元素。
  • 语法:
* {属性名;属性值;
}
  • 举例:
/* 选中所有元素 */
* {color: orange;font-size: 40px;
}

在清除样式方面有很大作用

元素选择器

  • 作用:为页面中_某种元素统一设置样式。_
  • 语法:
标签名 {属性名:属性值;
}
  • 举例:
h1 {color: orange;font-size: 30px;
}

例如说用该选择器对以下代码进行设置:

<h1>元素选择器会选择选定的元素进行设置效果</h1>
<p>1234</p>
<div>通配选择器</div>
<h1>测试1</h1>

得到的就是以下样式:
image.png

备注:元素选择器无法实现差异化设置,例如上面的代码中,所有的 p 元素效果都一样。

类选择器

  • 作用:根据元素的class值,进行选中元素。
  • 语法:
.类名 {属性名:属性值;
}
  • 举例:
.student{color: blue;font-size: 40px;
}

可以选中所有class为student的元素,对于 <div class="student">软件工程1班</div>来说,效果如下图:
image.png

一个元素的class可以写多个值,用空格隔开,如:<div class="student soft">软件工程1班</div>

ID选择器

  • 作用:根据元素的id属性值,来精确的选中某个元素。
  • 语法:
#id值 {属性名;属性值;
}

总结

image.png

CSS复合选择器

  1. 复合选择器建立在基本选择器之上,由多个基础选择器,通过不同的方式组合而成。
  2. 复合选择器可以在复杂结构中,快速而准确的选中元素。

交集选择器

  • 作用:选中同时符合多个条件的元素。(且)
  • 语法:选择器1选择器2选择器3 { }
  • 举例:
<style>/* 选中:类名为beauty的p元素,为此种写法用的非常多!!!! */p.beauty {color: blue;} /* 选中:类名包含rich和beauty的元素 */.rich.beauty {color: green;}
</style>color: green;
}

并集选择器

  • 作用:选中多个选择器对应的元素,又称:分组选择器。(或)
  • 语法:选择器1,选择器2,选择器3 { }
  • 举例:

一般将每一个类名都换一个行,美观

/* 选中id为peiqi,或类名为rich,或类名为beauty的元素 */#peiqi,.rich,.beauty {font-size: 40px;background-color: skyblue;width: 200px;
}

后代选择器

  • 作用:选中指定元素中,复合要求的后代元素。
  • 语法:祖先选择器 后代选择器 { } (先写祖先,再写后代)

选择器之间,用空格隔开

  • 举例:
<style>/* 选中ul中的所有li */ul li {color: red;} /* 选中ul中所有li中的a */ul li a {color: orange;} /* 选中类名为subject元素中的所有li */.subject li {color: blue;} /* 选中类名为subject元素中的所有类名为front-end的li */.subject li.front-end {color: blue;}
</style>

注意:

  1. 后代选择器,最终选择的是后代,不选中祖先。
  2. 儿子、孙子、重孙子,都算是后代。
  3. 结构一定要符合之前讲的 HTML 嵌套要求,例如:不能 p 中写 h1 ~ h6 。

子代选择器

子代选择器只能选择直接子代,即第一层子元素,不能选择更深层的子代。

  • 作用:选中指定元素中,复合要求的子元素(儿子元素)。(先写父,后写子)
  • 语法:选择器1>选择器2>选择器3 { }
  • 举例:
<style>/* div中的子代a元素 */div>a {color: red;} /* 类名为persons的元素中的子代a元素 */.persons>a {color: red;}
</style>
  1. 子代选择器,最终选择的是子代,不是父级。
  2. 子、孙子、重孙子、重重孙子 … 统称后代!,子就是指儿子。

兄弟选择器

选择的都是指定下面的兄弟

相邻兄弟选择器

  • 作用:选中指定元素后,复合条件的相邻兄弟元素。

一定是紧挨着的下一个**** (睡在我下铺的兄弟

  • 语法:选择器1+选择器2 { }
  • 示例:
/* 选中div后相邻的兄弟p元素 */
div+p {color:red;
}

通用兄弟选择器

  • 作用:选中指定元素后,符合条件的所有兄弟元素。(睡在我下铺的所有兄弟)
  • 语法:选择器1~选择器2 { }
  • 示例:
/* 选中div后的所有的兄弟p元素 */
div~p {color:red;
}

紧挨着

属性选择器

  • 作用:选中属性值符合一定要求的元素
  • 语法:
    1. [属性名] 选中具有某个属性的元素。
    2. [属性名=“值”] 选中包含某个属性,且属性值等于指定值的元素。
    3. [属性名^=“值”] 选中包含某个属性,且属性值以指定的值开头的元素。
    4. [属性名$=“值”] 选中包含某个属性,且属性值以指定的值结尾的元素。
    5. [属性名*=“值”] 选择包含某个属性,属性值包含指定值的元素。
  • 举例:
<style>/* 选中具有title属性的元素 */[title]{color:red;}/* 选中title属性值为atguigu的元素 */[title="atguigu"]{color:red;}/* 选中title属性值以a开头的元素 */[title^="a"]{color:red;}/* 选中title属性值以u结尾的元素 */[title$="u"]{color:red;}/* 选中title属性值包含g的元素 */[title*="g"]{color:red;}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/41553.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JAVA基础知识(下)

一、String相关面试题 1. 为什么 String 在 java 中是不可变的? - 如果不是不可变的&#xff1a;这种情况根本不可能&#xff0c;因为在字符串池的情况下&#xff0c;一个字符串对象/文字&#xff0c;例如 “Test” 已被许多参考变量引用&#xff0c; 因此如果其中任何一个更…

ubuntu下载Nginx

一、Nginx下载安装&#xff08;Ubuntu系统&#xff09; 1.nginx下载 sudo apt-get install nginx2.nginx启动 启动命令 sudo nginx重新编译(每次更改完nginx配置文件后运行&#xff09;&#xff1a; sudo nginx -s reload3.测试nginx是否启动成功 打开浏览器访问本机80端口…

小酌消烦暑|人间正清欢

小暑是二十四节气之第十一个节气。暑&#xff0c;是炎热的意思&#xff0c;小暑为小热&#xff0c;还不十分热。小暑虽不是一年中最炎热的时节&#xff0c;但紧接着就是一年中最热的节气大暑&#xff0c;民间有"小暑大暑&#xff0c;上蒸下煮"之说。中国多地自小暑起…

openssh版本升级实战(修补ssh漏洞)基于RedHat8.4版本测试--已成功升级

升级前具有漏洞的的版本 通过命令查看目前系统的ssh和sshd版本&#xff1a; ssh -V sshd -V 注意&#xff1a;由于ssh是远程连接服务器的功能&#xff0c;在进行下面操作升级openssh前&#xff0c;请打开多个连接会话保持&#xff0c;如升级失败&#xff0c;可通过已连接的会话…

antd实现简易相册,zdppy+vue3+antd实现前后端分离相册

前端代码 <template><a-image:preview"{ visible: false }":width"200"src"http://localhost:8889/download/1.jpg"click"visible true"/><div style"display: none"><a-image-preview-group:previe…

粤港澳大湾区人工智能资本对接会”成功举办!

为促进惠州仲恺高新区人工智能产业的发展&#xff0c;推动惠深两地产业资源深度协同与合作&#xff0c;也为吸引更多的优质项目与投融资机构为惠州仲恺高新区产业发展注入动力&#xff0c;加速深圳人工智能相关产业资源落地仲恺。2024年06月26日&#xff0c;由仲恺高新区科技创…

GNU/Linux - wic文件的使用

Yocto/OpenEmbedded使用的磁盘镜像格式是 wic。为嵌入式系统提供 bootable images。 The disk image format used in the Yocto Project is wic. .wic 文件显然只是一个带有分区表和分区的磁盘镜像&#xff0c;就像下载 Linux 发行版时获得的所有 .img 文件一样。这就是为什么你…

Laravel配置宝典:探索配置文件的深度使用

标题&#xff1a;Laravel配置宝典&#xff1a;探索配置文件的深度使用 Laravel框架的配置文件是管理应用设置的强大工具&#xff0c;它们使得开发者能够轻松地调整应用的行为&#xff0c;而无需修改代码。这些配置文件以PHP数组的形式存储&#xff0c;易于理解和修改。本文将详…

UE5 视频播放(自动播放和自动清除MediaTexture)

媒体播放器的打开时播放和媒体纹理的自动清除 。 在UE5开发视频播放时&#xff0c;遇到了闪帧的现象。合理选择这两个功能可解决。

小阿轩yx-LVS+Keepalived群集

小阿轩yx-LVSKeepalived群集 Keepalived 双机热备份基础知识 起初是专门针对 LVS 设计的一款强大的辅助工具主要用来提供故障切换(Failover)和健康检査(HealthChecking)功能—判断LVS 负载调度器、节点服务器的可用性当 master 主机出现故障及时切换到backup 节点保证业务正常…

动手学深度学习(Pytorch版)代码实践 -循环神经网络-51序列模型

51序列模型 import torch from torch import nn from d2l import torch as d2l import matplotlib.pyplot as pltT 1000 # 总共产生1000个点 time torch.arange(1, T 1, dtypetorch.float32) x torch.sin(0.01 * time) torch.normal(mean0, std0.2, size(T,)) d2l.plot(…

ERROR | Web server failed to start. Port 8080 was already in use.

错误提示&#xff1a; *************************** APPLICATION FAILED TO START ***************************Description:Web server failed to start. Port 8080 was already in use.Action:Identify and stop the process thats listening on port 8080 or configure thi…

Swagger的原理及应用详解(九)

本系列文章简介&#xff1a; 在当今快速发展的软件开发领域&#xff0c;特别是随着微服务架构和前后端分离开发模式的普及&#xff0c;API&#xff08;Application Programming Interface&#xff0c;应用程序编程接口&#xff09;的设计与管理变得愈发重要。一个清晰、准确且易…

2024年特种设备(电梯作业)题库考试题库

1.直接作用式液压电梯轿厢与柱塞&#xff08;缸筒&#xff09;之间的连接应为&#xff08;&#xff09;。 A.刚性连接 B.固定连接 C.法兰连接 D.挠性连接 答案&#xff1a;D 2.正常情况下&#xff0c;当电磁式继电器线圈得电时&#xff0c;其常开触点将&#xff08;&…

Al Native应用中的模型微调

在AI Native应用中进行模型微调是一项关键的技术步骤&#xff0c;它允许预训练模型更好地适应特定的任务或数据集。为了更深入地理解AI Native应用中的模型微调&#xff0c;下面将从不同方面进行详细探讨&#xff1a; 微调过程的关键步骤 数据准备&#xff1a;微调开始之前&…

二进制求和、字符串相加-sting类题型

67. 二进制求和 - 力扣&#xff08;LeetCode&#xff09; 两个题目方法完全一样 用两个数据的末尾位相加&#xff0c;从末尾位开始逐位相加&#xff0c;记录进位&#xff1b; class Solution { public:string addBinary(string a, string b) {int end1 a.size() - 1;int end…

人工智能在招投标领域的运用---监控视频连续性检测

作者&#xff1a;舒城县公共交易中心 zhu_min726126.com 原创&#xff0c;转载请注明出处。 摘要 随着人工智能&#xff08;AI&#xff09;技术的飞速发展&#xff0c;其在各个领域的应用日益广泛。本文旨在探讨人工智能在招投标领域的运营&#xff0c;重点介绍AI对视频完整…

ASUS/华硕飞行堡垒9 FX506H FX706H系列 原厂win10系统 工厂文件 带F12 ASUS Recovery恢复

华硕工厂文件恢复系统 &#xff0c;安装结束后带隐藏分区&#xff0c;一键恢复&#xff0c;以及机器所有驱动软件。 系统版本&#xff1a;Windows10 原厂系统下载网址&#xff1a;http://www.bioxt.cn 需准备一个20G以上u盘进行恢复 请注意&#xff1a;仅支持以上型号专用…

昇思25天学习打卡营第18天|Pix2Pix实现图像转换

Pix2Pix概述 Pix2Pix是基于条件生成对抗网络实现的一种深度学习图像转换模型。Pix2Pix是将cGAN应用于有监督的图像到图像翻译&#xff0c;包括生成器和判别器。 基础原理 cGAN的生成器是将输入图片作为指导信息&#xff0c;由输入图像不断尝试生成用于迷惑判别器的“假”图像…

Python异步编程技术详解:async、await、yield和anext

Python异步编程技术详解:async、await、yield和anext 1. async和await2. yield3. anext4. StopAsyncIteration5. 综合示例:异步聊天机器人总结 异步编程是Python中一种强大的并发编程模式,可以显著提高I/O密集型应用的性能。本文将详细介绍Python中的几种重要的异步编程技术,包…