Css选择器合集

什么是选择器？

选择器就是找标签，改样式。选择器{    样式;}

1.基础选择器

• <div class="box" id="box"></div>
• 标签选择器（通过标签名直接选择）                     div{}
• 类选择器  （通过类名获取）                                 .box{}
• 通配符选择器  （*所有都选中）                             *{}
• id选择器   （通过id属性选中，一般不用作样式） #box{}

很多小伙伴都会问到类选择器和id选择器有什么区别呢？

id选择器在一个html文档中同一个id名只能用一次，而类选择器可以多次使用，并且一个标签也可以有多个类名。当然在正常工作中，id选择器一般不做样式除非特殊情况，一般是配合js做效果的。

2.后代选择器(查找父元素中指定的后代元素)

• <div><p></p></div>
• 使用空格隔开 （选择器1 选择器2）                      div p{}

除了后代选择器，还有儿子选择器(选择器1>选择器2{})，还有并集选择器(选择器1，选择器2{})，交集选择器(既能标签选中又能被类选中)等等

最重要的还是后代选择器，用的最多

3.伪类选择器

• <a></a>
• 选择器:hover                                                       a:hover{}
• 选择器:link                                                           a:link{}
• 选择器:visited                                                      a:visited
• 选择器:active                                                       a:active

伪类选择器一般都是做链接效果的时候用，hover鼠标悬停状态下用的最多。

4.结构伪类选择器

• E:last-child    父元素的倒数第一个子元素E                                         
• E:first-child    父元素的第一个子元素
• E:nth-child(n)    父元素的第n个子元素
• E:nth-last-child(n)    父元素的倒数第n个子元素
• E:first-of-type    父元素下同种标签的第一个元素
• E:last-of-type    父元素下同种标签的倒数第一个元素
• E:nth-of-type(n)    与:nth-child(n)差不多
• E:nth-last-of-type    与:nth-last-child差不多

<ul>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

E:nth-child(n)，nth-of-type(n)是最常用的   

li:nth-child(-n+5就是前5个)n从0开始

()里可以是2n代表偶数个，2n+1或者-1代表奇数个。

even和odd也是奇数偶数。