首页 > 代码库 > 6月14号=》136页-145页
6月14号=》136页-145页
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}