CSS选择器：应用于特定的HTML元素，执行相应的样式规则
CSS基本选择器的类型有标签选择器，类选择器，id选择器，通配符选择器和伪类选择器。
1.标签选择器(元素选择器)
HTML标签名作为选择器，可以为页面中某一类标签指定统一的CSS样式，最大的优点在于快速为页面的标签指定统一样式。
语法格式：标签名 {属性:属性值}
<style>
span{/*标签选择器*/
font-size: 200px;
}
h1 {
color:red;
}
</style>
2.类选择器
类选择器使用"."进行标识，后面紧跟类名，在标签中使用class="类名"调用。
语法格式：.类名{属性:属性值}
类选择器命名规范：
1.长的类名使用横线分割；
2.不建议使用下划线_命名，区别js；
3.不要使用纯数字，不建议使用中文；
4.类名的命名最好与意思相同，例如红色 red或者color-red/c-red。
一个标签可以使用多个类选择器，中间用空格隔开，标签实现的效果与类名先后顺序无关，受CSS样式书写的上下顺序影响
<html>
<head>
<meta charset="UTF-8">
<title>CSS基本选择器</title>
<style>
.blue {
color:blue;
}
.red {
color: red;
}
.orange {
color: orange;
}
.green {
color: green;
}
</style>
</head>
<body>
<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
</body>
</html>
3.id选择器
id选择器使用#标识，后面紧跟id名
语法格式：#id名{属性:属性值}
类选择器和id选择器的区别：类选择器可以重复使用，元素的id值是唯一的。
类选择器类似人的名字，而id选择器类似人的身份证号。
<html>
<head>
<meta charset="UTF-8">
<title>CSS基本选择器</title>
<style>
#header {
font-size:25px;
color:skyblue;
</style>
</head>
<body>
<P id="header">
Hello World!
</P>
</body>
</html>
4.通配符选择器
通配符选择器用于匹配页面中所有的元素
语法格式：* {属性:属性值}
5.伪类选择器
伪类选择器就是用于向某些选择器中添加特殊的效果,常用的伪类选择器有链接伪类选择器、结构伪类选择器和目标伪类选择器。
1.链接伪类选择器： a
a:link {} 未访问链接时的状态
a:visited{} 已经访问链接后的状态
a:hover{} 鼠标移到链接时的状态
a:active{} 选定链接时的状态
注意：链接伪类选择器使用的顺序：l v h a，否则不会产生效果 我们在使用链接伪类选择器的时候，通常就是使用 a和a:hover{}。
2.结构伪类选择器
:first-child 选取属于父元素中的首个子元素的指定选择器
:last-child 选取属于父元素中的最后一个元素的指定选择器
:nth-child(n) 选取第n个元素指定的选择器
:nth-last-child(n) 从最后一个元素开始，选取第n个元素指定的选择器
这里的n可以是数字，公式(如n,n-1,n+1，n是从0开始到最后一个元素，n+1就是从1开始到最后一个元素等等）、关键词。
指定元素的奇数选择器：odd/2n+1 ；指定元素的偶数选择器：event/2n。
3.目标伪类选择器(CSS3)
:target目标伪类选择器，可用于选取当前活动的目标元素 跳转后目标元素。
347
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
