您的位置：首页 > Web前端 > CSS

CSS各种选择器 【一】

2017-11-14 16:06 337 查看

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



效果图：



不过稍微有点遗憾的是这个选择器不能兼容IE6
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css3 css 编辑器 属性选择器
相关文章推荐
新的分享
章节导航