TOOLS|CSS选择器和参考手册 css选择器|css选择器参考手册

CSS的基本语法

选择器:通过选择器可以选中页面中的指定元素.声明块:通过声明块来指定元素设置样式. 声明块由一个一个的声明组成声明是由一个名值对结构:一个样式名对应一个样式值,名和值之间以:连接,以; 结尾(如: color:blue; )

CSS的选择器常用选择器

元素选择器

元素选择器作用:根据标签名来选中指定的元素语法:标签名{} 例子:p{} h1{} div{}

ID选择器

id选择器作用:根据元素的ID属性值选中一个元素语法:id属性值{} 例子:#name{} #id{}

类选择器

类选择器作用:根据元素的class属性值选中一组元素语法:class属性值{} 例子:.name{} .intro{}

通配选择器

通配选择器作用:选中页面中所有元素语法:* 例子:*{}

复合选择器

交集选择器

交集选择器作用: 选中同时符合多个条件的元素语法: 选择器1选择器2选择器n{} 注意点:交集选择器中如果有元素选择器,必须使用元素选择器开头例子: div.class{}

并集选择器(选择器分组)

并集选择器(选择器分组) 作用: 同时选择多个选择器对应的元素语法: 选择器1,选择器2,选择器n{} 例子: div,span,.class{}

关系选择器
关系说明:

父元素:直接包含子元素的父元素子元素:直接被父元素包含的元素是子元素祖先元素:直接或间接包含后代元素的叫祖先元素,一个元素的父元素也是他的祖先元素后代元素:直接或间接被祖先元素包含的元素叫后代元素,子元素也是后代元素兄弟元素:拥有相同父元素的是兄弟元素

子元素选择器

子元素选择器作用:选中指定父元素的指定子元素语法: 父元素 > 子元素

后代元素选择器

后代元素选择器作用: 选中指定元素内的指定后代元素语法: 祖先后代[中间有个空格]

选择下一个兄弟

选择下一个兄弟语法: 前一个 + 下一个[中间有个 + 号] 注意点: 紧挨着的兄弟元素

选择下边所有兄弟

选择下边所有兄弟语法: 兄~弟[中间有个 ~] 注意点: 只可以选择下边所有兄弟

属性选择器

[属性名]p[title] 选择含有指定属性的元素 [属性名=属性值] p[title=abc] 选择含有指定属性和属性值的元素 [属性名^=属性值] p[title^=abc] 选择属性值以指定值开头的元素 [属性名$=属性值]p[title$=abc] 选择属性值以指定值结尾的元素 [属性名*=属性值]p[title*=abc] 选择属性值中含有某值的元素的元素

伪类选择器
伪类用来描述一个元素的特殊状态,比如：第一个子元素、被点击的元素、鼠标移入的元素…

伪类（不存在的类，特殊的类）伪类一般情况下都是使用:开头 :first-child 第一个子元素 :last-child 最后一个子元素 :nth-child() 选中第n个子元素特殊值： n 第n个 n的范围0到正无穷 2n 或 even 表示选中偶数位的元素 2n+1 或 odd 表示选中奇数位的元素- 以上这些伪类都是根据所有的子元素进行排序:first-of-type :last-of-type :nth-of-type() - 这几个伪类的功能和上述的类似，不通点是他们是在同类型元素中进行排序- :not() 否定伪类 - 将符合条件的元素从选择器中去除

伪元素选择器

伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）伪元素使用 :: 开头::first-letter 表示第一个字母 ::first-line 表示第一行 ::selection 表示选中的内容 ::before 元素的开始 ::after 元素的最后 - before 和 after 必须结合content属性来使用

选择器的权重样式的冲突当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定

选择器的权重内联样式1,0,0,0 id选择器0,1,0,0 类和伪类选择器0,0,1,0 元素选择器0,0,0,1 通配选择器0,0,0,0 继承的样式没有优先级比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的）.

选择器的累加不会超过其最大的数量级，类选择器在高也不会超过id选择器
如果优先级计算后相同，此时则优先使用靠下的样式

可以在某一个样式的后边添加 !important ，则此时该样式会获取到最高的优先级，甚至超过内联样式，
注意：在开发中一定要慎用！

CSS 选择器参考手册

选择器	例子	例子描述	CSS版本
. class	.intro	选择 class="intro" 的所有元素。	1
# id	#firstname	选择 id="firstname" 的所有元素。	1
*	*	选择所有元素。	2
element	p	选择所有元素。	1
element , element	div,p	选择所有元素和所有元素。	1
element element	div p	选择元素内部的所有元素。	1
element > element	div>p	选择父元素为元素的所有元素。	2
element + element	div+p	选择紧接在元素之后的所有元素。	2
[ attribute ]	[target]	选择带有 target 属性所有元素。	2
[ attribute = value ]	[target=_blank]	选择 target="_blank" 的所有元素。	2
[ attribute ~= value ]	[title~=flower]	选择 title 属性包含单词 "flower" 的所有元素。	2
[ attribute \|= value ]	[lang\|=en]	选择 lang 属性值以 "en" 开头的所有元素。	2
:link	a:link	选择所有未被访问的链接。	1
:visited	a:visited	选择所有已被访问的链接。	1
:active	a:active	选择活动链接。	1
:hover	a:hover	选择鼠标指针位于其上的链接。	1
:focus	input:focus	选择获得焦点的 input 元素。	2
:first-letter	p:first-letter	选择每个元素的首字母。	1
:first-line	p:first-line	选择每个元素的首行。	1
:first-child	p:first-child	选择属于父元素的第一个子元素的每个元素。	2
:before	p:before	在每个元素的内容之前插入内容。	2
:after	p:after	在每个元素的内容之后插入内容。	2
:lang( language )	p:lang(it)	选择带有以 "it" 开头的 lang 属性值的每个元素。	2
element1 ~ element2	p~ul	选择前面有元素的每个元素。	3
[ attribute ^= value ]	a[src^="https"]	选择其 src 属性值以 "https" 开头的每个元素。	3
[ attribute $= value ]	a[src$=".pdf"]	选择其 src 属性以 ".pdf" 结尾的所有元素。	3
[ attribute = value* ]	a[src*="abc"]	选择其 src 属性中包含 "abc" 子串的每个元素。	3
:first-of-type	p:first-of-type	选择属于其父元素的首个元素的每个元素。	3
:last-of-type	p:last-of-type	选择属于其父元素的最后元素的每个元素。	3
:only-of-type	p:only-of-type	选择属于其父元素唯一的元素的每个元素。	3
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个元素。	3
:nth-child( n )	p:nth-child(2)	选择属于其父元素的第二个子元素的每个元素。	3
:nth-last-child( n )	p:nth-last-child(2)	同上，从最后一个子元素开始计数。	3
:nth-of-type( n )	p:nth-of-type(2)	选择属于其父元素第二个元素的每个元素。	3
:nth-last-of-type( n )	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数。	3
:last-child	p:last-child	选择属于其父元素最后一个子元素每个元素。	3
:root	:root	选择文档的根元素。	3
:empty	p:empty	选择没有子元素的每个元素（包括文本节点）。	3
:target	#news:target	选择当前活动的 #news 元素。	3
:enabled	input:enabled	选择每个启用的元素。	3
:disabled	input:disabled	选择每个禁用的元素	3
:checked	input:checked	选择每个被选中的元素。	3
:not( selector )	:not(p)	选择非【TOOLS\|CSS选择器和参考手册】元素的每个元素。	3
::selection	::selection	选择被用户选取的元素部分。	3