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 ???选中第一行的伪元素的选择器

CSS3选择器

原文地址：https://www.cnblogs.com/vzaiBoke/p/9050855.html