CSS3------CSS选择器

最新推荐文章于 2023-10-16 00:42:35 发布

小小小韭菜

最新推荐文章于 2023-10-16 00:42:35 发布

阅读量500

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/m0_59749255/article/details/128025375

版权

界面中的 “ 超文本 “ 本质上就是通过一个一个矩形盒子包起来，然后进行排版组合，那么接下来要详细研究这个标签盒子的细节结构，以帮助学习如何使用它，但是在开始研究它之前，我们先来了解一个概念，选择器的概念。

<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声明的顺序没有任何关系,这里就是明确的就近原则

小小小韭菜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3------CSS选择器

本质上就是通过一个一个矩形盒子包起来，然后进行排版组合，那么接下来要详细研究这个标签盒子的细节结构，以帮助学习如何使用它，但是在开始研究它之前，我们先来了解一个概。此时，三个家庭成员都选中了这个男人，干同样的事情，但提出不同的需求，此时这个男人的心中就自然而然做出了排序，就有了谁在他心中更优先的问题。继承指的是子标记会继承父标记的所有样式风格，并可以在父标记样式风格的基础上再加以修改，产生新的样式，而子标记的样式风格完全不会影响父标记。类型选择器，可以选择一组标签，这组标签可以是不同类型的标签，例如。
复制链接

扫一扫