CSS各种选择器【一】

最新推荐文章于 2024-07-22 20:38:06 发布

freedom_文

最新推荐文章于 2024-07-22 20:38:06 发布

阅读量454

点赞数

分类专栏： CSS 文章标签： css3 css 编辑器属性选择器

本文链接：https://blog.csdn.net/freedomVenly/article/details/78531594

版权

CSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

个人整理的一份尽量简单详细的CSS选择器，方便阅读和使用！

先来说一下比较新的选择器： CSS3 的属性选择器：

以开头名称的一份来设置的选择器： ^=

div[id^=“pri”]{
color:red;
}
设置以 id 属性值以“pri”开头的所有div元素的样式

p[class^=“abc”]{
color:#faf;
}
设置以 class 属性值以 “abc”开头的所有p元素的样式

[data^=“sss”]{
color:#afa;
}

设置以自定义 data 属性值以“sss”开头的样式

其他的以此类推

有匹配开头的，自然也有以结尾值为准的选择器： $=

下面展示一下区别：

div[id$="ss"] 	 
设置以 id 属性值 以“ss”结尾的所有div元素 的样式

p[class$="dd"]
设置以 class 属性值 以 “dd”结尾的所有p元素 的样式   

 （代码用法同上）

还有一种匹配包含此字符（值）的选择器： *=

div[id*=“123”]

设置以 id 属性值包含“123”的所有div元素的样式

p[class*=“in”]

设置以 class 属性值包含“in”的所有p元素的样式

（代码用法同上）

实用代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器</title>

    <style>
        div[id^="pri"]{
            color:red;
        }

        p[class^="abc"]{
            color:#faf;
        }

        [data^="sss"]{
            color:#afa;
        }

        p[class$="dd"]{
            color:#aaf;
        }

        div[id$="ss"]{
            color:#99DF34;
        }

        div[id*="123"]{
            background: #00bcd4;
        }

        p[class*="in"]{
            background: #FF6FDE;
        }
    </style>
</head>
<body>

    <div id="print"> 打印 </div>

    <div id="primary"> 原色 </div>

    <p class="abc1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, corporis excepturi harum laudantium?</p>

    <p class="abcqqq">voluptate voluptatum. Alias autem consectetur expedita harum obcaecati pariatur perspiciatis rerum unde</p>

    <div data="sss2">Alias autem consectetur expedita harum</div>

    <div id="lkasss">consectetur expedita harum</div>

    <p class="xxdd">consectetur expedita harum</p>

    <div id="a1230">1234567890</div>

    <p class="paging">0987654321</p>
</body>
</html>