CSS选择器常见的有几种?
- 基本选择器
- *匹配任何元素
- 元素选择器
- #id选择器
- .class选择器
- 组合选择器
- div,p 多元素选择器,同时匹配div和p元素
- div p 后代元素选择器，匹配div后代下的所有p元素（儿子和孙子可能会有多个。儿子p们和孙子p们都会生效）
- div>p子元素选择器，匹配div元素的子元素p(只有儿子p们会生效)
- div+p直接相邻兄弟选择器，匹配div元素之后，紧邻的p元素（只匹配一个）
- div~p匹配div元素之后，同级的所有p元素（可以匹配多个,不管这些p是否相邻，但p必须和前面的div同级）
注意p.info { background:#ff0; }匹配类名为.info的 p元素
.info.error { color:#900; font-weight:bold; }匹配类名同时具有info和error的元素
p.info.error { color:#900; font-weight:bold; }匹配匹配类名同时具有info和error的 p 元素
- 伪类选择器
关于child和type的伪类选择器，可以看我的这篇文章
- p: first-child 两个条件缺一不可：该元素是p元素，该元素是p所在 兄弟 元素中的第一个元素
p:first-child{
background: yellow
}
<section>
<p>asd</p> //被选中
<div>
<p>孙子</p> //被选中
<p>孙子</p>
</div>
<span>asd</span>
<p>儿子</p>
<p>儿子</p>
</section>
- p:first-of-type 两个条件缺一不可：该元素是p元素，在它的兄弟元素中，第一个该类型的元素
- p:nth-of-type(n)
- p:nth-child(n) 两个条件缺一不可：该元素是p元素，该元素是第n个元素（第一个是1不是0）
p:nth-child(2n) 偶数
p:nth-child(2n-1) 奇数
p:nth-child(2){ //无空格
background: yellow
}
section :nth-child(3){ //有空格
background: blue
}
<section>
<p>asd</p>
<div>
<p>孙子</p>
<p>孙子</p> //被选中黄色
</div>
<span>asd</span> //被选中蓝色
<p>儿子p</p>
<p>儿子p</p>
</section>
- a:link匹配所有未被点击的链接
- a:visited匹配已被点击的链接
- a:active匹配所有鼠标已点击，但还没有释放的元素
- a:hover匹配所有鼠标正在悬停上的元素
-
input:focus匹配当前获得焦点的input元素
span+span{
border-left:1px solid black
}
//和下面这种写法效果是一样的
span~span{
border-left:1px solid black
}
image.png
.logo+.logo{
margin-top:20px
}
image.png
image.png
冷门
input::placeholder{} //匹配placeholder
[attr*=value]
表示带有以 attr 命名的，且值包含有"value"的属性的元素。
