前端基础-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>
一个一个对比，演示
前端基础-CSS的各种选择器的特点以及CSS的三大特性的更多相关文章
- Web前端基础怎么学？ JavaScript、html、css知识架构图
以前开发者只要掌握 HTML.CSS.JavaScript 三驾马车就能胜任一份前端的工作了.而现在除了普通的编码以外,还要考虑如何性能优化,如何跨端.跨平台实现功能,尤其是 AI.5G 技术的来临, ...
- 端午小长假--前端基础学起来04CSS选择器
定义: 选择器{ 样式: } 选择器指明{}中的样式的作用对象,即作用于网页中的哪些元素 <head><meta http-equiv="Content-Type" ...
- 前端基础：CSS样式选择器
前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2. ...
- 2020年12月-第02阶段-前端基础-CSS基础选择器
CSS选择器(重点) 理解 能说出选择器的作用 id选择器和类选择器的区别 1. CSS选择器作用(重点) 如上图所以,要把里面的小黄人分为2组,最快的方法怎办? 很多, 比如 一只眼睛的一组,剩下的 ...
- 前端基础之css样式（选择器）
一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...
- 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作
一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...
- 前端基础之CSS的引入+HTML标签选择器+CSS操作属性
clear:left/ringt属性 CSS:语法形式上由选择器+以及一条或多条声明组成:选择器查找到指定的html标签后,使用css属性设置html标签的样式: ...
- html css 前端基础 学习方法及经验分享
前言: 入园第一天,想分享一点儿前端基础html css 的学习方法和一些经验给热爱前端,但是不知道从哪儿开始,依旧有些迷茫的新手朋友们.当然,适合每个人的学习方式不同,以下所讲的仅供参考. 一.关于 ...
- HTML+DIV+CSS+JSweb前端基础
HTML+DIV+CSS+JSweb前端基础 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1) dir: 文本的显示方向,默认是从左向右 (2 ...
随机推荐
- 《Servlet与JSP核心编程》读书笔记
这本书实际是我进入JavaWeb开发的入门书籍,而且是日常碰到一些技术问题需要确认时的参考书,前一段时间在解决一个他人的问题时,我突然发现我的第一遍阅读对这本书的内容的理解还不够透彻,所以又开始N多年 ...
- yii2实战之初见端倪
PHP框架大PK php框架有很多种,在国内应用较多的有:Thinkphp, Yii, Laravel, Codeigniter等.关于这些框架,孰优孰劣,是一个极具争议性的话题.各方支持者总能拿出自 ...
- 关于HTTP请求、Ajax请求，请求的同步和异步
使用了很长时间的Ajax请求了,一直都是在以异步的方式在使用.昨天听了一个讲座涉及到apache server,偶然想到了这Ajax请求和HTTP请求的一些区别和联系,就在网上好好搜了一顿,把搜到的结 ...
- python笔记：#005#算数运算符
算数运算符 计算机,顾名思义就是负责进行 数学计算 并且 存储计算结果 的电子设备 目标 算术运算符的基本使用 01. 算数运算符 算数运算符是 运算符的一种 是完成基本的算术运算使用的符号,用来处理 ...
- dubbo+zookeeper+springboot构建服务
本次和大家分享的是dubbo框架应用的初略配置和zookeeper注册中心的使用:说到注册中心现在我使用过的只有两种:zookeeper和Eureka,zk我结合dubbo来使用,而Eureka结合s ...
- javascript 易漏点
javascript 是一种解释型语言,不是java或c++那样的编译语言.javascript指令以普通文本形式传递给浏览器,然后依次解释执行.它们不必首先“编译”成只有计算机处理器能理解的机器码. ...
- SpringCloud实战-Hystrix线程隔离&请求缓存&请求合并
接着上一篇的Hystrix进行进一步了解. 当系统用户不断增长时,每个微服务需要承受的并发压力也越来越大,在分布式环境中,通常压力来自对依赖服务的调用,因为亲戚依赖服务的资源需要通过通信来实现,这样的 ...
- 原生js实现canvas气泡冒泡效果
说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单2, 只需引入J ...
- 利用AOP实现SqlSugar自动事务
先看一下效果,带接口层的三层架构: BL层: public class StudentBL : IStudentService { private ILogger mLogger; private r ...
- SSM-SpringMVC-05：SpringMVC视图解析器InternalResourceViewResolver配置
------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 视图解析器------默认就有配置,但是默认的在实际使用过程中有很多不方便的地方,所以我们配置一道视图解析器 ...