CSS各种选择器【一】

来源：互联网发布：app mac下载失败编辑：程序博客网时间：2024/05/22 15:22

个人整理的一份尽量简单详细的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>