关系选择器
1. 后代选择器（E F）
作为元素E的后代的任何元素F。
例如：ol元素中包含的li元素以及li元素中包含的a元素
2. 子选择器（E> F）
作为E元素的直接子元素的任何元素F。也就是说F不可以被嵌套！
<h1>This is <strong>very</strong><strong>very</strong> important.</h1>
<h1>This is<em> really<strong>very</strong> </em>important.</h1>
h1 > strong {color:red;}
第一个h1中的两个very都会变红，而第二个不会！
3. 相邻兄弟选择器（E +F）
匹配与E具有相同的父元素并为紧挨着E之后的任何元素F
例如：li+li 定位为指定容器中除第一个li之外所有li元素
4. 一般兄弟选择器（E ~F）
将匹配与E元素具有相同父元素并且标记中位于E之后的任何元素F
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS3选择器</title>
<style type="text/css">
*{margin:0;padding:0;}
.demo {
margin:0 auto;
width: 300px;
border: 1px solid #ccc;
padding: 10px;
height:30px;
}
ul{
padding:0 auto;
list-style:none;
}
li {
float: left;
height: 20px;
line-height: 20px;
width: 20px;
border-radius: 50%;
text-align: center;
background: #f36;
color: green;
margin-right: 5px;
}
li {background-color:gray; color:orange;}
/*元素选择器*/.important {font-weight: bold;}
.active {color: green;background: lime;}
.items {color: #fff;background: #000;}
.important.items {background:#ccc;}
/*只有同时包括才可以改变属性*/
.first.last {color: blue;}
/*所以对于这个例子，样式blue并不起作用*/
/*后代选择器*/
.demo li { color:blue;}
ul > li {color:yellow; background:green;}
/*好吧。。这个例子举的并不好。。。。*/
/*相邻兄弟选择器*/
li+li {color:green;background:purple;}
/*通用/一般兄弟选择器*/
.active~li {color:yellow; background:green;}
</style>>
</head>
<body>
<div class="demo">
<ul class="clearfix">
<li id="first" class="first">1</li>
<li class="active important">2</li>
<li class="important items">3</li>
<li class="important">4</li>
<li class="items">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li id="last" class="last">10</li>
</ul>
</div>
</body>
</html>
属性选择器
其实都是CSS2中引进的，CSS3扩展了这些属性选择器，支持基于模式匹配来定位元素！
1. E[attr]
选择具有某个属性的元素，并不在乎属性的值究竟是多少
a[href][title] {color:red;}//可以进行多个个属性的选择
*[title] {color:red;}//将包含title的所有元素变成红
2. E[attr=val]
选择具有某个特定属性固定值的元素相匹配，属性与属性值必须完全匹配
p.important 和 p[class="important"] 应用到 HTML 文档时是等价的
3. E[attr|=val]
*[lang|="en"] {color: red;}//将lang值为en和以en为开头的所有元素标记为红色
<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p> //前三个将会被标记
4. E[attr~=val]
需要根据属性值中的词列表的某个词进行选择
p[class~="important"] {color: red;}//将类名中包含important的段落标记为红色
5. E[attr^=val]
[title^="def"]//选择title以def为开头的所有元素
6. E[attr $=val]
[title^="def"]//选择title以def为结尾的所有元素
7. E[attr *=val]
[atitle*="def"]//选择title中包含def子串的所有元素
扫一扫
269
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
