小白入门你教程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://开头

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