css3增强的选择器功能

最新推荐文章于 2024-01-18 10:00:51 发布

java-小生

最新推荐文章于 2024-01-18 10:00:51 发布

阅读量239

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_40792591/article/details/100772452

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、属性选择器：

以前的lang属性选择器可能只有一种

<li lang="">才能进行生效

但是在css3中，属性选择器得到了增强，

E[attr]选择具有attr属性的E元素进行渲染

E[attr="val"]选择具有attr属性值等于value的E元素

E[attr^="val"]选择具有以val开头的E元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>属性选择器</title>
        <style type="text/css">
            ul{
                margin:0;
                padding:10px 10px 10px 30px;
            }
            li{
                margin:1px;
                font-family:Couier New;
                font-weight:bold;
            }
            li[lang^="a"]{
                background-color:#F60;
            }
        </style>
    </head>
    <body>
         <ul>
             <li lang="aa">lang=aff aaaaaa</li>
             <li lang="ab">lang="beffeffef</li>
             <li lang="ff">lang="beifngnwien"</li>
             <li lang="bb">lang="beingfgj"</li>
             <li lang="ak">lang="beinggnineg"</li>
         </ul>
    </body>
</html>

E[attr*="val"]选择具有val字符串的E元素（相当于具有子串,就行了）

E[attr$="val"]选择具有val字符串结尾的E元素

2、结构伪类选择器

作用：通过文档结构的相互关系来匹配特定的元素。可以减少class属性和id属性的定义，使得文档更加简洁。

E:first-child：匹配第一个为E元素；

E:last-child: 匹配最后一个E元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>属性选择器</title>
        <style type="text/css">
            table{
                border-collapse:collapse;
                font-size:12px;
            }
            table td{
                font-size:12px;
                padding:0 3px;
                line-height:22px;
            }
            tr:nth-child(even){
                background: #e6e6e6;
            }
            tr:first-child
            {
                background:-webkit-gradient(linear,left top,left bottom,from(#dbdbdb),to(#cccccc));
                background:-moz-linear-gradient(left,#dbdbdb,#cccccc);
            }
            tr:last-child{
                background:red;
            }
        </style>
    </head>
    <body>
        数据表格
         <table width="100%" border="1" bordercolor="#cccccc" cellpadding="0" cellspacing="0">
             <tr>
                 <td>1编号</td><td>标题</td><td>作者</td><td>时间</td>
             </tr> 
             <tr>
                 <td>2</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
             </tr>
         </table>
    </body>
</html>

通过观察，我们可以发现table中的第一行是灰色，第二行是红色

第一行是灰色：因为它是第一个儿子，所以它的属性是tr:first-child中的属性

第二行是红色：因为它是最后一个儿子，所以它的属性是tr：last-child中的属性

还有nth-child(n)：n是它的第几个儿子，匹配跟上面的类似

E：nth-last-child(n)：倒数第几个

java-小生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3增强的选择器功能

1、属性选择器：以前的lang属性选择器可能只有一种<li lang="">才能进行生效但是在css3中，属性选择器得到了增强，E[attr]选择具有attr属性的E元素进行渲染E[attr="val"]选择具有attr属性值等于value的E元素E[attr^="val"]选择具有以val开头的E元素<!DOCTYPE html><h...
复制链接

扫一扫