当前位置:首页 » HTML/CSS

CSS3学习系列之选择器(四)

2017-06-19 14:21 本站整理 浏览(23)
  • 使用选择器来插入文字

css2中,使用before选择器在元素前面插入内容,使用after选择器在元素后面插入内容,在选择器的content属性中定义要插入的内容。将content属性值设定为none,然后在不需要插入内容的元素中将class属性值设定为这个给定的类名就可以了。另外,在CSS2.1中,除了none属性值外,还未content属性添加了一个normal属性值,其作用与使用方法none属性值的作用相同,并且使用方法也相同。从css2.1开始,值右当使用before选择与after选择器的时候,normal属性值的作用才与none属性值的作用相同,都是不让选择器在个别元素的前面或后面插入内容,但是none属性值只能应用在这两个选择器中,而normal属性值还可以应用在其他用来插入内容的选择器中,而在css2中,只有before选择器与after选择器能够用来在元素的前面或后面插入内容,所以在两者的作用完全相同,在css3中,已经追加了其他一些可以插入内容的选择的提案,针对这一类选择器,就只能用normal属性值了,而且normal属性值的作用也会根据选择器的不同而发生变化。

  •  插入图像文件
h2:before{

   content:url(mark.png)

}

<h2>你好</h2>

目前firefox、safari、opera浏览器都支持这种插入图像文件的功能,在ie8中只支持插入文字的功能,不支持插入图像文件的功能。

另外在css3的定义中还可以通过url属性来插入音频文件、视频文件等其他格式的文件,但目前还没有得到任何浏览器的支持。

  • 将alt属性的值作为图像的标题来显示

如果在content属性中通过”attr(属性名)”这种形式来指定attr属性值,可以将某个属性的属性值显示出来,例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>attr属性的使用示例</title>
    <style>
        img:after{
            content:attr(alt);
            display: block;
            text-align: center;
            margin-top: 5px;
        }
    </style>
</head>
<body>
<div>
  <p><img src="sky.jpg" alt="蓝天白云"/></p>
</div>
</body>
</html>
  •  在多个标题前加上连续编号

在content属性中使用counter属性值来针对多个项目追加连续编号,使用方法如下所示:

<元素>:before{

  content:counter(计数器名);

}

使用计数器来计算编号,计数器可以任意命名。

另外,还需要在元素的样式中追加对元素的counter-increment属性的指定,为了使用连续编号,需要将counter-increment属性的属性值设定为before选择器或after选择的counter属性值中所指定的计数器名。代码如下:

<元素>{

    Counter-increment:before选择器或after选择器中指定的计数器名

}

例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对多个项目追加连续编号的示例</title>
    <style>
        h1:before {
            content:counter(mycounter);
        }
        h1{
            counter-increment: mycounter;
        }
    </style>
</head>
<body>
<div>
    <h1>大标题</h1>
    <p>示例文字</p>
    <h1>大标题</h1>
    <p>示例文字</p>
    <h1>大标题</h1>
    <p>示例文字</p>
</div>
</body>
</html>
  • 在项目编号中追加文字

可以在插入的项目编号中加入文字,使项目编号变成类似”第1章”之类的带文字的编号。例如:

h1:before{

content:’第’counter(mycounter)’章’

}
  •  指定编号的种类

用before选择器或after选择器的content属性,不仅可以追加数字编号,还可以追加字母编号或罗马数字编号。使用如下所示的方法指定编号种类。

content:counter(计数器名,编号种类)

可以使用list-style-type属性的值来指定编号的种类,list-style-type为指定列表编号时所用的属性。

  • 编号嵌套

使用嵌套编号如下:

h1{

  counter-increment:mycounter

  counter-reset:subcounter

}

例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编号嵌套示例</title>
    <style>
        h1:before {
            content:counter(mycounter)'.';
        }
        h1{
            counter-increment: mycounter;
            counter-reset: subcounter;
        }
        h2:before{
            content: counter(subcounter)'.';
        }
        h2{
            counter-increment: subcounter;
            margin-left: 40px;
        }
    </style>
</head>
<body>
<h1>大标题</h1>
<h2>中标题</h2>
<h2>中标题</h2>
<h2>中标题</h2>
<h1>大标题</h1>
<h2>中标题</h2>
<h2>中标题</h2>
<h2>中标题</h2>
</body>
</html>
  • 中编号中嵌入大编号

可以将大编号嵌入在中编号中。例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编号多层嵌入的示例</title>
    <style>
        h1:before {
            content:counter(mycounter)'.';
        }
        h1{
            counter-increment: mycounter;
            counter-reset: subcounter;
        }
        h2:before{
            content: counter(mycounter)'-'counter(subcounter)'.';
        }
        h2{
            counter-increment: subcounter;
            counter-reset: subsubcounter;
            margin-left: 40px;
        }
        h3:before{
            content: counter(mycounter)'-'counter(subconter)'-'counter(subsubcounter)'.';
        }
        h3{
            counter-increment: subsubcounter;
            margin-left: 40px;
        }
    </style>
</head>
<body>
<h1>大标题</h1>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>
<h1>大标题</h1>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>
</body>
</html>
  • 在字符串两边添加嵌套文字符号

可以使用conten属性的open-quote属性值与close-quote属性值在字符串两边添加诸如括号,单引号,双引号之类的嵌套文字符号,open-quote属性值用于添加开始的嵌套文字符号,close-quote属性值用于添加结尾的嵌套文字符号。

例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加嵌套文字符号的示例</title>
    <style>
        h1:before {
           content: open-quote;
        }
        h1:after{
            content: close-quote;
        }
      h1{
          quotes:"("")";
      }
    </style>
</head>
<body>
<h1>标题</h1>
</body>
</html>