2.1 常用选择器
最常用的选择器类型是类型选择器和后代选择器.类型选择器用来寻找特定的元素,比如段落或标题元素,只需指定希望应用样式的元素名称.类型选择器有时候也称为元素选择器,或简单选择器.
p {color: black;}
h1 {font-weight: bold;}
后代选择器可用于寻找特定元素或元素组的后代.后代由其他两个选择器之间的空格来表示.在这个示例中,只缩进是块引用的后代的段落元素,其他所有段落不受影响.
blockquote p {padding-left: 2em;}
这两种选择器适合应用于那些应用范围广的一般性样式.要想寻找更特定的元素,可以使用ID选择器和类选择器.顾名思义,这两种选择器用于寻找那些具有指定ID或类名的元素.
#intro {font-weight: bold;}
.date-posted{color: #ccc;}
<p id="intro">Happy Birthday Andy</p>
<p class="date-posted">24/3/2009</p>
前面提到过,许多CSS开发人员过度依赖类选择器和ID选择器.如果他们希望以一种方式对主内容区域中的标题应用样式,而在第二个内容区域应用另一种方式,那么他们很难创建两个类并且在每个标题上应用一个类.一种简单的多的方法是结合使用类型/后代/ID/类者这几种选择器.
#main-content h2 {font-size: 1.8em;}
#secondary-content h2 {font-size: 1.2em;}
<div id="main-content">
<h2>Articles</h2>
...
</div>
<div id="secong-content">
<h2>Latest news</h2>
...
</div>
这是一个非常明确的示例.但是,让你吃惊的是只使用四种选择器就可以成功的找到许多元素.如果你发现自己在文档中添加了许多不必要的类,那么这可能是文档结构不合理的警告信号.这时应该分析这些元素之间的差异.你常常会发现唯一的差异是他们在页面上出现的位置.不要给这些元素指定不必要的类,而应将一个类或者ID应用于他们的祖先,然后用后代选择器定位他们.
伪类
有时候,我们需要根据文档结构之外的其他条件对元素应用样式,例如表单元素或链接的状态.这要使用伪类选择器来完成.
/*make all unvisited links blue*/
a:link {color: blue;}
/*make all visited links green*/
a:visited {color: green;}
/*make links red when hovered or actived
focus is added for keybord support*/
a:hover, a:focus, a:active {color: red;}
/*make table rows red when hovered over*/
tr:hover {background-color: red;}
/*make input elments yellow when focus is applied*/
input:focus {background-color: yellow;}
:link和:visited称为链接伪类,只能应用于锚元素,:hover/:active和:focus称为动态伪类,理论上可以应用于任何元素.大多数浏览器支持这个功能.但是,IE6只注意应用于锚链接的:active和:hover选择器,完全忽略:focus.IE7在任何元素上都支持:hover,但是忽略:active和:focus.
最后,值得指出的是:通过把伪类连接在一起可以创建更复杂的行为,比如再已访问链接和未访问链接上实现不同的鼠标悬停效果.
/*make all visited links olive on hover*/
a:visited:hover {color: olive;}
2.2 通用选择器
通用选择器最强大也最少用,作用就像通配符匹配所有可用元素.通过选择器一般用来对页面上的所有元素应用样式.例如,可以使用以下规则删除每个元素上默认的浏览器内外边距.
*{
padding: o;
margin: 0;
}
2.3 高级选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS选择器</title>
<link rel="stylesheet" href="../css/main.css">
</head>
<body>
<button title="点击此处登录">登录</button>
<button title="click to sigup">注册</button>
<a title="点击跳转淘宝" href="http://taobao.com">taobao</a>
<div class="a">a
<div class="b">b
<div class="c">c
</div>
</div>
</div>
<div class="d">d</div>
<div class="e">e</div>
<div class="f">f</div>
<a href="http://baidu.com">断网测试</a>
<input type="text">
<button>点我</button>
<p>hello world</p>
<a class="help">什么是支付密码</a>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
</body>
</html>
[title*="点击"] {
color: blue;
border: 1px dotted #000;
}
/*属性选择器 *只要含有 ^开始含有 $最后含有*/
div {
padding: 10px;
background: rgba(255, 0, 0, 0.2);
}
.a .c {
border: 1px solid green;
}
/*后代选择器*/
div {
min-height: 50px;
background: rgba(0, 0, 0, 0.1);
margin: 10px;
}
.d + div {
background: rgba(255, 0, 0, 0.3);
}
/*相邻同胞选择器 +代表d后面的第一个div元素*/
/* .a ~ div {
background: rgba(0,255,0,0.3);
} */
a:link {
color: blue;
}
/*伪类选择器*/
a:visited {
color: gray;
}
/*访问后*/
button:hover,
a:hover {
background: #888;
}
/*光标悬停*/
button:active,
a:active {
background: #333;
color: #fff;
}
/*点击*/
input:focus {
outline: none;
background: #aaa;
}
/*光标聚焦*/
p:first-letter {
font-size: 50px;
}
.help:before {
content: "*";
color: red;
}
.help:after {
content:"[?]";
color: blue;
}
div p:last-child {
color:blue;
}
div p:nth-child(2) {
color:blue;
}
/*指定参数*/
2.4 选择器权重
| style属性(内联样式) | ID选择器 | 类选择器/伪类选择器/属性选择器 | 元素选择器 |
|---|---|---|---|
| 0 | 0 | 0 | 0 |
| 千位 | 百位 | 十位 | 个位 |
例:Style=" " 权重为 1000
#wrapper #content {} 权重为 0200
#content .datePosted {} 权重为 0110
div#content {} 权重为 0101
以此类推
2.5 继承
人们常常将继承和层叠混为一谈.尽管它们初看上去有点儿相似,但是这两个概念实际上是不一样的.好在,继承是一个非常好理解的概念.应用样式的元素的后代会继承样式的某些属性,比如颜色和字号.例如,如果将主题元素的文本颜色设置为黑色,那么主题元素的所有后代也会显示黑色的文本.对于字号,也是这样的.如果将主题的字号设置为1.4em,那么页面上的所有内容应该会继承这个字号.我说"应该会"是因为Windows和Netscape在继承表格中的字号方面有问题.为了解决这个问题,必须指定表格应该继承字号,或者在表格上单独设置字号.
如果在主题上设置字号,你会注意到页面上的任何标题都没有采用这个样式.你可能会认为标题没有继承文本字号.但是,实际上是浏览器默认样式表设置了标题字号.直接应用于元素的任何样式总会覆盖继承而来的样式.这是因为继承而来的样式特殊性为空.
继承这一样式非常有用,因为他使开发人员不必在元素的每个后代上添加相同的样式.如果打算设置的属性是继承而来的属性,那么也可以将它应用于父元素.可以编写:
p,div, h1, h2,h3,ul,ol,li {color: black;}
但是下面的写法更简单:
body {color: black;}
正如恰当的使用层叠可以简化CSS,恰当的使用继承也可以减少代码中选择器的数量和复杂性.但是,如果大量元素继承各种样式,那么判断样式的来源就会变得困难.在Firebug中可以使用Firebug查明样式来源.
网友评论