CSS的选择器：
在一个HTML中每一种标签可能会出现多次，但是我们需要针对页面上标签设置不同的样式，此刻就需要CSS选择器了，按照它的规则能够方便我们更好的找到对应的标签，方便设置不同的样式。
格式：
选择器 {
属性1：属性值1;
属性2：属性值2;
...
}
CSS选择器主要分为：标签选择器、类选择器、id选择器、通配符选择器、伪类选择器。
标签选择器（元素选择器）：
特点：
1、以HTML标签名作为选择器
2、便于为页面同类型标签统一样式
3、不能设计差异化
格式：
标签名 {
属性：属性值;
...
}
<head>
...
<style>
p {
font-size: 18px;
}
</style>
</head>
<body>
<p> 这是第一个p标签 </p>
<p> 这是第二个p标签 </p>
</body>
类选择器：
特点：
1、类选择器是由 点(.)+类名 组成
2、使用类选择器，标签必须有class类属性
3、一个标签的class属性可以为多个类，使用空格隔开，如 class="myc1 myc2..."
格式：
.类名 {
属性：属性值;
...
}
<head>
...
<style>
.myc {
font-size: 18px;
}
</style>
</head>
<body>
<p class="myc"> 这是第一个p标签 </p>
<p> 这是第二个p标签 </p>
</body>
id选择器：
特点：
1、id选择器是由 #+id名称 组成的
2、使用id选择器，标签中必须有id属性，并且一个页面中的id属性是唯一的不能重复
格式：
#id名 {
属性：属性值;
...
}
<head>
...
<style>
font-size: 18px;
}
</style>
</head>
<body>
<p id="myc"> 这是第一个p标签 </p>
<p> 这是第二个p标签 </p>
</body>
通配符选择器：
特点：
1、通配符选择器为 * 代表页面中所有的标签
格式：
* {
属性：属性值;
...
}
<head>
...
<style>
* {
font-size: 18px;
}
</style>
</head>
<body>
<p> 这是第一个p标签 </p>
<p> 这是第二个p标签 </p>
</body>
伪类选择器：
伪类选择器用于向某些选择器添加特殊效果而存在的。
特点：
1、伪类选择器是由 冒号(:)+伪类选择器 组成
常用的伪类选择器有：链接伪类选择器、结构伪类选择器、目标伪类选择器。
链接伪类选择器：
特点：
1、伪类选择器是由 冒号(:)+link/visited/hover/active 组成
2、针对链接标签 未访问、已访问、鼠标移动到元素上、已选定的样式设置
格式：
:link { //未访问
属性：属性值;
...
}
:visited { //已访问
属性：属性值;
...
}
:hover { //鼠标移动到该元素上
属性：属性值;
...
}
:active { //已选定该元素
属性：属性值;
...
}
<head>
...
<style>
a:link {
font-size: 18px;
}
a:visited {
font-size: 20px;
}
a:hover {
font-size: 22px;
}
a:active {
font-size: 24px;
}
</style>
</head>
<body>
<a> 这是第一个p标签 </a>
</body>
结构伪类选择器：
特点：
1、伪类选择器是由 冒号(:)+first-child/last-child/nth-child(n)/nth-last-child(n)... 组成
2、便于在相同的标签中查找对应的标签
3、first-child/last-child/nth-child(n)/nth-last-child(n)需要结构中的标签类型必须全部一致，若标签类型不一致可以使用nth-of-type(n)在对应类型标签中查找。
格式：
:first-child { //选择该元素结构的首个元素
属性：属性值;
...
}
:last-child { //选择该元素结构的最后一个元素
属性：属性值;
...
}
:nth-child(n) { //选择该元素结构从上往下，第n个元素，n从1开始
属性：属性值;
...
}
:nth-last-child(n) { //选择该元素结构从下往上，第n个元素，n从1开始
属性：属性值;
...
}
<head>
...
<style>
li:frist-child {
font-size: 18px;
}
li:last-child {
font-size: 20px;
}
li:nth-child(2) {
font-size: 22px;
}
li:nth-last-child(2) {
font-size: 24px;
}
</style>
</head>
<body>
<ul>
<li><p>第1个p标签</p></li>
<li><p>第2个p标签</p></li>
<li><p>第3个p标签</p></li>
<li><p>第4个p标签</p></li>
</ul>
</body>
目标伪类选择器：
特点：
1、目标伪类选择器由 冒号(:)+target 组成
2、选取当前活动的目标元素
格式：
：target {
属性：属性值;
...
}
5679
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
