CSS选择器

标签：border   -o   ack   ble   over   col   特殊   loading   href   

选择器：id选择器，类选择器，元素选择器，属性选择器，后代选择器，子选择器，相邻兄弟选择器，伪类选择器，伪元素选择器

 

 

 

1. 伪类选择器：专门用来表示元素的一些特殊状态，比如，

　　链接的状态，:active(激活链接)，：hover(鼠标悬浮其上) ......

　　子元素的伪类：:first-child选中第一个子标签；:last-child选中最后一个子标签   ;    :nth-child( )选中指定位置的子元素，even表示偶数位置，odd表示奇数位置。

　　:first-of-type,     :last-of-type ;    :nth-of-type选择指定类型的子元素

　　child和 type的区别：child要求必须为父元素的第几个，而type要求必须为当前类型的第几个。

我们有

春花

夏雨

秋月

冬雪

用p:first-child{color:red}春花不会变成红色，因为春花不是它父亲body的第一个子元素。

用p:first-of-type{color:pink}春花会变粉，因为春花是p类型的第一个子元素。

2.伪元素选择器：表示元素中的一些特殊位置。比如：

:first-letter	p:first-letter	选择每个 元素的第一个字母
:first-line	p:first-line	选择每个 元素的第一行
:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的 元素
:before	p:before	在每个 元素之前插入内容
:after	p:after	在每个 元素之后插入内容

3.属性选择器：根据具有某个具体的属性或属性值的要求来选中元素。
 

4.兄弟元素选择器
相邻一个兄弟：拥有相同父元素，且两个元素相邻(必须紧挨着，中间不能有任何元素相隔)，使用"+"符号链接
相邻所有兄弟：拥有相同父元素，且几个元素相邻，使用"~"符号连接。

span + p {color : pink} ,只有春花变粉。
span ~ p{color:pink},春花，夏雨，秋月，冬雪全部变粉。

5.否定伪类：可以从已选中的元素中剔除某些元素， :not( )选择器-否定伪类 （是CSS3新增的）
比如：

span ~ p:not(not) {color:pink},春花，秋月，冬雪变粉。夏雨不会变粉。

 

6.并集选择器(选择器1，选择器2，选择器N)。 　　交集选择器(选择器1选择器2选择器N)

7.后代选择器，子选择器的区别：

• 后代选择器比子选择器的范围大，包含子选择器，且包含子选择器的“子孙”选择器，后代选择器使用"空格"符号间隔选择器
• 子选择器：子选择器只是父选择器的一级子元素，使用">"符号链接选择器

8.选择器优先级：

优先级规则，通过权重判断优先顺序：

•  内联样式,优先级1000
•  id选择器,优先级100
• 类和伪类,优先级10
• 元素选择器,优先级1
• 通配*  , 优先级0
• 继承来的样式，没有优先级
• 当选择器中包含多个选择器时，需要将他们的权重相加再比较。
• (注意，选择器的优先级不会超过它的数量级，好比10个id选择器不可以达到权重1000，不可能超过一个内联)
• 如果选择器的优先级权重一样，则使用靠后的样式。
• 并集选择器中的优先级是单独计算的。
• !important 关键字，它的优先级比内联还要高。
• 注意：不要轻易使用内联和 ! important 。

 看这个博客理解优先级和权重：https://www.cnblogs.com/momomiji/p/7522292.html

 

CSS选择器

标签：border   -o   ack   ble   over   col   特殊   loading   href   

原文地址：https://www.cnblogs.com/mingnai/p/13236760.html