小白入门你教程CSS选择器

CSS越来越重要是大家中所周之的，但是还有很多人不知道CSS有哪些基本选择器和高级选择器？下面我们来总结一下。

CSS有哪些基本选择器和高级选择器？

ID选择器>类选择器>标签选择器

行内样式>内部样式>外部样式

*结构伪类选择器一旦设置不管在行内还是在后面重新设置，都没办法改变

*结构伪类选择器设置奇偶行以及从第三行开始变色如何实现

nth-cild(2N+3)表示从第三行开始的奇数行

同理nth-child(2N+4)表示从第四行开始的偶数行

nth-cild(2N+5)表示从第五行开始的奇数行

*设置前三个：

p:nth-child(-n+3){

background-color:#b3d4fc;

}

*使用EF:nth-child(n)和EF:nth-of-type(n)的关键点

EF:nth-child(n)在父级里从一个元素开始查找，不分类型

EF:nth-of-type(n)在父级里先看类型，再看位置

注意：child跟子选择器没有关系，可以是子选择，也可以是后代选择由层次选择器(如tabletr）来控制。

1.层次选择器

tabletd后代选择器td包含在table里

div>p子选择器p是div的子元素

p1+pp1后面一个兄弟p变化是对p进行处理p1不变而且只是下面相邻的变化上面相邻不变化

p1~pp1后面所有兄弟p变化p1不变

2.结构伪类选择器

P:first-child作为父元素的第一个子元素得元素p

P:last-child作为父元素的最后一个子元素得元素p

Pa:nth-child(n)p中第n个a元素（even）（odd）

p:first-of-type必须是p元素不是子元素也行

pa:nth-of-type(n)

必须是a元素不是a的子元素也行

3.属性选择器

a[id]a标签中含有id的

a[id=111]a标签中的id=111的

a[href*=http]a标签中包含href属性且都包含http

a[href&=png]a标签中包含href属性且最后以png结尾

a[href^=http://]a标签中包含href属性且以http://开头

当你的语法学会之后，就像是常打开了一个宝盒，之后做什么事情都会异常的容易。