首页 > 代码库 > css选择器

css选择器

 

1 aaaaaaaaaaaaaaaa2 aaaaaaaaaaa

 

技术分享
1 h4 {2   color:red;  3   font-size:14px;4 }
View Code

h4~p   h4后面的p标签 

h4+p   h4相邻的p标签

p[id]   包含id属性的p标签

p[class~="b"]  class类名为b且b前面有空格的p标签

p[class|="b"]  class类名为b且b后面有横杠的p标签

a[href^="http"] a标签下的href以http开头

a[href$="rar"] a标签下的href以rar结尾

a[href*="o"] a标签下的href有o

p::first-line  选择p标签下第一行

a:before(a::before),a:after(a::after) 伪元素

p::selection  选择被选中的文字

p::first-letter 选择p标签下第一个字

div:not(#container) 选择除idcontainer之外的所有div标签

 

p:first-child  找到P,然后找P的父级 再找父级下第一个元素是P(匹配的是某父元素的第一个子元素,可以说是结构上的第一个子元素。)

p:first-of-type 找到P,然后找P的父级 再找父级下第一个元素是P(匹配的是该类型的第一个,这里不再限制是第一个子元素了,只要是该类型元素的第一个就行了,当然这些元素的范围都是属于同一级的,也就是同辈的。)

p:last-child  找到P 然后找P的父级 再找父级下最后一个元素是P

p:last-of-type 找到P 然后找P的父级 再找父级下最后一个元素是P

li:nth-child(2)  找到li 然后找li的父级 再找父级下第二个元素是li

li:nth-of-type(2)

li:nth-last-child(2)  找到li 然后找li的父级 再找父级下倒数第二元素个是li

li:nth-last-of-type(2) 

li:nth-child(even)  找到li的所有偶数位(2N)

li:nth-last-child(even)

li:nth-last-child(odd) 找到li的所有奇数位(2N-1 或 2n+1)

li:nth-last-child(odd)

li:only-child 找到li是父级的唯一子元素(选择器选择的是父元素中只有一个子元素,而且只有唯一的一个子元素)

li:only-of-type 表示一个元素他有很多个子元素,而其中只有一种类型的子元素是唯一的,使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。

 

 

 

css选择器