CSS3选择器/使用content属性来插入项目编号

最新推荐文章于 2019-11-19 16:29:44 发布

chenggou9601

最新推荐文章于 2019-11-19 16:29:44 发布

阅读量145

点赞数

原文链接：https://my.oschina.net/u/3161974/blog/916815

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Insert title here</title>
    <style>
       #image-boarder{

           width: 450px;
           border:15px solid transparent;
           padding-left: 14px;
           padding-top: 20px;
          border-image: url(border.png) 30 30 round;
       }
       /*灵活运用属性选择器  css3中属性选择器 [att*=val] 如果元素用att表示的属性的属性值中包含用val指定的字符
       [att^=val] 如果元素用att表示的属性的属性值的开头字符为用val指定的字符
       [att$=val] 如果元素用att表示的属性的属性值的结尾字符为用val指定的字符

       */
        a[href$=\/]:after,a[href$=htm]:after,a[href$=html]:after{
            content: "Web网页";
            color: red;
        }
        a[href$=jpg]:after{
            content: "JPEG图像文件";
            color: green;
        }
        /*伪类选择器与类选择器的区别是，类选择器可以随便起名，但伪类选择器是css中已经定义好的选择器，不能随便起名
        first-line伪元素选择器用于向某个元素中的第一行文字使用样式
        first-letter伪元素选择器用于向某个元素中的文字首字母或第一个字使用样式
        before伪元素选择器用于在某个元素之前插入一些内容
        after伪元素选择器用于在某个元素之后插入一些内容
        */
        p:first-line{
            color: #0000FF;
        }
        p:first-letter{
            color: red;
        }
        p:before{
            content: "加油";
        }
        p:after{
            content: "坚强";
        }
        /*CSS3中的结构性伪类选择器 允许开发者根据文档树中的结构来指定元素的样式
        root选择器将样式绑定到页面的根元素中（根元素是指位于文档树中最顶层结构的元素）
        not选择器 如果想对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式时，可以使用not选择器
        empty选择器 使用empty选择器来指定当元素中内容为空白时使用的样式
        target选择器 使用target选择器来对页面中某个target元素指定样式，该样式只在用户点击了页面中的超链接，并跳转到target元素后起作用
        */
        :root{
            background-color: #ff87bc;
        }
        body *:not(p){
            background-color: limegreen;
        }
        :empty{
            background-color: yellow;
        }
        :target{
            background-color: #ff23f1;
        }
        /*选择器first-child、last-child、nth-child和nth-last-child
        利用这几个选择器，能够特别针对一个父元素中的第一个子元素、最后一个子元素、指定号的子元素，甚至第偶数个或第奇数个元素进行样式的指定
        如果使用nth-child选择器与nth-last-child选择器，不仅可以指定某个父元素中第一个子元素以及最后一个子元素的样式，还可以针对父元素中
        某个指定序号的子元素来指定样式。这两个选择器的样式指定方法如下：
        nth-child(n){
        //指定样式 nth-child(3)表示第三个子元素
        }
        <子元素>:nth-last-child(n){
        //指定样式 nth-last-child(3)表示倒数第三个子元素
        }
        nth-child选择器与nth-last-child选择器还可以用来对某个父元素中所有第奇数个子元素或第偶数个子元素使用样式。使用方法如下：
        nth-child(odd){
        //指定样式
        }
        //所有正数下来的第偶数个子元素
        <子元素>:nth-child(even){
        //指定样式
        }
        //所有倒数上去的第奇数个子元素
        <子元素>:nth-last-child(odd){}
         //所有倒数上去的第偶数个子元素
        <子元素>:nth-last-child(even){}
        使用选择器nth-of-type和nth-last-of-type时css3在计算子元素是第奇数个子元素还是第偶数个子元素时，就只针对同类型的子元素进行计算
        采用循环指定的方式nth-child(an+b)a表示每次循环中共包括几种样式，b表示指定的样式在循环中所处的位置
        */
        /*li:first-child{*/
            /*font-size: 30px;*/
        /*}*/
        /*li:last-child{*/
           /*font-size: 20px;*/
        /*}*/
        li:nth-child(5n+1){
            background-color: yellow;
        }
        li:nth-child(5n+2){
            background-color: #cd4893;
        }
        li:nth-child(5n+3){
            background-color: red;
        }
        li:nth-child(5n+4){
            background-color: white;
        }
       li:nth-child(5n+5){
            background-color: white;
        }
        /*
        使用only-child选择器来代替使用"nth-child(1):nth-last-child(1)"(指定当前某个父元素中只有一个子元素时才使用的样式)的实现方法
        */

        /*
        UI状态伪类选择器，这些选择器的共同特征是：指定样式只有当元素处于某种状态下时才起作用，在默认状态下不起作用.
        E:hover伪类选择器用来被指定当鼠标指针移动到元素上时元素所使用的样式
        E:active伪类选择器被用来指定元素被激活（鼠标在元素上按下还没有松开）时使用的样式
        E:focus伪类选择器被用来指定元素获得光标焦点时使用的样式，主要在文本框控件获得焦点并进行文字输入时使用
        E:enabled伪类选择器用来指定当元素处于可用状态时的样式
        E:disabled伪类选择器用来指定当前元素处于不可用状态时的样式
        E:read-only伪类选择器用来指定当元素处于只读状态时的样式
        E:read-write伪类选择器用来指定当元素处于非只读状态时的样式
        E:checked伪类选择器用来指定当表单中的radio单选框或checkbox复选框处于选取状态时的样式
        E:default选择器用来指定当前页面打开时默认处于选取状态的单选框或复选框控件的样式。
        E:indeterminate伪类选择器用来指定当页面打开时，一组单选框中没有任何一个单选框被设定为选取状态时整组单选框的样式，如果用户选取了其中一个，则取消指定
        E::selection伪类选择器用来指定当元素处于选中状态时的样式
        E:invalid伪类选择器用来指定，当元素内容不能通过HTML5通过使用元素的诸如required、pattern等属性所指定的检查或元素内容不符合元素的规定格式时的样式
        E:vaild伪类选择器用来指定，当元素内容通过HTML5通过使用元素的诸如required、pattern等属性所指定的检查或元素内容符合元素的规定格式时的样式
        E:required伪类选择器用来指定允许使用required属性，且已经指定了required属性的input元素、select元素以及textarea元素的样式
        E:optional伪类选择器用来指定允许使用required属性，且未制定required属性的input元素、select元素以及textarea元素的样式
        E:in-range伪类选择器用来指定当元素的有效值被限定在一定范围内，且实际输入值在该范围内时使用的样式
        E:out-of-range伪类选择器用来指定当元素的有效值被限定在一段范围内，但实际输入值在该范围之外时使用的样式
        */

        /*
        通用兄弟元素选择器
        它用来指定位于同一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式。它的使用方法如下：
        <子元素> ~<子元素之后的同级元素>{
        指定样式
        }
        */
        li.new:after{
            content:url(border.png);
        }
        .hh:after{
            content: attr(alt);
            display: block;
            text-align: center;
            /*margin-top: 5px;*/
        }
    </style>

</head>
<body>
<div id="image-boarder">
    .示例文字1<br/>
    .示例文字2<br/>
    .示例文字3<br/>
    .示例文字4<br/>
    .示例文字4<br/>
    .示例文字4<br/>
    .示例文字4<br/>
    .示例文字4<br/>
</div>
<ul>
    <li><a href="#text1">HTML5+CSS3权威指南</a></li>
    <li><a href="http://Lulingniu/CSS3.htm">CSS3的新特性</a></li>
    <li><a href="photo.jpg">图像素材</a></li>
</ul>
<p>段落中的第一行. <br/>段落中的第二行</p>
<table border="1" cellpadding="0" cellspacing="0">
    <tr><td>A</td><td>B</td><td>C</td></tr>
    <tr><td>D</td><td>E</td><td></td></tr>
</table>
<div id="text1">
    <h2>示例文字1</h2>
    <p>...此处略去</p>
</div>
<div id="text2">
    <h2>示例文字1</h2>
    <p>...此处略去</p>
</div>
<ul>
    <li class="new">项目列表1</li>
    <li>项目列表2</li>
    <li>项目列表3</li>
    <li>项目列表4</li>
    <li>项目列表5</li>
    <li>项目列表6</li>
    <li>项目列表7</li>
    <li>项目列表8</li>
    <li>项目列表9</li>
    <li>项目列表10</li>
    <li>项目列表11</li>
    <li>项目列表12</li>
</ul>
<p><img class="hh" src="border.png" alt="蓝天白云"></p>

</body>
</html>

//使用content属性来插入项目编号

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Insert title here</title>
    <style>
        /*使用content属性来插入项目编号*/
    /*h1:before{*/
        /*content: '第'counter(mycounter)'章 ';*/
        /*color: aqua;*/
        /*font-size: 42px;*/
    /*}*/
        /*h1{*/
            /*counter-increment: mycounter;*/
        /*}*/
        /*指定编号的种类*/
        /*h1:before{*/
            /*content: counter(mycounter,upper-alpha) '.';*/
            /*color: aquamarine;*/
            /*font-size: 42px;*/
        /*}*/
        /*h1{*/
            /*counter-increment: mycounter;*/
        /*}*/
        /*编号嵌套*/
        /*h1:before{*/
            /*content: counter(mycounter) '. ';*/
        /*}*/
        /*h1{*/
            /*counter-increment: mycounter;*/
            /*!*六个中标题的编号是连续的，如果要将第二个大标题里的中标题重新开始编序的话，需要在大标题中使用counter-reset属性将中编号进行重置*!*/
            /*counter-reset: subcounter;*/
        /*}*/
        /*h2:before{*/
            /*content: counter(mycounter) '-' counter(subcounter) '. ';*/
        /*}*/
        /*h2{*/
            /*counter-increment: subcounter;*/
            /*margin-left: 40px;*/
        /*}*/
        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(subcounter) '-' counter(subsubcounter);
        }
        h3{
            counter-increment: subsubcounter;
            margin-left: 50px;
        }

/*添加嵌套文字符号 可以使用content属性的open-quote属性值和close-quote属性值在字符串两边添加诸如括号、单引号、双引号之类的嵌套
文字符号。open-quote属性值用来添加开始的嵌套文字符号，close-quote属性值用于添加结尾的嵌套文字符号。另外在元素的
样式中使用quotes属性来指定使用什么嵌套文字符号
*/
h1:before{
    content: open-quote;
}
h1:after{
    content: close-quote;
}
h1{
    quotes: "<" ">";
}

</style>
</head>
<body>
<!--<h1>大标题</h1>-->
<!--<p>示例文字</p>-->
<!--<h1>大标题</h1>-->
<!--<p>示例文字</p>-->
<!--<h1>大标题</h1>-->
<!--<p>示例文字</p>-->
        <h1>大标题</h1>
        <h2>中标题</h2>
        <h3>小标题</h3>
        <h3>小标题</h3>
        <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>
        <h2>中标题</h2>
        <h3>小标题</h3>
        <h3>小标题</h3>
</body>
</html>

转载于:https://my.oschina.net/u/3161974/blog/916815

chenggou9601

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3选择器/使用content属性来插入项目编号

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta htt...
复制链接

扫一扫