CSS选择器知识点总结（基础选择器+复合选择器）
CSS学习⾃检
选择器(选择符)就是根据不同需求把不同的标签选出来，这就是选择器的作⽤。
CSS选择器主要可以分为基础选择器和复合选择器两个⼤类。
基础选择器
基础选择器是由单个选择器组成的，主要包括：标签选择器、类选择器、id 选择器和通配符选择器。
1. 标签选择器：
标签选择器⽤于将HTML的标签作为选择器，能快速为页⾯中同类型的标签统⼀设置样式，但不能设计差异化样式。
p{font-size: 12px;color: red }
2. 类选择器：
类选择器以" . " 进⾏标识，可以⽤于给多个HTML标签设置相同的样式，也可以给⼀个标签指定多个类名，从⽽达到更多的选择⽬的。
⼝诀：样式点定义，结构类调⽤。⼀个或多个，开发最常⽤。
<style>
.wrap{margin:0;padding:0;}
.myclass{font-size: 12px;color: red }
</style>
<div class="wrap myclass">你笑起来真像好天⽓。</div>
3. id选择器：
id 选择器以" # " 进⾏标识，可以为标有特定 id 的 HTML 元素指定特定的样式。id属性唯⼀。
<style>
#wrap{margin:0;padding:0;}
</style>
<div id="wrap">你笑起来真像好天⽓。</div>
4. 通配符选择器：
通配符选择器使⽤ " * " 定义，它表⽰选取页⾯中所有元素（标签）。
*{
margin: 0;
padding: 0;
}
id 选择器和类选择器的区别
类选择器（class）好⽐⼈的名字，⼀个⼈可以有多个名字，同时⼀个名字也可以被多个⼈使⽤。
id 选择器好⽐⼈的⾝份证号码，全中国是唯⼀的，不得重复。
id 选择器和类选择器最⼤的不同在于使⽤次数上。
类选择器在修改样式中⽤的最多，id 选择器⼀般⽤于页⾯唯⼀性的元素上，经常和 JavaScript 搭配使⽤。
复合选择器
复合选择器是建⽴在基础选择器之上，由两个或多个基础选择器，通过不同的⽅式组合⽽成的。
常⽤的复合选择器包括：后代选择器、⼦选择器、并集选择器、伪类选择器等等。
1. 后代选择器
后代选择器⼜称为包含选择器，可以选择⽗元素⾥⾯⼦元素。其写法就是把外层标签写在前⾯，内层标签写在后⾯，中间⽤空格分隔。当标签发⽣嵌套时，内层标签就成为外层标签的后代。
/* 元素1 元素2 { 样式声明 }
表⽰选择元素 1 ⾥⾯的所有元素 2 (后代元素)。*/
div p{font-size: 12px;color: red;}
/* 选择 div ⾥⾯所有的 p 标签元素 */
2. ⼦选择器
⼦元素选择器（⼦选择器）只能选择作为某元素的最近⼀级⼦元素。简单理解就是选亲⼉⼦元素。
/*元素1 > 元素2 { 样式声明 }
选择元素1 ⾥⾯的所有直接后代(⼦元素) 元素2。*/
div > p{font-size: 12px;color: red;}
/* 选择 div ⾥⾯所有最近⼀级 p 标签元素 */
3. 并集选择器
并集选择器可以选择多组标签, 同时为他们定义相同的样式，通过英⽂逗号" , "连接⽽成。通常⽤于集体声明。
/*元素1，元素2，元素3 { 样式声明 } */
div,.myclass,#psd{样式声明}/* 选择 div、.myclass和#psd元素 */
4. 伪类选择器
何为伪类?
伪类是选择器的⼀种，它⽤于选择处于特定状态的元素，
⽐如当它们是这⼀类型的第⼀个元素时 :first-child，
或者是当⿏标指针悬浮在元素上⾯的时候 :hover，
它们表现得会像是你向你的⽂档的某个部分应⽤了⼀个类⼀样，
这样，在你的标记⽂本中会减少多余的类，让你的代码更灵活、更易于维护。
伪类选择器书写最⼤的特点是⽤冒号（:）表⽰，⽐ 如 :link 、 :last-child 。伪类选择器很多，这⾥主要介绍链接伪类和结构伪类。
链接伪类选择器：
/*让超链接点击之前是红⾊*/
a:link{color: red;}
/*让超链接点击之后是橙⾊*/
a:visited{color: orange;}
/*⿏标悬停，放到标签上的时候是绿⾊*/
a:hover{color: green;}
/*⿏标点击链接，但是不松⼿的时候*/
a:active{color: black;}
/* 为了确保⽣效，请按照 LVHA 的循顺序声明
:link－:visited－:hover－:active
记忆法：love hate */
常⽤结构伪类选择器：
- E:fisrt-child ：作为⽗元素的第⼀个⼦元素的元素E。
与E:nth-child(1)等同
css选择器分为哪几类- E:last-child ：作为⽗元素的最后⼀个⼦元素的元素E。
与E:nth-last-child(1)等同
- E F:nth-child(n)：选择⽗元素E的第n个⼦元素F。
其中n可以是整数（1，2，3）、关键字（even，odd）、
可以是公式（2n+1）,⽽且n值起始值为1，⽽不是0.
- E F:nth-last-child(n)：选择⽗元素E的倒数第n个⼦元素F。
此选择器与E:nth-child(n)选择器计算顺序刚好相反，但使⽤⽅法都是⼀样的，
其中：nth-last-child(1)始终匹配最后⼀个元素，与last-child等同
结构伪类选择器很容易遭到误解，需要特别强调。如：
p:first-child;
它表⽰的是：选择⽗元素下的第⼀个⼦元素 p，⽽不是选择 p 元素的第⼀个⼦元素。待续。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。