首页 > Web开发 > 详细

CSS3新增加的属性选择器

时间:2017-02-06 22:03:41      阅读:180      评论:0      收藏:0      [点我收藏+]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3新增加的属性选择器</title>
    <style type="text/css">
        /*input[class]表示选择input元素含有class属性*/
        input[class]{
            background-color: green;
        }
        /*查找class为classno3的改变属性*/
        input[class="classno3"]{
            background-color: red;
        }
        /*查找class中以t开头的*/
        input[name^=t]{
            background-color: blue;
        }
        /*查找class中以no1结尾的*/
        input[name$=no1]{
            background-color: pink;
        }
        /*查找class中含有a的元素*/
        input[name*=a]{
            background-color: silver;
        }
    </style>
</head>
<body>
    <input type="text" value="tom" name="tomno1" class="classno1"><br>
    <input type="text" value="jack" name="jackno1" class="classno2"><br>
    <input type="text" value="marry" name="marryno1" class="classno3"><br>
    <input type="text" value="chao" name="chaono4" class="classno4"><br>
    <input type="text" value="shan" name="shanno5" class="classno5"><br>
</body>
</html>


 

CSS3新增加的属性选择器






 

CSS3新增加的属性选择器

原文:http://www.cnblogs.com/qianjilou/p/6371857.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!