CSS3------CSS选择器

news2024/9/23 9:26:24
       界面中的 “ 超文本 “ 本质上就是通过一个一个矩形盒子包起来，然后进行排版组合，那么接下来要详细研究这个标签盒子的细节结构，以帮助学习如何使用它，但是在开始研究它之前，我们先来了解一个概 念，选择器的概念。 
<div style="width:100px;height:100px;backgorund-color:red"></div>
把写在标签开始标签内部 style 属性中的样式，称为一个标签的行间样式。
使用行间样式编写代码，维护性很差，试想一个场景，文档中一行上面的代码，可以在页面中生成一个 矩形盒子，如果需要生成 1000 个，该怎么办？答案是把代码复制 1000 次，有人说这并不麻烦，但如果现 在客户需求改了，要求所有但盒子宽度都改成 200px 像素，那么你还觉得简单吗？ 
<html>
<head>
<!--
内部样式表，将写在行间的样式提取出来，写在一对style标签中，并且用花括号括起来。
如何让浏览器知道，这个三个样式是给哪个标签设置的呢？
这就需要在第一个{}前加一个“特殊标识”来告诉浏览器，花括号中的样式是给哪个标签设置的。
特殊标识的作用：就是在样式表中，选中标签，设置样式。因此将这个特殊标识称为 “选择器”
-->
<style>
特殊标识 {
width:100px;
height:100px;
background:red;
}
</style>
</head>
<body>
<div>显示内容</div>
</body>
</html>

基本选择器

标签选择器
以标签名称作为选择器选中标签 “ 标签名 :{ 样式 }” 
<style>
/* h1实际上就是标签名称，这个选择器就是标签选择器 */
h1 {
color: red; /*设置文本颜色为红色 */
font-fize: 14px; 设置字体大小
font-family: 'Courier New',Courier, monspace; 设置显示所使用的字体
font-weight: bold; 加粗显示
}
</style>
标签选择器特点 : 能够为一群具有相同名称的标签，同时设置相同的样式
Id 选择器，一般在一个页面中 id 值不允许重复
id 选择器是通过给标签设置 id 属性，在样式表中通过 #id{ 样式 } 对标签设置样式，相当于一个人的身份证号 
<style>
/* #bb对应的是标签上的id属性值，按照id查找对应的标签，这个选择器就是id选择器 */
#bb {
color: red;
}
#box1{
width:100px;
height:100px;
background-color:red;
}
</style>
<h1 id="bb">主要标题</h1>
<div id="box1"></div>
id 选择器特点 :
  • 有且只能有一个，不能重名，不能有多个
  • 一般不使用id选择器设置样式
ps ：其他选择器都将是三大基本选择器的一个组合
class 类型选择器，可以选择一组标签，这组标签可以是不同类型的标签，例如 p h1 等。在标签内部通过
class 属性，给标签设置类型名在样式表中通过 . 类型名 { 样式 } 的方式给标签盒子设置样式 
<style>
/* .bb对应的是不同标签上的class属性值，按照class属性值查找一组对应的标签，这个选择器就是class选择器 */
.bb {
color: red;
}
.box{
width:100px;
height:100px;
background-color:red;
}
.box1{
background-color:blue;
}
</style>
<h1 class="bb">主要标题</h1>
<div class="box"></div>
<div class="box"></div>
<div class="box box1"></div>
类型 class 选择器特点：
  • 相当于给标签起了一个别名
  • 不同盒子可以有相同的class属性名，因此类型选择器可以给多个标签同时设置相同样式
  • 同一盒子可以有多个class属性名，在文档中以空格隔开，因此同一个盒子的样式是多个选择器叠加的结果
* 通用选择器，选择当前页面中的所有标签 
<p>段落</p>
<b>加粗</b>
<span>无</span>
<style>
/* 这里的*表示当前页面中的任何标签 */
* {
border: 1px solid red;
}
</style>
通用选择器会将所有元素匹配并配置样式，这是把双刃剑，好处就是非常方便，坏处就是将不必要的元素也配置了。目前为止，还不存在所有元素都必须配置的样式，所以，一般来说，不常用
伪类选择器：前面是标签选择器，后面类选择器 div.dd{}
典型的伪类选择器，例如链接标签的使用
  • a:link 链接的颜色
  • a:visited 已访问的链接颜色
  • a:hover 鼠标经过时的颜色
  • a:active 当访问时的颜色

注：已上顺序不可打乱  

ID选择器和类选择器

  • ID选择器不可以重名，类选择器可以
  • ID选择器在样式表里必须以 # 开头，类选择器在样式表里以 . 开头

选择器优先级

选择器优先级问题，是指当多个选择器选中一个标签，设置相同的样式时谁优先生效的问题
举个例：一般我们的家庭中，男人往往处于相较低的地位，这样一个家庭才能稳固，因此当家里出现这样一个场景
  • 老婆：老公今晚吃米饭吧
  • 孩子：爸爸今晚吃肯德基吧
  • 旺财：主人今晚吃骨头吧
此时，三个家庭成员都选中了这个男人，干同样的事情，但提出不同的需求，此时这个男人的心中就自然而然做出了排序，就有了谁在他心中更优先的问题
我们的选择器，具有相同的特点，例如看如下代码 
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>选择器优先级问题</title>
<style>
#box1{
background: red;
}
.box{
background: blue;
}
div{
width: 100px;
height: 100px;
background: green;
}
/*
三大基本选择器
标签、class、id 都是通过特殊字符在样式表中选中标签，设置样式

在优先级上
标签 < class < id
优先级高的样式会覆盖优先级低的样式；如果优先级一致，由于样式表是从上到下执行，因此，样
式表中后面选择器中的样式会叠加前面选择器中的样式

由于ID选择器优先级最高，导致一些交互性的选择器无法生效，因此前端规范要求，在设置标签
样式时，只使用class和标签选择器，id选择器不用来设置样式，一般用在js中。

选择器优先级判断依据：选择越准确，优先级越高
*/
</style>
</head>
<body>
<div style="background-color: saddlebrown" class="box" id="box1"></div>
</body>
</html>

属性选择器

属性选择器，直接通过两个中括号里面包含属性名即可。当然，还有更多扩展的属性选择器。
基础语法：
[href] { 选中有 href 属性的方法，注意不一定只有 a 标签有 href 属性，可以给任何标签上添加 href 属
性，只是不会进行跳转
color: orange;
}

基础样式： 

[href] {
color: orange;
}
[href^="http"] {
color: orange;
}
解释：属性值开头匹配的属性选择器。例如 http://www.baidu.com
// 所需版本 CSS3
[href$=".com"] {
color: orange;
}
解释：属性值结尾匹配的属性选择器。
// 所需版本 CSS3
[href*="baidu"] {
color: orange;
}
解释：属性值包含指定字符的属性选择器。
// 所需版本 CSS2
[class~="edf"] {
font-size: 50px;
}
解释：属性值具有多个值时，匹配其中一个值的属性选择器。
// 所需版本 CSS2
[lang|="en"] {
color: red;
}
解释：属性值具有多个值且使用 “-” 号连接符分割的其中一个值的属性选择器。比如
<i lang = "en-us" > HTML5 </i> 。

复合选择器

将不同的选择器进行组合形成新的特定匹配，我们称为复合选择器。

交集选择器

交集复合选择器由两个选择器直接连接构成，其结果是选中二者各自的元素的交集。其中第一个一般是标记选择器，第二个可以是类别选择器或者 ID 选择器。这两个选择器之间不能有空格，必须连续书写
这种方式构成的选择器将选中同时满足前后两者定义的元素，也就是说前者所定义的标记类型，并且指定了后者的类别或者 ID 的元素，因此叫做交集选择器 
<style type="text/css">
p{ color:red; }
p.one{ color:green; }
.one{ color:pink; }
</style>
<p>这是一个段落显示红色</p>
<h1>这是一个标题</h1>
<p class="one">这是标记选择器和类别选择器交叉显示绿色</p>
<h1 class="one">这个是类别选择器显示粉色</h1>

分组选择器

分组选择器也叫做并集选择器，结果是同时选中各个基本选择器所选择的范围之和
p,b,i,span { color: red ; }
解释：将多个选择器通过逗号分割，同时设置一组样式。当然，不但可以分组元素选择器，还可以使用
ID 选择器、类选择器、属性选择器混合使用 
h1,h2,h3,h4,h5,h6,p{
color:red;
font-size:20px;
}
h2.one,.one,#two{
text-decoration:underline;
}
<h1>这是h1标记</h1>
<h2 class="one">这是h2标记</h2>
<p>这是p标记</p>
<p class="one">这是p标记2</p>
<p id="two">这是p标记3</p>

后代选择器

p b { color: red ; }
解释：选择元素内部所有元素。不在乎的层次深度。当然，后代选择器也可以混合使用 ID 选择器、类选择器、属性选择器 
<style type="text/css">
p span { color:red; }
span { color:blue; }
</style>
<p>这是最外层，<span>这是最内层</span></p>
<span>这是嵌套外的span标记</span>
子选择器
ul > li { border: 1px solid red ; }
解释：子选择器类似与后代选择器，而最大的区别就是子选择器只能选择父元素向下一级的元素，不可以再往下选择 
ul > li {
border: 1px solid red;
}
<ul>
<li>我是儿子
<ol>
<li>我是孙子</li>
<li>我是孙子</li>
</ol>
</li>
<li>我是儿子</li>
<li>我是儿子</li>
</ul>

相邻兄弟选择器

p + b { color: red ; }
解释：相邻兄弟选择器匹配和第一个元素相邻的第二个元素。 
<style>
p+b {
color: red;
}
</style>
<b>开始</b>
<p>这是一段简单的显示测试，<b>儿子标签</b>不会有显示效果，<a href=""><b>孙子标签</b>
</a>不会有显示效果</p>
<b>终止</b>
如果在 【 <b> 终止 </b> 】 之前添加任何标签，则不能查找到

普通兄弟选择器

p ~ b { color: red ; }
解释：普通兄弟选择器匹配和第一个元素后面的所有元素。 
<style>
p~b {
color: red;
}
</style>
<b>开始</b>
<p>这是一段简单的显示测试，<b>儿子标签</b>不会有显示效果，<a href=""><b>孙子标签</b>
</a>不会有显示效果</p>
<b>终止1</b>显示效果
<b>终止2</b>显示效果

显示样式

<style type="text/css">
body{
color:#F09;
}
h1,h2,h3,h4,h5,h6{
font-size:12px;
height:30px;
background-color:#CCC;
line-height:30px;
}
</style>
<p>1、覆盖元素的默认显示效果</p>
<h1>这是一个h1元素</h1>
<h2>这是一个h2元素</h2>
<h3>这是一个h3元素</h3>
<h4>这是一个h4元素</h4>
<h5>这是一个h5元素</h5>
<h6>这是一个h6元素</h6>
<p>2、强大的显示效果</p>
<span style="font-size:500px;font-family:新宋体,黑体;">福</span>

CSS继承

css 继承指的是子标记会继承父标记的所有样式风格，并可以在父标记样式风格的基础上再加以修改，产生新的样式，而子标记的样式风格完全不会影响父标记 
<style>
h1 {
color:red; text-decoration:underline;
}
i {
color:blue;
}
</style>
注意： css 层叠不能和继承混淆，可以简单的理解为冲突的解决方案 
p { color:green; } 标记选择器
.red{ color:red; } class类别选择器，其中优先级是：行内样式 > id选择器 > class类别选择器 > 标记选择器
#line3{ color:yellow; }
.blue{ color:blue; }
<p>这是第1行</p>显示绿色，是p选择器的效果
<p class="red">这是第2行</p> 显示红色，是class=red生效
<p id="line3" class="red">这是第3行</p> 显示黄色，是id=line3生效
<p style="color:pink;" id="line3">这是第4行</p> 显色分红，是style生效，行内式优先级高于内嵌式优先级
<p class="blue red">这是第5行</p>显示蓝色，是class=blue生效，连个class级别相同，区别在于声明顺序，在<style>中后声明的优先前声明的进行覆盖，和这里class声明的顺序没有任何关系,这里就是明确的就近原则

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

BN、CBN、CmBN 的对比与总结

BN、CBN、CmBN 的对比与总结

BN、CBN、CmBN 的对比与总结 最近看到了关于 Yolo 系列 trick 的总结文章 【Make YOLO Great Again】YOLOv1-v7全系列大解析&#xff08;Tricks篇&#xff09;&#xff0c;其中提到了 YoloV4 中使用了 CmBN&#xff0c;这是对 CBN 的改进&#xff0c;可以较好的适应小 batch 的…
阅读更多...
电容笔值不值得买？电容笔十大品牌排行

电容笔值不值得买？电容笔十大品牌排行

要想给我们的ipad配置一款电容笔&#xff0c;如果感觉苹果原装的电容笔价格远远超过预算。这时候平替电容笔是个非常值得入手的选择。试想一下购买一款苹果原装的电容笔的资金都够买整整四款平替电容笔了&#xff0c;平替电容笔价格便宜且功能跟苹果的电容笔相差无几。下面我来…
阅读更多...
【设计模式】 - 结构型模式 - 迭代器模式

【设计模式】 - 结构型模式 - 迭代器模式

目录标题前言迭代器模式概述结构实现优缺点JDK源码解析前言 行为型模式用于描述程序在运行时复杂的流程控制&#xff0c;即描述多个类或对象之间怎样相互协作共同完成单个对象都无法单独完成的任务&#xff0c;它涉及算法与对象间职责的分配。 行为型模式分为类行为模式和对象…
阅读更多...
ai绘画有哪些软件，盘点三款免费且超级好用的AI绘画工具

ai绘画有哪些软件，盘点三款免费且超级好用的AI绘画工具

Ai绘画有哪些软件&#xff1f;不但可以免费使用&#xff0c;而且生成的画作精美&#xff0c;而且生成的图片速度还要很快&#xff1f; 不用急&#xff0c;今天小编给大家推荐的这三款ai绘画工具完全满足了上述条件&#xff01; 第一款&#xff0c;重磅级产品&#xff0c;数画…
阅读更多...
内存 地址转换、分段、空闲空间管理

内存 地址转换、分段、空闲空间管理

目录 1. 地址转换 1.1 动态重定位 1.1.1 基址寄存器&#xff08;虚拟地址 -> 物理地址) 1.1.2 界限寄存器&#xff08;提供访问保护&#xff09; 1.2 操作系统的工作 2. 分段 2.1 分段&#xff1a;泛化的基址/界限 2.2 引用哪个段 2.3 代码和堆的地址转换举例 2.4…
阅读更多...
Java#23(常见API--1)

Java#23(常见API--1)

目录 一.Math Math是一个帮助我们用于进行数学计算的工具类 工具类的特点: Math类中的常用方法 二.System System是一个工具类,为我们提供一些与系统相关的办法 一.Math Math是一个帮助我们用于进行数学计算的工具类 工具类的特点: 私有化构造方法,所有的方法都是静态的 M…
阅读更多...
[附源码]java毕业设计医院预约挂号管理系统

[附源码]java毕业设计医院预约挂号管理系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
web网页设计期末课程大作业 我的美丽家乡盐城 HTML+CSS+JavaScript

web网页设计期末课程大作业 我的美丽家乡盐城 HTML+CSS+JavaScript

家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法&#xff0c;如盒子的嵌套、浮动、margin、border、background等属性的使用&#xff0c;外部大盒子设定居中&#xff0c;内部左中右布局&#xff0c;下方横向浮动排列&#xff0c;大学学习的前端知识点和布局方式都有…
阅读更多...
Linux C应用编程-2-Makefile编写

Linux C应用编程-2-Makefile编写

1.基本规则 #规则格式 target ... : prerequisites ... command1command2#例如 main: main.o stack.o maze.ogcc main.o stack.o maze.o -o main main是规则的目标&#xff08;Target&#xff09;&#xff0c;main.o、stack.o和maze.o是规则的条件&#xff08;Prerequisite&am…
阅读更多...
贴地气的安卓UI自动化工具4399AT全面更新了~

贴地气的安卓UI自动化工具4399AT全面更新了~

4399AT是 一款兼容多设备运行并实现全自动化的测试的安卓UI工具&#xff0c;全自动化测试是指从apk的安装到按钮点击&#xff0c;密码输入到安装完成&#xff0c;不需要人工介入&#xff0c;兼容android5.0-12.0系统大部分品牌&#xff0c;至于开始测试&#xff0c;启动apk后&a…
阅读更多...
（十）笔记.net学习Lambda和Linq表达式

（十）笔记.net学习Lambda和Linq表达式

1.lambda表达式的演变 Lambda表达式的本质是“匿名方法”&#xff1a; C#的Lambda 表达式都使用 Lambda 运算符 >&#xff0c;该运算符读为“goes to”。语法如下&#xff1a; (object argOne, object argTwo) > {; /*Your statement goes here*/} 函数体多于一条语句…
阅读更多...
一次Actuator未授权访问利用

一次Actuator未授权访问利用

目录 介绍 复现 Actuator目录下可能利用泄漏信息的路径 利用 思考 处理意见 介绍 事先得到同意对朋友公司的网站进行了扫描&#xff0c;扫出了一个Actuator未授权&#xff0c;于是开始复现并记录一下&#xff0c;最后获取了redis的密码 复现 这里是请求包 响应包成功返回…
阅读更多...
qt 虚拟键盘中的几个瑕疵

qt 虚拟键盘中的几个瑕疵

最近使用了下面楼主的虚拟键盘&#xff0c;总体还是挺好用的&#xff0c;只是有几个地方&#xff0c;需要完善下。 基于Qt的可用于嵌入式的虚拟键盘_偷段代码的博客-CSDN博客_qt 嵌入式虚拟键盘这几天完成了一个基于Qt的虚拟键盘的编写&#xff0c;记录一下过程与感受&#xf…
阅读更多...
Python操作Numpy模块库

Python操作Numpy模块库

14天学习训练营导师课程&#xff1a; 杨鑫《Python 自学编程基础》 杨鑫《 Python 网络爬虫基础》 杨鑫《 Scrapy 爬虫框架实战和项目管理》 Python操作Numpy模块库 文章目录Python操作Numpy模块库1.Numpy介绍2.Numpy安装3.Numpy模块练习3.1 创建数组3.2 获取数组3.3 切割数组…
阅读更多...
二叉树路径问题+递归+有关题目

二叉树路径问题+递归+有关题目

一、分类 1、自顶向下 顾名思义&#xff0c;就是从某一个节点(不一定是根节点)&#xff0c;从上向下寻找路径&#xff0c;到某一个节点(不一定是叶节点)结束&#xff0c;具体题目如下&#xff1a;而继续细分的话还可以分成一般路径与给定和的路径 二叉树的所有路径面试题 04…
阅读更多...
Qt 利用UDP进行通信

Qt 利用UDP进行通信

一、UDP的特点 UDP&#xff08;用户数据报协议&#xff09;是一种简单轻量级、不可靠、面向数据报&#xff0c;无连接的传输层协议。而TCP/IP协议却是有连接的 二、UDP适合应用的几种情况 1、网络数据大多为短消息 2、拥有大量客户端 3、对数据安全性无特殊要求 4、网络负…
阅读更多...
pmap gdb 分析堆外内存泄露情况

pmap gdb 分析堆外内存泄露情况

一、查看内存分部 pmap -x 8 | sort -k3 -n -r | more ---- 8 是 PID 最大的肯定是堆内存。 其他的就需要看情况来分析了。 二、cat /proc/8/smaps | grep 7fad64000000 -- 8 是 PID , 地址的前4个0需要去掉。查到起止内存地址。 7fad64000000-7fad68000000 r…
阅读更多...
Bioinformatics2019 | FP2VEC+：基于新分子特征的分子性质预测

Bioinformatics2019 | FP2VEC+：基于新分子特征的分子性质预测

论文标题&#xff1a;FP2VEC&#xff1a;a new molecular featurizer for learning molecular properties 代码&#xff1a; GitHub - wsjeon92/FP2VEC 预测化合物性质最成功的方法之一是定量结构-活性关系(QSAR)方法。 Mol2vec使用分子子结构表将分子结构表示为类似于分子指…
阅读更多...
甘露糖-聚乙二醇-CY5 Cy5-PEG-mannose

甘露糖-聚乙二醇-CY5 Cy5-PEG-mannose

甘露糖-聚乙二醇-CY5 Cy5-PEG-mannose 中文名称&#xff1a;甘露糖-菁染料CY5 英文名称&#xff1a;mannose-Cyanine5 别称&#xff1a;CY5标记甘露糖&#xff0c;CY5-甘露糖 存储条件&#xff1a;-20C&#xff0c;避光&#xff0c;避湿 外观:固体或粘性液体&#xff0c;取…
阅读更多...
设计模式之美——实战MVC的意义

设计模式之美——实战MVC的意义

对于一个工程师来说&#xff0c;如果要追求长远发展&#xff0c;你就不能一直只把自己放在执行者的角色&#xff0c;不能只是一个代码实现者&#xff0c;你还要有独立负责一个系统的能力&#xff0c;能端到端&#xff08;end to end&#xff09;开发一个完整的系统。这其中的工…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023