• 技术文章 >web前端 >css教程

    属性选择器和伪类选择器的使用方法

    php中世界最好的语言php中世界最好的语言2017-11-24 10:00:43原创1442
    今天我们来给大家说一下属性选择器和伪类选择器的使用方法和相关的联系以及区别,下面给大家举一个小列子。

    属性选择器:

    [attr~="value"] 单词 单词空格单词 单词必须value有效

    [attr|="value"] value打头 或者 value-单词

    注意:

    属性选择 都是用则很难规则表达式来判别 选择元素,效率要高一些

    伪类选择器:

    :before

    :after

    :lang(val) val/val-单词

    :nth-child(n) n从1开始算起 odd基数 even偶数

    :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <link href="css/index.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <!--
    <p>aaaaaaa</p>
    <p>aaaaaaa</p>
    <p>aaaaaaa</p>
    --->
    <div>
           <p>aaa</p>
           <p>aaa</p>
           <p>aaa</p>
           <p>aaa</p>
    </div>
    </body>
    </html>
    Css部分:
    @charset "utf-8";
    /* CSS Document */
    /*
    p:before{
           content:"ccc"; 
    }
     
    p:lang(en){
           border:1px solid #ff0000;  
    }
    p:nth-child(even){
           background:#F00; 
    }
    */
    p:nth-of-type(3){  /* p标记的父元素 下的 第3个p元素*/
           background:#F00; 
    }

    相关阅读:

    怎样隐藏溢出DIV的内容

    CSS布局有哪些技巧

    CSS里字体样式怎么设置

    以上就是属性选择器和伪类选择器的使用方法的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:CSS3的text-shadow字体阴影怎么使用 下一篇:Css3动画属性怎么使用
    Web大前端开发直播班

    相关文章推荐

    • web前端笔试题库之CSS篇• 聊聊如何用CSS box-shadow创建像素创意动画• 纯CSS实现水波纹的电池充电动画特效• 一文了解CSS3中的新特性 ::target-text 选择器• 关于 CSS 变量的一些你可能不了解的事!

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网