CSS_复杂选择器

兄弟选择器

    相邻兄弟选择器：匹配指定元素的相邻兄弟元素。

        1.如果要选择紧接在另一个元素后的元素，而且二者都有相同的父元素，可以使用相邻选择器。

        2.使用加号（+）作为结合符。

    通用兄弟选择器：匹配某元素后面的所有兄弟元素。

        1.使用符号（~）作为结合符。

        2.两种元素必须拥有相同的父元素，但选择器2不必直接紧随选择器1之后。

属性选择器

   属性选择器能够将元素附带的属性用于选择器中，从而对带有指定属性的元素设置样式。

[id]	附带id属性的元素
p[id]	附带id属性的p元素
p[id][class]	附带id属性和class属性的p元素
p[id="sum"]	附带id属性的p元素，其中id属性的值为sum
p[class~="myClass"]	附带class属性的p元素，其中class属性的值是以空格隔开的单词列表myClass也是单词列表中的一个单词
p[class^="b"]	class属性值以b开头的所有p元素
p[class*="b"]	class属性中包含子串b的所有p元素
p[class$="b"]	class属性中以b结尾的所有p元素

伪类伪类

            :ta

选择器

    目标

rget,语法E:target选择匹配E的所有元素，且被URL指向。

            HTML中：

                <a href="#new1">跳转至内容1</a>    <div id="new1">内容1</div>

                <a href="#new2">跳转至内容2</a>    <a name="new2">内容2</a>

    结构伪类

:first-child	匹配属于其父元素的首个子元素
:last-child	匹配属于其父元素的最后一个子元素
:empty	匹配没有子元素（包括文本节点）的每个元素
:only-child	匹配属于其父元素的唯一子元素

   否定伪类

 

:not(selector)

匹配非指定元素/选择器的每个元素

   内容生成

        使用伪元素:before和:after

   内容content

        content属性与:before及:after伪元素配合来使用，来插入生成内容

 

        常用的取值

        -url:图像

        -字符创:纯文本

        -计数器

        如p:after{ content:url(); }