6.3.6　　包含选择器

　　　　代码示范：

　　　　　　//该样式仅对该父元素所指定的子元素起作用

　　　　　　父元素 父元素包含的元素{ 定义对该元素起作用的css样式 }

 

6.3.7　　css3新增的兄弟选择器

　　　　代码示范：

　　　　　　//该样式仅对某元素后面的兄弟元素起作用

　　　　　　某元素 ~ 某元素后面的兄弟元素{ 定义对该元素起作用的css样式 }

 

6.3.8　　选择器组合

　　　　代码示范：

　　　　　　//该样式对下列所有指定的元素起作用

　　　　　　元素1,元素2,元素3,元素4,元素5,{ 定义对该元素起作用的css样式 }

 

 6.4　　伪元素选择器

　　　　伪元素选择器并不是针对真正的元素使用的选择器，伪元素选择器只能针对css中已有的伪元素起作用。

　　　　css提供的伪元素选择器有如下几个：

　　　　　　：first-letter：该选择器对应的css样式对指定对象内的第一个字符起作用。该元素只能对块级元素起作用。

　　　　　　：first-line：该选择器对应的css样式对指定对象内的第一行内容起作用。该元素只能对块级元素起作用。

　　　　　　：before：该选择器与内容相关的属性结合使用，用于在指定对象内部的前端插入内容。

　　　　　　：after：该选择器与内容香菇的属性结合使用，用于在指定对象内部的尾端添加内容。

　　　　语法示范：

　　　　　　//该css样式只对下列块级元素内的第一个字符起作用。

　　　　　　块级元素：first-letter{ 定义对该元素起作用的css样式 }

 

　　　　　　//该css样式只对插入的文字起作用。

　　　　　　元素：before{ content：需要插入的文字； 定义对该元素起作用的css样式 }

 

6.4.1　　内容相关的属性

　　　　　　css支持的内容相关的属性有如下几个：

　　　　　　　　include-source：该属性的值应为url(url)，插入绝对或相对URL地址所对应的文档。

　　　　　　　　content：该属性的值可以使字符串、url(url)、attr(alt)、counter(name)、counter(name、list-style-type)、

　　　　　　　　　　　　　　open-quote、close-quote 等格式。该属性用于向指定元素之前或之后插入指定内容。

　　　　　　　　quotes：该属性用于为content属性定义open-quote 和close-quote，该属性的值可以是两个以空格分隔的字符串，

　　　　　　　　　　　　　　其中前面的字符串是 open-quote，后面的字符串是 close-quote。

　　　　　　　　counter-increment：该属性用于定义一个计数器。该属性的值就是所定义的计数器的名称。

　　　　　　　　counter-reset：该属性用于对指定的计数值复位。

　　　　　　上面介绍的content属性是核心，counter-increment、counter-reset都需要和content结合使用。

 

6.4.2　　插入图像

　　　　　　content属性的值除了支持普通的字符串之外，还可使用url(url)格式的值，这种格式的值可以用于插入图像。

　　　　　　　　代码示范：

　　　　　　　　　　//指定向元素内部的尾端插入content属性对应的内容

　　　　　　　　　　元素：after{ content:url("abc.gif")}

 

6.4.4　　配合quotes属性执行插入

　　　　　　代码示范：

　　　　　　　　//为指定x元素定义open-quote为<<，close-qutoe为>>

　　　　　　　　x元素：{ quotes: "<<" ">>"}

　　　　　　　　//为指定x元素的前端插入open-quote

　　　　　　　　x元素：before{ content: open-quote}

　　　　　　　　//为指定x元素的尾端插入close-quote

　　　　　　　　x元素：after{ content: close-quote}