南宁小程序开发,挑战百日学习计划第25天（css 选择器)

原創

2020-06-19 09:54

常用的css 选择器：
class .
id #

元素选择器
p ：所有p元素
div,p ：所有div+p元素
div p ：选择Div内的所有p元素，包裹无限级孙子级别等…
div>p :选择父级是DIV的所有 p元素记住：孙子辈不算
div+p ：选择所有紧接着div元素之后的p元素（少用）

属性选择器：
[target] :选择所有带有target属性元素
[target=blank] 选择所有 target=”blank“属性的所有元素
[title~=m] 选择标题属性包含”M“的所有元素

伪类选择：
a：link= 选择所有未访问过的链接
a：visited= 访问过的
a：active=活动链接
a：hover = 鼠标在连接上面
input：focus =获取焦点

CSS3 高级选择器
p：first-of-type 选择每个P元素其父元素的第一个P元素（选择同背元素）

p:first-of-type{
background：#f55；
}
<div>
<h4>这个不是p元素，所以没有被选择</h4>
<p>第一个P元素</p>
<p>第二个P元素</p>
<p>第三个P元素</p>
</div>

p：last-of-type ：选择p元素父级别的最后一个p元素（说白了就是同背元素）

p:first-child :选择：p元素是第一个元素，则符合要求，如果不是则不符合

<style>
  p:first-child{
 background:red;
 }
</style>
<div>
<a>我是第一个元素 但是我不是P元素</a>
<p>我是第一个p元素，但是我不在父级第一个</p>
<p>我是第二个p元素</p>
</div>
<div>
<p>我是第一个元素 同时我是p元素</a>
<a>我是第一个a元素，</a>
<p>我是第二个p元素</p>
</div>

运行结果：