选择器示例示例说明CSS

CSS1

.class                                       .intro选择所有class="intro"的元素

#id                                           #firstname选择所有id="firstname"的元素

element                                   p选择所有<p>元素

element,element                     div,p选择所有<div>元素和<p>元素

elementelement                      div p选择<div>元素内的所有<p>元素

:link                                         a:link选择所有未访问链接

:visited                                    a:visited选择所有访问过的链接

:hover                                     a:hover选择鼠标在链接上面时

:active                                    a:active选择活动链接

        ###注意：a标签这四种选择器一起使用时要按照【LVHA原则---Love Hate】

:first-letter                              p:first-letter选择每一个元素的第一个字母

:first-line                                p:first-line选择每一个元素的第一行

CSS2

*                                                *选择所有元素

element>element                      div>p选择所有父级是 <div> 元素的 <p> 元素

element+element                      div+p选择所有紧接着<div>元素之后的<p>元素

[attribute]                                   [target]选择所有带有target属性元素

[attribute=value]                        [target=-blank]选择所有使用target="_blank"的元素

[attribute~=value]                      [title~=flower]选择标题属性包含单词"flower"的所有元素

[attribute|=language]                [lang|=en]选择 lang 属性以 en 为开头的所有元素

:focus                                        input:focus选择具有焦点的输入元素

:first-child                                  p:first-child指定只有当<p>元素是其父级的第一个子级的样式

:before                                      p:before在每个<p>元素之前插入内容

:after                                         p:after在每个<p>元素之后插入内容

:lang(language)                        p:lang(it)选择一个lang属性的起始值="it"的所有<p>元素

CSS3

element1~element2                p~ul选择p元素之后的每一个ul元素

[attribute^=value]                    a[src^="https"]选择每一个src属性的值以"https"开头的元素

[attribute$=value]                    a[src$=".pdf"]选择每一个src属性的值以".pdf"结尾的元素

[attribute*=value]                     a[src*="runoob"]选择每一个src属性的值包含子字符串"runoob"的元素

:first-of-type                             p:first-of-type选择每个p元素是其父级的第一个p元素

:last-of-type                             p:last-of-type选择每个p元素是其父级的最后一个p元素

:only-of-type                            p:only-of-type选择每个p元素是其父级的唯一p元素

:nth-of-type(n)                         p:nth-of-type(2)选择每个p元素是其父级的第二个p元素

:nth-last-of-type(n)                  p:nth-last-of-type(2)选择每个p元素的是其父级的第二个p元素，从最后一个子项计数

:only-child                               p:only-child选择每个p元素是其父级的唯一子元素

:nth-child(n)                            p:nth-child(2)选择每个p元素是其父级的第二个子元素

:nth-last-child(n)                     p:nth-last-child(2)选择每个p元素的是其父级的第二个子元素，从最后一个子项计数

:last-child                               p:last-child选择每个p元素是其父级的最后一个子级

:empty                                    p:empty选择每个没有任何子级的p元素（包括文本节点）

:target                                    #news:target选择当前活动的#news元素（包含该锚名称的点击的URL）

:enabled                                input:enabled选择每一个已启用的输入元素

:disabled                               input:disabled选择每一个禁用的输入元素

:checked                               input:checked选择每个选中的输入元素

:not(selector)                       :not(p)选择每个并非p元素的元素

::selection                            ::selection匹配元素中被用户选中或处于高亮状态的部分

:read-write                            :read-write用于匹配可读及可写的元素

:read-only                            :read-only用于匹配设置 "readonly"（只读） 属性的元素

:optional                               :optional用于匹配可选的输入元素

:required                               :required用于匹配设置了 "required" 属性的元素

:out-of-range                        :out-of-range匹配值在指定区间之外的input元素

:in-range                               :in-range匹配值在指定区间之内的input元素

:valid                                    :valid用于匹配输入值为合法的元素

:invalid                                  :invalid用于匹配输入值为非法的元素

优先级

    行内样式 > 页内样式 > 外部引用样式 > 浏览器默认样式

    !important > 行内 > ID > 伪类|类 | 属性选择  > 标签  > 伪对象 >  通配符 > 继承