前端基础-CSS的各种选择器的特点以及CSS的三大特性

  • 一、 基本选择器
  • 二、 后代选择器、子元素选择器
  • 三、 兄弟选择器
  • 四、 交集选择器与并集选择器
  • 五、 序列选择器
  • 六、 属性选择器
  • 七、 伪类选择器
  • 八、 伪元素选择器
  • 九、 CSS三大特性

一、 基本选择器

1、id选择器

#1、作用:
根据指定的id名称,在当前界面中找到对应的唯一一个的标签,然后设置属性
#2、格式
id名称 {
属性:值;
}
#3、注意点:
1、在企业开发中如果仅仅只是为了设置样式,通常不会使用id,在前端开发中id通常是留给js使用的
2、每个标签都可以设置唯一一个id,id就相当于人/标签的身份证,因此在同一界面内id绝不能重复
3、引用id一定要加#
4、id的命名只能由字符、数字、下划线组成,且不能以数字开头,更不能是html关键字如p,a,img等
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>id选择器</title>
<style>
#p1 {
color: red;
}
#p2 {
color: green;
}
#p3 {
color: blue;
}
</style>
</head>
<body>
<p id="p1">大多数人的帅,都是浮在表面的,是外表的帅</p>
<p id="p2">而多多,不仅具备外表帅,内心更是帅了一逼</p>
<p id="p3">多多就是我,我就是多多</p>
</body>
</html>
id选择器实例

2、类选择器

#1、作用:根据指定的类名称,在当前界面中找到对应的标签,然后设置属性
#2、格式:
.类名称 {
属性:值;
}
#3、注意点:
1、类名就是专门用来给某个特定的标签设置样式的
2、每个标签都可以设置一个或多个class(空格分隔),class就相当于人/标签的名称,
因此同一界面内class可以重复
3、引用class一定要加点.
4、类名的命名规则与id的命名规则相同
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>类选择器</title>
<style>
.p1 {
color: red;
}
.p2 {
color: green;
}
.p3 {
color: blue;
}
</style>
</head>
<body>
<p class="p1">大多数人的帅,都是浮在表面的,是外表的帅</p>
<p class="p2">而多多,不仅具备外表帅,内心更是帅了一逼</p>
<p class="p3">多多就是我,我就是多多</p>
</body>
</html>
类选择器实例

3、标签选择器

#1、作用:根据指定的标签名称,在当前界面中找到所有该名称的标签,然后设置属性
#2、格式:
标签名称 {
属性:值;
}
#3、注意点:
1、只要是HTML的标签都能当做标签选择器
2、标签选择器选中的是当前界面中的所有标签,而不能单独选中某一标签
3、标签选择器,无论嵌套多少层都能选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style type="text/css">
p {
color: red;
}
</style>
</head>
<body>
<p>多多美丽的外表下其实隐藏着一颗骚动的心</p>
<ul>
<li>
<ul>
<li>
<ul>
<li>
<p>这颗心叫做七巧玲珑心,男人吃了会流泪,女人吃了会怀孕</p>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
标签选择器

4、通配符选择器

#1、作用:选择所有标签
#2、格式:
* {
属性:值;
}
#3、注意点:
1、在企业开发中一般不会使用通配符选择器
理由是:
由于通配符选择器是设置界面上所有的标签的属性,
所以在设置之前会遍历所有的标签
如果当前界面上的标签比较多,那么性能就会比较差
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通配符选择器</title>
<style type="text/css">
* {
color: red;
}
</style>
</head>
<body>
<h1 >我是标题</h1>
<p >我是段落</p>
<a href="#">我是超链接</a>
</body>
</html>
通配选择器实例

二、 后代选择器、子元素选择器

1、后代选择器

#1、作用:找到指定标签的所有后代(儿子,孙子,重孙子、、、)标签,设置属性
#2、格式:
    标签名1 xxx {
属性:值;
}
#3、注意:
1、后代选择器必须用空格隔开
2、后代不仅仅是儿子,也包括孙子、重孙子
3、后代选择器不仅仅可以使用标签名称,还可以使用其他选择器比如id或class
4、后代选择器可以通过空格一直延续下去
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
div p {
color: red;
}
#id1 li p {
font-size: 50px;
}
div ul li a {
font-size: 100px;
color: green;
}
</style>
</head>
<body>
<p>我是body下的段落1</p>
<!--如果想为div内所有标签都设置属性,无论用id还是class都不合理,因为当div内的标签过多,我们无法加那么多id或者class-->
<div id="id1" class="part1">
<p>我是div下的段落1</p>
<p>我是div下的段落2</p>
<ul>
<li class="aaa">
<p class="ccc">我是ul>li下的段落1</p>
<p class="ddd">我是ul>li下的段落</p>
<a href="">点我啊1</a>
</li>
<li>
<a href="#">点我啊2</a>
</li>
</ul>
</div>
<p>我是body下的段落2</p>
</body>
</html>
后代选择器实例

2、子元素选择器

#1、作用:找到制定标签的所有特定的直接子元素,然后设置属性
#2、格式:
标签名1>标签名2 {
属性:值;
}
先找到名称叫做"标签名称1"的标签,然后在这个标签中查找所有直接子元素名称叫做"标签名称2"的元素
#3、注意:
1、子元素选择器之间需要用>符号链接,并且不能有空格
比如div >p会找div标签的所有后代标签,标签名为">p"
2、子元素选择器只会查找儿子,不会查找其他嵌套的标签
3、子元素选择器不仅可以用标签名称,还可以使用其他选择器,比如id或class
4、子元素选择器可以通过>符号一直延续下去
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
body>p {
color: green;
}
div>p {
color: red;
}
.aaa>a {
font-size: 100px;
}
div>ul>li>.ddd {
color: blue;
}
</style>
</head>
<body>
<p>我是body下的段落1</p>
<!--如果想为div内所有标签都设置属性,无论用id还是class都不合理,因为当div内的标签过多,我们无法加那么多id或者class-->
<div id="id1" class="part1">
<p>我是div下的段落1</p>
<p>我是div下的段落2</p>
<ul>
<li class="aaa">
<p class="ccc">我是ul>li下的段落1</p>
<p class="ddd">我是ul>li下的段落2</p>
<a href="">点我啊1</a>
</li>
<li>
<a href="#">点我啊2</a>
</li>
</ul>
</div>
<p>我是body下的段落2</p>
</body>
</html>
子元素选择器

三、 兄弟选择器

1、相邻兄弟选择器,CSS2推出

#1、作用:给指定选择器后面紧跟的那个选择器选中的标签设置属性
#2、格式
选择器1 选择器2 {
属性:值;
}
#3、注意点:
1、相邻兄弟选择器必须通过 号链接
2、相邻兄弟选择器只能选中你紧跟其后的那个标签,不能选中被隔开的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>兄弟选择器</title>
<style type="text/css">
h1 p {
font-size: 50px;
}   /* 相邻兄弟解释器*/  
</style>
</head>
<body>
<h1 >我是标题1</h1>
<!--<a href="">有了这个标签,p就不再是紧跟h1标签了,但通用兄弟选择器仍然能选中</a>-->
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<h1>我是标题2</h1>
<p>我是段落</p>
</body>
</html>
相邻兄弟解释器演示

2、通用兄弟选择器,CSS3推出

#1、作用:给指定选择器后面的所有选择器中的所有标签设置属性
#2、格式:
选择器1~选择器2 {
属性:值;
}
#3、注意点:
1、通用兄弟选择器必须用~来链接
2、通用兄弟选择器选中的是指选择器后面的某个选择器选中的所有标签
无论有没有被隔开,都可以被选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通用兄弟选择器</title>
<style type="text/css">
h1~p {
color: red;
}    
/*通用兄弟选择器*/
</style>
</head>
<body>
<h1 >我是标题1</h1>
<!--<a href="">有了这个标签,p就不再是紧跟h1标签了,但通用兄弟选择器仍然能选中</a>-->
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<h1>我是标题2</h1>
<p>我是段落</p>
</body>
</html>
通用兄弟解释器实例

四、 交集选择器与并集选择器

1、交集选择器

#1、作用:给所有选择器选中的标签中,相交的那部分标签设置属性
#2、格式:
    选择器1选择器2 {
属性:值;
}
#3、注意:
1、选择器与选择器之间没有任何链接符号
2、选择器可以使用标签名称、id、class
3、交集选择器在企业开发中并不多见,了解即可
因为:p.part1 完全可以用.part1取代
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
p.part1 {
color: red;
}
p#p1{
font-size: 100px;
}
</style>
</head>
<body>
<p class="part1">我是段落</p>
<p id="p1">我是段落</p>
<p class="part1">我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>
交集选择器实例

2、并集选择器

#1、作用:给所有满足条件的标签设置属性
#2、格式:
    选择器1,选择器2 {
属性:值;
}
#3、注意:
1、选择器与选择器之间必须用逗号来链接
2、选择器可以使用标签名称、id、class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>并集选择器</title>
<style type="text/css">
.part1,h1,a {
color: red;
}
</style>
</head>
<body>
<h1>哈哈啊</h1>
<p class="part1">我是段落</p>
<p id="p1">我是段落</p>
<p class="part1">我是段落</p>
<a href="#">我是我</a>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>
并集选择器实例

五、 序列选择器

#1、作用:
css3中新推出的选择器中,最具代表性的的9个,又称为序列选择器,
过去的选择器中要选中某个必须加id或class,学习了这9个后,不用加id或class,
想选中同级别的第几个就选第几个
#2、格式
#2.1 同级别
:first-child    p:first-child    同级别的第一个
:last-child    p:last-child    同级别的最后一个
:nth-child(n)                    同级别的第n个
:nth-last-child(n)            同级别的倒数第n个
#2.2 同级别同类型
:first-of-type                    同级别同类型的第一个
:last-of-type                    同级别同类型的最后一个
:nth-of-type(n)                    同级别同类型的第n个
:nth-last-of-type(n)            同级别同类型的倒数第n个
#2.3 其他
:only-of-type                    同类型的唯一一个
:only-child                         同级别的唯一一个
#1、同级别的第一个
#1.1 示范一
p:first-child { 
color: red;
}
代表:同级别的第一个,并且第一个要求是一个p标签
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
<p>我是段落6</p>
</div>
这样的话第一个p和div中的第一个p都变成红色,
#1.2 示范二
p:first-child {
color: red;
}
代表:同级别的第一个,并且第一个要求是一个p标签
<h1>w我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
<p>我是段落6</p>
</div>
这样的话只有div中的第一个p变红,因为在有在div内同一级别的第一个才是p
注意点:
:fist-child就是第一个孩子,不区分类型
#2、同级别的最后一个
p:last-child {
color: red;
}
代表:同级别的最后一个,并且最后一个要求是一个p标签
<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
<p>我是段落6</p>
</div>
<p>我是段落7</p>
这样的话只有6跟7都变红
#3、同级别的第n个
p:nth-child(3) {
color: red;
}
代表:同级别的第3个,并且第3个要求是一个p标签
<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
<p>我是段落6.1</p>
<p>我是段落6.2</p>
<h1>我是标题</h1>
</div>
<p>我是段落7</p>
这样的话只有“我是段落2”变红
#4、同级别的倒数第n个
p:nth-last-child(3) {
color: red;
}
代表:同级别的倒数第3个,并且第3个要求是一个p标签
<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
<p>我是段落6.1</p>
<p>我是段落6.2</p>
<h1>我是标题</h1>
</div>
<p>我是段落7</p>
这样的话只有“我是段落6.1”和“我是段落5”被选中
同级别示范
<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
<p>我是段落6.1</p>
<p>我是段落6.2</p>
<h1>我是标题</h1>
</div>
<p>我是段落7</p>
#1、同级别同类型的第一个
p:first-of-type {
color: red;
}
“我是段落1”和“我是段落6.1”被选中
#2、同级别同类型的最后一个
p:last-of-type {
color: red;
}
“我是段落7”和“我是段落6.2”被选中
#3、同级别同类型的第n个
p:nth-of-type(2) {
color: red;
}
“我是段落2”和“我是段落6.2”被选中
#4、同级别同类型的倒数第n个
p:nth-last-of-type(2) {
color: red;
}
“我是段落5”和“我是段落6.1”被选中
同级别同类型实例
#1、同类型的唯一一个
p:only-of-type {
color: red;
}
<h1>我是标题</h1>
<div>
<p>我是段落6.1</p>
<p>我是段落6.2</p>
<h1>我是标题</h1>
</div>
<p>我是段落7</p>
“我是段落7“被选中
#2、同级别的唯一一个
p:only-child {
color: red;
}
<h1>我是标题</h1>
<div>
<p>我是段落6.1</p>
</div>
<p>我是段落7</p>
“我是段落6.1”被选中
其他情况

六、 属性选择器

#1、作用:根据指定的属性名称找到对应的标签,然后设置属性
       该选择器,最常用于input标签
#2、格式与具体用法:
    [属性名]
其他选择器[属性名]
[属性名=值]
[属性名^=值]
[属性名$=值]
[属性名*=值]
例1:找到所有包含id属性的标签
[id]
例2:找到所有包含id属性的p标签
p[id]
例3:找到所有class属性值为part1的p标签
p[class="part1"]
例4:找到所有href属性值以https开头的a标签
a[href^="https"]
例5:找到所有src属性值以png结果的img标签
img[src$="png"]
例6:找到所有class属性值中包含part2的标签
[class*="part"] 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
[id] {
color: red;
}
p[id] {
font-size: 30px;
}
p[class="part1"] {
color: green;
}
a[href^="https"] {
font-size: 50px;
}
img[src$="jpg"] {
width: 300px;
}
[class*="part"] {
text-decoration: line-through;
}
</style>
</head>
<body>
<h1 id="id1">哈哈啊</h1>
<p id="id2">我是段落</p>
<p class="part1">我是段落</p>
<p class="xxx part2 yyy">我是段落</p>
<a href="#">我是我</a>
<a href="http://www.baidu.com">http://www.baidu.com</a>
<a href="https://www.baidu.com">https://www.baidu.com</a>
<img src="2.jpg" alt="加载失败">
<img src="1.jpg1" alt="加载失败">
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>
具体演示

七、 伪类选择器

#1、作用:常用的几种伪类选择器。
#1.1 没有访问的超链接a标签样式:
a:link {
color: blue;
}
#1.2 访问过的超链接a标签样式:
a:visited {
color: gray;
}
#1.3 鼠标悬浮在元素上应用样式:
a:hover {
background-color: #eee; 
}
#1.4 鼠标点击瞬间的样式:
a:active {
color: green;
}
#1.5 input输入框获取焦点时样式:
input:focus {
outline: none;
background-color: #eee;
}
#2 注意:
1 a标签的伪类选择器可以单独出现,也可以一起出现
2 a标签的伪类选择器如果一起出现,有严格的顺序要求,否则失效
link,visited,hover,active
3 hover是所有其他标签都可以使用的
4 focus只给input标签使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style type="text/css">
a:link {
color: #cccccc;
}
a:visited {
color: #55BBBB;
}
a:hover {
color: green;
}
a:active {
color: red;
}
input:hover {
outline: none;
background-color: #cccccc;
}
</style>
</head>
<body>
<a href="https://www.baidu.com/a/b/c/d.html">点击我</a>
<input type="text">
</body>
</html>
伪类选择器实例

八、 伪元素选择器

#1、常用的伪元素。
#1.1 first-letter:杂志类文章首字母样式调整
例如:
p:first-letter {
font-size: 48px;
}
#1.2 before
用于在元素的内容前面插入新内容。
例如:
p:before {
content: "*";
color: red;
}
在所有p标签的内容前面加上一个红色的*#1.3 after
用于在元素的内容后面插入新内容。
例如:
p:after {
content: "?";
color: red;
}
在所有p标签的内容后面加上一个蓝色的?。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素选择器</title>
<style type="text/css">
p:first-letter {
font-size: 50px;
}
/*两个冒号与一个是一样的,老版本用的是一个冒号,考虑到兼容性推荐使用一个冒号*/
a::after {
content: "?";
color: red;
}
a:before {
content: "!";
color: green;
}
</style>
</head>
<body>
<p>英雄不问出处,流氓不论岁数</p>
<a href="#" class="help">多多是干什么的</a>
<a href="#" class="help">多多是干什么的</a>
<a href="#" class="help">多多是干什么的</a>
</body>
</html>
伪元素演示

九、 CSS三大特性

1、继承性

#1、定义:给某一个元素设置一些属性,该元素的后代也可以使用,这个我们就称之为继承性
#2、注意:
1、只有以color、font-、text-、line-开头的属性才可以继承
2、a标签的文字颜色和下划线是不能继承别人的
3、h标签的文字大小是不能继承别人的,会变大,但是会在原来字体大小的基础上变大
ps:打开浏览器审查元素可以看到一些inherited from。。。的属性
#3、应用场景:
通常基于继承性统一设置网页的文字颜色,字体,文字大小等样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
div {
color: red;
font-size: 50px;
}
</style>
</head>
<body>
<div>
<h1>我是标题</h1>
<p><a href="#">多多最帅</a></p>
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航2</li>
</ul>
</div>
<div>
<div>
<p>aaaa</p>
</div>
<div>
<p>bbbb</p>
</div>
</div>
</body>
</html>
继承性演示

2、层叠性

#1、定义:CSS全称:Cascading StyleSheet层叠样式表,层叠性指的就是CSS处理冲突的一种能力,
即如果有多个选择器选中了同一个标签那么会有覆盖效果
#2、注意:
1、层叠性只有在多个选择器选中了同一个标签,然后设置了相同的属性,
才会发生层叠性
ps:通过谷歌浏览器可以查看到,一些属性被划掉了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层叠性</title>
<style type="text/css">
p {
color: red;
}
.ppp {
color: green;
}
</style>
</head>
<body>
<p class="ppp">我是段落</p>
</body>
</html>
层叠性演示

3、优先级

#1、定义:当多个选择器选中同一个标签,并且给同一个标签设置相同的属性时,如何层叠就由优先级来确定
#2、优先级
整体优先级从高到底:行内样式>嵌入样式>外部样式
行内样式并不推荐使用,所以我们以嵌入为例来介绍优先级

1、大前提:直接选中 > 间接选中(即继承而来的)

#1、以下为直接选中
<style type="text/css">
#id1 {
color: red;
}
.ppp {
color: green;
}
p {
color: blue;
}
</style>
#2、以下为间接选中
<style type="text/css">
ul {
color: yellow;
}
</style>
<ul>
<li>
<p id="id1" class="ppp">我是span</p>
</li>
</ul>
直接选中优先级间接选中示范

2、如果都是间接选中,那么谁离目标标签比较近,就听谁的

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>优先级</title>
<style type="text/css">
/*离目标近,显示的当然是red*/
li {
color: red;
}
/*离目标远*/
ul {
color: yellow;
}
</style>
</head>
<body>
<ul>
<li>
<p id="id1" class="ppp">我是span</p>
</li>
</ul>
</body>
</html>
都是间接选中,谁离目标近谁优先示范

3、如果都是直接选中,并且都是同类型的选择器,那么就是谁写的在后面就听谁的

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>优先级</title>
<style type="text/css">
p {
color: red;
}
/*同样都是标签选择器,谁写在后面谁生效*/
p {
color: yellow;
}
</style>
</head>
<body>
<ul>
<li>
<p id="id1" class="ppp">我是span</p>
</li>
</ul>
</body>
</html>
同样都是标签选择器,谁写后面谁生效示范

4、如果都是直接选中,并且是不同类型的选择器,那么就会按照选择器的优先级来层叠

    id > 类 > 标签 > 通配符(也算直接选中) > 继承 > 浏览器默认(即没有设置任何属性)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>优先级</title>
<style type="text/css">
/*打开浏览器依次去掉优先级高的来进行验证*/
#id1 {
color: red;
}
.ppp {
color: green;
}
p {
color: blue;
}
* {
color: yellow;
}
li {
color: #7e1487;
}
</style>
</head>
<body>
<ul>
<li>
<p id="id1" class="ppp">我是span</p>
</li>
</ul>
</body>
</html>
演示

5、优先级之!important

#1、作用:还有一种不讲道理的!import方式来强制指定的属性的优先级提升为最高,但是不推荐使用。因为大量使用!import的代码是无法维护的。
#2、注意:
1、!important只能用于直接选中,不能用于间接选中
2、!important只能用于提升被指定的属性的优先级,其他属性的优先级不会被提升
3、!important必须写在属性值分号的前面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>优先级</title>
<style type="text/css">
/*打开浏览器依次去掉优先级高的来进行验证*/
#id1 {
color: red;
}
.ppp {
color: green;
}
p {
color: blue;
}
* {
color: yellow !important;
}
li {
color: #7e1487;
}
</style>
</head>
<body>
<ul>
<li>
<p id="id1" class="ppp">我是span</p>
</li>
</ul>
</body>
</html>
了解就行,不推荐用

6、优先级之权重计算

#1、强调
如果都是直接选中,并且混杂了一系列其他的选择器一起使用时,则需要通过计算机权重来判定优先级
#2、计算方式
#1、id数多的优先级高
#2、id数相同,则判定类数多的优先级高
#3、id数、class数均相同,则判定标签数多的优先级高
#4、若id数、class数、标签数均相同,则无需继续往下计算了,谁写在后面谁的优先级高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>优先级</title>
<style type="text/css">
#id1 #id2 #id3 .ppp{
color: red;
}
#id2 #id3.aaa p{
color: purple;
}
#id1.ccc>.bbb>.aaa>p {
color: pink;
}
#id1 .aaa .ppp {
color: green;
}
#id2 .aaa p {
color: yellow;
}
div ul li p {
color: blue;
}
div ul p {
color: cyan;
}
</style>
</head>
<body>
<div id="id1" class="ccc">
<ul id="id2" class="bbb">
<li id="id3" class="aaa">
<p class="ppp">我是段落</p>
</li>
</ul>
</div>
</body>
</html>
一个一个对比,演示

本文转载于:猿2048➩https://www.mk2048.com/blog/blog.php?id=hi02j0ib&title=前端基础-CSS的各种选择器的特点以及CSS的三大特性

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

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

相关文章

使用JavaCV进行手和手指检测

这篇文章是Andrew Davison博士发布的有关自然用户界面&#xff08;NUI&#xff09;系列的一部分&#xff0c;内容涉及使用JavaCV从网络摄像头视频提要中检测手。 注意&#xff1a;可以从http://fivedots.coe.psu.ac.th/~ad/jg/nui055/下载本章的所有源代码。 第5章的彩色斑点检…

不能装载文档控件。请在检查浏览器的选项中检查浏览器的安全设置_【2020年网络安全宣传周】如何正确设置浏览器...

李夏是一个公司的职员&#xff0c;一天晚上加班赶制文档&#xff0c;由于要向客户汇报产品情况&#xff0c;需要获取大量网上信息&#xff0c;然而在制作中却发现浏览器的网页打不开了。第二天原计划向客户展示的材料未能完整汇总&#xff0c;客户见面对接效果也打了折扣。在当…

用装饰器设计模式装饰

装饰图案是广泛使用的结构图案之一。 此模式在运行时动态更改对象的功能&#xff0c;而不会影响对象的现有功能。 简而言之&#xff0c;此模式通过包装将附加功能添加到对象。 问题陈述&#xff1a; 想像一下我们有一个比萨饼&#xff0c;该比萨饼已经用番茄和奶酪烤制的情况。…

vcpkg安装_微软牌包管理器vcpkg更新及路线图计划

蝎子vcpkg是一套跨平台&#xff0c;开源的C/C库管理器&#xff0c;今天的这篇文章是有关vcpkg主题的2020年4月博文更新。在这篇文章中&#xff0c;我们将分享有关vcpkg 2020.04发布版本的一些信息以及vcpkg的路线图(roadmap)&#xff0c;我们会在这里持续地发布有关vcpkg的最新…

CSS 盒模型与box-sizing

一、盒模型 一个web页面由许多html元素组成&#xff0c;而每一个html元素都可以表示为一个矩形的盒子&#xff0c;CSS盒模型正是描述这些矩形盒子的存在。 MDN的描述&#xff1a; When laying out a document, the browsers rendering engine represents each element as a r…

Java课程设计 购物车系统(个人博客) 201521123052 蓝锦明

1. 团队课程设计博客链接 课程设计团队博客 2. 个人负责模块或任务说明 &#xff08;1&#xff09;制作图形菜单引导界面 &#xff08;2&#xff09;定义各获取和输出类函数 3. 自己的代码提交记录截图 4. 自己负责模块或任务详细说明 import java.text.NumberFormat; public c…

7-12(图) 社交网络图中结点的“重要性”计算(30 分)

在社交网络中&#xff0c;个人或单位&#xff08;结点&#xff09;之间通过某些关系&#xff08;边&#xff09;联系起来。他们受到这些关系的影响&#xff0c;这种影响可以理解为网络中相互连接的结点之间蔓延的一种相互作用&#xff0c;可以增强也可以减弱。而结点根据其所处…

linux系统的安装程序,Linux系统安装

为了不影响本机系统&#xff0c;建议在虚拟机上创建并安装Linux系统&#xff0c;本次安装centos7 64位的镜像。详细步骤如下&#xff1a;1、首先在虚拟机主页创建新的虚拟机。... 图1.1 2、选择自定义安装&#xff0c;这样方便我们更好了解虚拟机&#xff0c;然后点击下一步。.…

百米路由器2登陆地址_腾达无线路由器怎么安装,真的不错

腾达无线路由器怎么安装1、WAN口连接宽带进线(即网络公司进来的线或猫出来的线&#xff0c;一般颜色不一样)、LAN口连接局域网内的电脑。2、设置所连接电脑的IP地址。右键点击网上邻居属性3、右键点击本地连接属性4、选择Internet协议TCP/IP属性5、点击选择自动获得IP地址和自动…

JavaFX 2 XYCharts和Java 7功能

我最喜欢的JavaFX 2功能之一是它在javafx.scene.chart包中提供的标准图表。 该软件包提供了几种不同类型的现成图表。 除了其中之一&#xff08; PieChart &#xff09;以外&#xff0c;所有其他都是“ 2轴图”&#xff08; XYChart的特定实现&#xff09;。 在本文中&#xff…

前端基础-HTML的的标签详解

阅读目录 一、head内常用标签二、 HTML语义化三、 字符实体四、 h系列标签五、 p标签六、 img标签七、 a标签八、 列表标签九、 table标签十、 form标签 一、 head内常用标签 1、meta相关 #1、指定字符集<meta charset"gbk">#2、页面描述<meta name"…

new失败跟踪函数_WinDbg预览时间线:调试器中的时间线可以允许用户记录跟踪

时间旅行调试(TTD)允许用户记录跟踪&#xff0c;这些跟踪是对程序执行的记录。时间线是执行过程中发生的事件的直观表示&#xff0c;这些事件可以是包括断点&#xff0c;内存读/写&#xff0c;函数调用和返回以及异常。使用时间线窗口可以快速查看重要事件&#xff0c;了解相对…

linux 进程的执行时间,Linux 获取进程执行时间

Linux 获取进程执行时间1 前言测试一个程序的执行时间, 时间包括用户 CPU 时间系统 CPU 时间时钟时间之前获取之前时间都是在程序的 main 函数用 time 函数实现, 这个只能粗略的计算程序的执行时间, 不能准确的获取其他时间在看 APUE 时, 书中有关程序时间测试程序, 非常正规, …

Java环境变量的设置

1.计算机->属性->高级系统设置->环境变量 2.设置JAVA_HOME和path&#xff0c;1.5之后的JDK可以不设置classpath 3.JAVA_HOME的路径是JDK的安装路径 4.在系统变量里面找到path&#xff0c;然后点击修改&#xff0c;在最后面添加%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin; 5…

华为抢购助手_华为荣耀20系列手机采用的五项新科技,科普简介

5月底荣耀20系列在上海发布&#xff0c;荣耀20系列旗舰手机拥有五项荣耀自主研发的新科技&#xff0c;包括LinkTurbo网络聚合加速、超级NFC、方舟编译器、人性化YOYO智慧生命体&#xff0c;超级蓝牙。下面分别介绍一下这五项新科技。LinkTurbo网络聚合加速先来科普一下LinkTurb…

Flex弹性布局

1 Flex: 弹性布局 (转) 任何一个容器都可以指定为 Flex 布局。 1 .box {2  display: flex;3 } 行内元素也可以使用 Flex 布局。 1 .box{2 display: inline-flex;3 } 注意&#xff0c;设为 Flex 布局以后&#xff0c;子元素的 float、 clear 和 vertical-align 属性将失效…

firewallD卸载Linux,在Ubuntu 18.04/16.04系统上安装和使用Firewalld的方法

本文介绍Firewalld在Ubuntu 18.04或Ubuntu 16.04发行版上的安装方法及基本用法。简介Firewalld是Linux防火墙管理工具&#xff0c;支持IPv4、IPv6、以太网桥和IPSet防火墙设置&#xff0c;它充当Linux内核的netfilter框架的前端&#xff0c;同时Firewalld是RHEL 7系列上的默认防…

PCGen的垃圾收集分析

介绍 我决定结合我的两个软件爱好&#xff0c;并在PCGen上进行一些分析&#xff0c; PCGen是一种流行的基于Java的开放源代码角色生成器&#xff0c;用于角色扮演游戏。 我用Censum &#xff0c;我们&#xff08; jClarity的&#xff09;新的垃圾收集日志分析工具来进行分析。 …

springboot不会运行gc_SpringBoot 和JVM 调优(深度好文,建议收藏)

点击上方[全栈开发者社区]→右上角[...]→[设为星标⭐]项目调优作为一名工程师&#xff0c;项目调优这事&#xff0c;是必须得熟练掌握的事情。在SpringBoot项目中&#xff0c;调优主要通过配置文件和配置JVM的参数的方式进行。一、修改配置文件关于修改配置文件 application.p…

3dobject用什么打开_第一次用开塞露是什么感觉?网友:像打开了新世界的大门

第一次用开塞露是什么感觉&#xff1f;网友:像打开了新世界的大门我妈说我小时候便秘去医院&#xff0c;医生给开了支开塞露&#xff0c;然后在医院的公厕里使用的&#xff0c;我妈的描述是:“要不是我手挪走的快点&#xff0c;就直接喷我手了”。。。。。。。。。。。。。。。…