CSS
CSS书写位置
1.内联式
<div style="输入样式">
<p></p>
</div>
直接在标签输入style输入样式，添加样式结构。
2.对应样式
<head>
<style>
h1{}
div{}
</style>
</head>
在< head>里面写入样式(详情介绍看后面介绍)。
3.外链式
最实用的一种格式。在外部文件新建一个.css文件链接到html文件。
用link链接到html里添加样式。
css选择器
1.标签选择器
通过标签名直接选择相应的标签。
不管有多复杂的嵌套关系，标签的位置就算藏得很深，依然可以被标签选择器选中。
格式：
标签名{
声明；
}
示例：
css样式
标签选择器的作用：
1.利用标签选中所有的特性，进行默认样式的清除。
2.复杂选择器中一部分使用。
2.ID选择器
id选择器作业：
选中页面中唯一的一个标签。
格式：
#id值{
声明；
}
示例：
css样式
【注】：
1.id值必须是唯一的，在一个页面中只能出现一次。如果多次出现重复的ID值是不符合规范的。
2.所有的标签都有ID属性。ID命名的规范：由字母，下划线，中划线，数字组成。不能以数字开头。
3.类选择器
类选择器是通过标签中的class属性来选择标签的。
格式：
.class值{
声明；
}
可以选择一部分标签，设置相同的样式。
示例：
class值可以输入多样的值，中间用空格隔开。
【注】
1.class值可以不唯一。类选择器选中的是拥有相同class值得标签元素。
2.一个标签可以拥有多个class值。
3.命名规则与ID相同。
4.通配符
*：表示选中所有标签。（包含body标签）
谨慎使用（基本用不到的属性）
使用场景：
清除默认的样式。
*{
}
5.后代选择器
后代选择器：
通过标签的嵌套关系，来缩小选择范围，在范围内查找相关的元素。
格式:
选择器1 选择器2{
声明；
}
示例：
要想给p标签里的span标签的内容添加样式、
中间用空格隔开，是后代选择器。
【注】
1.选择器1必须是选择器2的祖先元素。
2.当要把某些元素中的某些元素进行样式修改时，就要想要使用后代选择器。
6.子代选择器
子代选择器：
通过标签间的嵌套关系，来选中相应标签的子元素。
格式：
选择器1>选择器2{
声明；
}
【注】>左右两边的关系必须是父子关系。
示例：
css样式
7.交集选择器
交集选择器：
既满足条件1，又满足条件2。
格式：
选择器1选择2{
声明；
}
示例：
css样式
【注】
1.交集选择器如果是标签选择器与类选择器的混写，则必须将标签选择器放在前面。
2.连续交集 既满足条件1，又满足条件2，还满足条件3。
8.并集选择器
多个标签，共用属性
格式：
选择器1，选择器2{
声明；
}
选择器之间使用逗号进行分割。
可以避免代码冗余。
示例：
css样式
使用逗号隔开选择多个标签。
9.序选择器
first-child
判断当前元素是否为父元素的第一个子元素，如果是，则选中。
last-child
判断当前元素是否为父元素的最后一个子元素，如果是，则选中。
only-child
判断当前元素是否为父元素的唯一一个子元素，如果是，则选中。
示例：
css样式
第一个和最后一个进行样式变化。
only-child，是在父元素里只有唯一一个元素时才可生效。
10.相邻选择器
格式：
选择器1 + 选择器2{
声明;
}
选择紧贴在选择器1元素之后的选择器2元素，两者必须同属于一个父级，中间不可相隔其他标签。
示例：
css样式
运行结果
紧挨h3的p标签添加了样式。
11.兄弟选择器
同属于一个父级。
格式：
选择器1~选择器2{
声明；
}
选中的是选择器1元素之后的所有同级的选择器2元素。
示例：
css样式
运行
以上p标签都属于同级，最后一个是div里面的p标签所以不与上面同级。
12.nth-child选择器
语法格式：
E：nth-child(n){
声明；
}
n表示父元素下的第几个子元素。
E表示元素名。
示例：
css样式
li标签的第一个第三个进行样式变化。
n可表示一个乘法因子，可以写成（2n）表示偶数，（2n+1）表示奇数。
13.nth-of-type选择器
格式：
E：nth-of-type(n){
声明；
}
选中父元素下的同类型中的第n个元素
示例:
使这个p标签添加样式。
【注】
1.要使该属性生效，E必须是某个元素的子元素，E的父元素最高可以是html。
2.该选择器命中的是父元素中的第n个为E的子元素，不管第n个子元素是否为E。
14.伪类选择器
伪类：
同一个标签，根据不同的状态，拥有不同的样式，这就叫做“伪类”。伪类使用：（冒号）来表示。
格式：
选择器：伪类名{
声明；
}
伪类选择器大致可分为两种：
（1）静态伪类，只能用于超链接的样式。
：link 超链接点击之前
：visited 超链接被访问过之后。
（2）动态伪类、针对所有标签都适用。
：hover “悬停”鼠标放在标签上时，改变其样式。
： active “激活”鼠标点击标签，不松手时。
（3）特殊 针对表单元素。
：focus 是某个标签获得焦点时的样式。
【注意】
a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后。
可靠的顺序是：l(link)ov(visited)e h(hover)a(active)te, 即用喜欢(love)和讨厌(hate)两个词来概括
示例：
css样式
点击之前的颜色样式，点击过后变回a标签默认颜色。
3111
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
