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	选择所有 <p> 元素。	1
element , element	div,p	选择所有 <div> 元素和所有 <p> 元素。	1
element element	div p	选择 <div> 元素内部的所有 <p> 元素。	1
element > element	div>p	选择父元素为 <div> 元素的所有 <p> 元素。	2
element + element	div+p	选择紧接在 <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	选择每个 <p> 元素的首字母。	1
:first-line	p:first-line	选择每个 <p> 元素的首行。	1
:first-child	p:first-child	选择属于父元素的第一个子元素的每个 <p> 元素。	2
:before	p:before	在每个 <p> 元素的内容之前插入内容。	2
:after	p:after	在每个 <p> 元素的内容之后插入内容。	2
:lang( language )	p:lang(it)	选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。	2
element1 ~ element2	p~ul	选择前面有 <p> 元素的每个 <ul> 元素。	3
[ attribute ^= value ]	a[src^="https"]	选择其 src 属性值以 "https" 开头的每个 <a> 元素。	3
[ attribute $= value ]	a[src$=".pdf"]	选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。	3
[ attribute *= value ]	a[src*="abc"]	选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。	3
:first-of-type	p:first-of-type	选择属于其父元素的首个 <p> 元素的每个 <p> 元素。	3
:last-of-type	p:last-of-type	选择属于其父元素的最后 <p> 元素的每个 <p> 元素。	3
:only-of-type	p:only-of-type	选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。	3
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个 <p> 元素。	3
:nth-child( n )	p:nth-child(2)	选择属于其父元素的第二个子元素的每个 <p> 元素。	3
:nth-last-child( n )	p:nth-last-child(2)	同上，从最后一个子元素开始计数。	3
:nth-of-type( n )	p:nth-of-type(2)	选择属于其父元素第二个 <p> 元素的每个 <p> 元素。	3
:nth-last-of-type( n )	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数。	3
:last-child	p:last-child	选择属于其父元素最后一个子元素每个 <p> 元素。	3
:root	:root	选择文档的根元素。	3
:empty	p:empty	选择没有子元素的每个 <p> 元素（包括文本节点）。	3
:target	#news:target	选择当前活动的 #news 元素。	3
:enabled	input:enabled	选择每个启用的 <input> 元素。	3
:disabled	input:disabled	选择每个禁用的 <input> 元素	3
:checked	input:checked	选择每个被选中的 <input> 元素。	3
:not( selector )	:not(p)	选择非 <p> 元素的每个元素。	3
::selection	::selection	选择被用户选取的元素部分。	3