目录
六、关系选择器（子元素、后代元素选择器、选择下一个兄弟、选择下边所有的兄弟）
一、CSS简介
CSS（cascading style sheets）层叠样式表
- 网页实际上是一个多层的结构，通过CSS可以分别为网页的每一层来设置样式
而最终我们能看到只是网页的最上边一层
- 总之一句话，CSS用来设置网页中元素的样式，也是一种标记语言
二、CSS编写的位置
使用CSS来修改元素的样式：
第一种方式（内联样式，行内样式）：
- 在标签内部通过style 属性来设置元素的样式
属性值为名值对结构，名和值之间使用冒号：连接，使用分号; 结尾
-问题：
使用内联样式，样式只能对一个标签生效，
如果希望影响到多个元素必须在每一个元素中都复制一遍，
并且当样式发生变化时，我们必须要一个一个的修改，非常的不方便
注意：开发时绝对不要使用内联样式
<body>
<h1 style="color: red; font-size: 20px;">少小离家老大回，乡音未改鬓毛衰。</h1>
</body>第二种方式（内部样式表）
-将样式编写到head中的 style 标签里
然后通过CSS的选择器来选中元素并为其设置各种样式
可以同时为多个标签设置样式，并且修改时只需要修改一处即可全部应用。
-内部样式表更加方便对样式进行复用
-问题：
我们的内部样式表只能对一个网页起作用，它里边的样式不能跨页面进行复用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<h1>少小离家老大回，乡音未改鬓毛衰。</h1>
<p>今天天气真不错！</p>
<p>落霞与孤鹜齐飞，秋水共长天一色。</p>
</body>
</html>第三种方式（外部样式表）最佳实践
- 可以将CSS样式编写到一个外部的CSS文件中，
然后通过 link 标签来引入外部的css文件
- 外部样式表需要通过link 标签进行引入，
意味着只要想使用这些样式的网页都可以对其进行引用
使样式可以在不同页面之间进行复用
- 将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，
从而加快网页的加载速度，提高用户的体验。
<link rel="stylesheet" href="css文件路径">rel 属性定义当前文档与被超链接文档之间的关系，在这里需要指定为“stlyesheet”，表示被超链接的文档是一个样式表文件。
href 属性定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
三、CSS的基本语法
CSS中的注释：/* */，注释中的内容会自动被浏览器所忽略
CSS规则由两个主要的部分构成：选择器以及一条或多条声明。
CSS基本语法：
选择器 声明块
选择器，通过选择器可以选中页面中的指定元素
比如 p 的作用就是选中页面中所有的p 元素
声明块，通过声明块来指定要为元素设置的样式
声明块由一个一个声明组成
声明是一个名值对结构
一个样式名对应一个样式值，名和值之间以 : 连接，分号; 结尾
四、常用选择器（元素、id、类、通配选择器）
选择器就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说，就是选择标签用的。
元素选择器
作用：根据标签名来选中指定的元素
语法：标签名 { }
例子：p { }、h1 { }、div { }
id选择器
作用：根据元素的id属性值选中一个元素
语法：#id属性值 { }
例子： #box { }、#red { }
class 是一个标签的属性，它和id类似，不同的是class可以重复使用
可以通过class属性为元素分组
可以同时为一个元素指定多个class属性，class属性值用空格隔开
类选择器
作用：根据元素的class属性值选中一组元素
语法：.class属性值 { }
通配选择器
作用：选中页面中的所有元素
语法：* { }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#red{
color: red;
}
/* 将秋水...与落霞...设置为蓝色 */
.blue{
color: blue;
}
</style>
</head>
<body>
<h1 class="blue abc">我是标题</h1>
<p>少小离家老大回</p>
<p>乡音未改鬓毛衰</p>
<p id="red">儿童相见不相识</p>
<p>笑问客从何处来</p>
<p class="blue">秋水共长天一色</p>
<p class="blue">落霞与孤鹜齐飞</p>
</body>
</html>五、复合选择器（交集，并集选择器）
交集选择器
作用：选中同时符合多个条件的元素
语法：选择器1选择器2选择器n { }
注意点：
交集选择器中如果有元素选择器，必须使用元素选择器开头
选择器分组（并集选择器）
作用：同时选择多个选择器对应的元素
语法：选择器1，选择器2，选择器n{ }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 将class为red的元素设置为红色（字体） */
.red{
color: red;
}
/* 将class为red 的div字体大小设置为30px */
/* 交集选择器， */
div.red{
font-size: 30px;
}
/* 将h1和span的字体变为绿色 */
h1,span{
color: green;
}
</style>
</head>
<body>
<div class="red">我是div</div>
<p class="red">我是p元素</p>
<h1>标题</h1>
<span>哈哈哈</span>
</body>
</html>六、关系选择器（子元素、后代元素选择器、选择下一个兄弟、选择下边所有的兄弟）
父元素
直接包含子元素的元素叫做父元素
子元素
直接被父元素包含的元素是子元素
祖先元素
直接或间接包含后代元素的元素叫做祖先元素
一个元素的父元素也是它的祖先元素
后代元素
直接或间接被祖先元素包含的元素叫做后代元素
子元素也是后代元素
兄弟元素
拥有相同父元素的元素是兄弟元素
子元素选择器
作用：选中指定父元素的指定子元素
语法：父元素 > 子元素
后代元素选择器
作用：选中指定元素内的指定后代元素
语法：祖先 后代
选择下一个兄弟
语法：前一个 + 下一个
注意：必须是紧挨着的兄弟元素
选择下边所有的兄弟
语法：兄 ~ 弟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 为div的子元素span设置一个字体颜色为红色 */
/* div > span{
color: red;
} */
/* 后代元素选择器 */
/* div span{
color: skyblue;
} */
/* 选择下一个兄弟 */
/* p + span{
color:red;
} */
/* 选择下边所有的兄弟 */
p ~ span{
color:orange;
}
</style>
</head>
<body>
<div>
我是一个div
<p>
我是div中的p元素
<span>我是p元素中的span</span>
</p>
<span>我是div中的span元素1</span>
<span>我是div中的span元素2</span>
</div>
</body>
</html>七、属性选择器
[属性名] 选择含有指定属性的元素
[属性名="属性值"] 选择含有指定属性和属性值的元素（重点，务必掌握），引号可加可不加
[属性名^="属性值"] 选择属性值以指定值开头的元素
[属性名$="属性值"] 选择属性值以指定值结尾的元素
[属性名*="属性值"] 选择属性值中含有某值的元素
注意：类、属性、伪类选择器，权重均为10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* p[title]
p[title=abc]
p[title^=abc] */
p[title$=abc]{
color: orange;
}
</style>
</head>
<body>
<p title="abc">少小离家老大回</p>
<p title="abcdef">乡音未改鬓毛衰</p>
<p title="helloabc">儿童相见不相识</p>
<p>笑问客从何处来</p>
<p>落霞与孤鹜齐飞</p>
<p>秋水共长天一色</p>
</body>
</html>八、伪类选择器
伪类（不存在的类，特殊的类）
- 伪类用来描述一个元素的特殊状态
比如：第一个子元素，被点击的元素，鼠标移入的元素…
- 伪类一般情况下都是使用: 开头
E:first-child 选择父元素中的第一个子元素E,表示选择父元素中的第一个子元素且该元素必须为 E
E:last-child 最后一个子元素E
E:nth-child( n ) 选中第n个子元素E
特殊值：
n 第n个 n的范围0到正无穷
2n 或 even 表示选中偶数位的元素
2n+1 或 odd 表示选中奇数位的元素
可以为公式：常见的公式如下（如果 n 是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）如 5n , n + 5 从第 5 个开始（包括第5个）到最后，-n + 5 前5个（包括第5个）…
以上这些伪类都是根据所有的子元素进行排序
E:first-of-type 指定类型 E 的第一个
E:last-of-type 指定类型 E 的最后一个
E:nth-of type( ) 指定类型 E 的第 n 个
这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序的
区别：
1. nth-child 对父元素里面所有的孩子排序选择（序号是固定的），先找到第 n 个孩子，再看看是否和 E 匹配；
2. nth-of-type 对父元素里面指定子元素进行排序选择，先去匹配 E，然后再根据 E 找第 n 个孩子
:not( ) 否定伪类
- 将符合条件的元素从选择器中去除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 将ul里的第一个li设置为红色，执行的时候首先看 first-child 之后回去看 li */
/* ul > li:first-child{
color: red;
} */
/* ul > li:last-child{
color: red;
} */
/* ul > li:nth-child(2){
color: red;
} */
ul > li:not(:nth-child(3)){
color: yellowgreen;
}
</style>
</head>
<body>
<ul>
<span>我是一个span</span>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
</body>
</html>九、超链接的伪类
:link 用来表示没访问过的链接（正常的链接）
:visited 用来表示访问过的链接
由于隐私的原因，所以visited这个伪类只能修改链接的颜色
:hover 用来表示鼠标移入的状态
:active 用来表示鼠标点击的状态
其中:link 和:visited伪类只能用于超链接，而:hover 和 :active可以用于任何元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a:visited{
color: orange;
}
a:link{
color: red;
/* font-size: 50px; */
}
a:hover{
color: aqua;
font-size: 50px;
}
a:active{
color: yellowgreen;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">访问过的链接</a>
<br><br>
<a href="https://www.baidu123.com">没访问过的链接</a>
</body>
</html>十、伪元素选择器（重点）
伪元素，表示页面中一些特殊的并不真实存在的元素（特殊的位置）
可以帮助我们利用CSS创建新标签元素，而不需要 HTML标签，从而简化 HTML结构。
伪元素使用 :: 开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 元素的开始
::after 元素的最后
::before 和 ::after必须结合 content属性 使用，属于行内元素
伪元素选择器和标签选择器一样，权重为 1，如 div::before 权重是 2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
font-size: 20px;
}
p::first-letter{
font-size: 50px;
}
p::first-line{
background-color: yellow;
}
p::selection{
background-color: greenyellow;
}
div::before{
content:'abc';
color: red;
}
div::after{
content:'hhh';
color: blue;
}
</style>
</head>
<body>
<q>hello</q>
<div>Hello How are you</div>
<p>In this paper, we study the decision process of assigning elective surgery patients to available surgical blocks in multiple operating rooms (OR) under random surgery durations, random postoperative length of-stay in the intensive care unit (ICU), and limited capacity of ICU</p>
</body>
</html>
伪元素选择器使用场景2——仿土豆效果
伪元素选择器使用场景3：伪元素清除浮动
1. 额外标签发也称为隔墙法，是W3C推荐的做法
新空标签必须为块级元素，添加 clear: both;
2. 父级添加overflow 属性
3. 父级添加 after 伪元素
4. 父级添加双伪元素
3178
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
