首页 > 代码库 > 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}