CSS3选择器

复习之前学过的css选择器

.box 类名选择器
#box　id选择器
div p 后代选择器
div.box 交集选择器
div,p,span 并集选择器
div>p 子代
* : 通配符
div+p: 选中div后面相邻的第一个p
div~p: 选中的div后面所有的p

//css3选择器

1.属性选择器  []    通过标签属性来选择器

/*div 带有class属性  背景色变红*/

div[class]{
    background-color: red;
}

/*div 带有class属性 ，并且值为 box1*/

div[class="box1"]{
    background-color: pink;
}

/* div 带有class属性 ，并且值以 aa开头*/

div[class^="aa"]{
    background-color: green;
}

/* div 带有class属性 ，并且值以 aa结尾*/

div[class$="aa"]{
     background-color: orange;
}

/* div 带有class属性 ，并且值包含aa*/
div[class*="aa"]{
    background-color: #daa520;
}

伪类选择器

div:empty{}    如果div里面没有其他dom元素的话会被选中

h2:target   伪类 要配合锚点使用，表示被激活的状态

h2:target{

color:red

}

<a href="#box">

<h2 id=”box”>

伪类选择器--结构伪类

:first-child      第一个

:last-child       最后一个

:nth-child(11)    1--11个

:nth-child(odd)   奇数

:nth-child(even)  偶数

:nth-child(2n)    奇数

:nth-child(2n+1)       偶数

:nth-child(-n+5)       选中前五个 

:nth-last-child(-n+5)  选中后五个   

伪元素选择器

::before ,::after 通过 css 模拟出来html标签的效果
注意：必须有content属性才行

::first-letter  选中第一个字母

::first-line    选中第一行的伪元素的选择器