css样式高级技巧-选择器
用<div>元素为网页
在编写样式表时，我们经常要用div元素来包装内容：
<div>
<p>Here are two paragraphs of content</p>
<p>In a div container.</p>
</div>
就其本身而言，div什么也不做。但有了它，就可以基于类来应用一些样式。下面是一些可能的做法。
继承的值 有些css属性是可以继承的，也就是在一个元素上设置的值可以自动应用给该元素内部的所有元素，比如字体属性，在div元素上设置了该属性后，这个元素内部的所有属性都会应用相同的字体样式（除非你在具体的元素上覆盖这些规则）。
盒模型 一个div元素就是一个自然的容器，可以给它添加边框、边距和不同的背景颜色（或者背景图片）从而让它在页面中更加显眼。
分栏 专业的网站通常会把内容分成两栏或者三栏。实现分栏的一种方式就是把每个栏的内容包装在一个div元素中，然后再使用css定位属性将它们放到适当的位置上。
提示：
既然html5已经引入了相应的语义元素，div元素的地位就不那么重要了。如果可以把div元素替换成其他更有语义的元素如 （<head>、<foot>）只管替换好了。但在没有适当元素的情况下，div元素仍然是一个不错的选择。下面是一些详细介绍 html5中的所有新语义元素。
延伸阅读
div元素还有一个小兄弟，叫做<span>.与div类似，span元素也没有内置样式。但不同的是，div是块级元素，用于分隔段 落或者整块内容；而<span>则是行内元素，用于在块级元素中包装少量内容。比如，可以用span元素在段落中包装几个单词，然后给它们应 用特殊的样式。
注意：
css鼓励优秀设计。怎么鼓励的？如果你想有效地使用css，必须事先规划好网页结构。这种对css的需求会鼓励人民认真思考如何组织自己的内容，即便是临时的页面设计人员也不例外。
多个选择符
有时候，你可能需要定义一些样式，把它们应用给多个元素或者多个类，你就可以在选择符之间加上逗号。
比如：下面这个两级标题，分别有不同的字体大小，但有相同的字体：
h1{
font-family:Impact,Charcoal,sans-serif;
font-size:40px;
}
h2{
font-family:Impact,Charcoal,sans-serif;
font-size:20px;
}
你可以把font-family属性单独放到一条规则里，把它应用给两级标题，比如：
h1,h2{
font-family:Impact,Charcoal,sans-serif;
}
h1{
font-size:40px;
}
h2{
font-size:20px;
}
关键在于，这样写样式不是优秀设计所必须的。通常，重复设置某个属性反倒可以增加将来修改样式的灵活性。假如共享的属性太多，那么很难做到修改一个元素类型或者类，而不影响其他元素。
上下文选择符
上下文选择符用于匹配位于另一个元素内部的元素。例如：
content h2{
color:#24486c;
font-size:medium;
}
这个选择符先会查找带有content类的元素，然后再在该元素中查找<h2>元素，找到之后为它们应用不同的文本颜色和字体大小。下面这段标记展示了会应用该样式规则的元素：
<div class="content">
...
<h2>CSS简明教程（三）——css样式高级技巧</h2>
....
</div>
在第一个例子中，第一个选择符是一个类选择符，第二个选择符（即上下文选择符）是一个元素类型选择符。不过，你可以根据自己的需要进一步修改，比如下面的这个例子：
.content .leadin{
font-variant:small-caps;
}
这个选择符会查询类为leadin的元素，但它必须包含在类为content的元素中，比如，它匹配下面的元素：
<div class="content">
<p><span class="leadin">Right now</span>,you‘re probably feeling pretty good....</p>
</div>
熟悉了上下文选择符的用法之后，你会发现这是一种直接的方式，也非常有用。
ID选择符
类选择符还有一个近亲，叫做ID选择符。与类选择符相似，ID选择符可以让你只为选定的元素应用样式。而且，同样与类选择符相似，使用ID选择符也可以挑选一个描述性的名字，只不过，不能再使用句点，而要使用井号（#），如下：
#menu{
border-width:1px;
border-style:solid;
}
与类规则相似，除非你在html中指定ID，否则浏览器不会应用相应的样式，不过，这次不是使用class属性，而是要使用id属性。比如，以下这个div元素就可以应用前面的#menu的样式。
<div id="menu">...</div>
此时，可能有人会问，纹身模要用ID选择符，难道ID选择符与类选择符有什么区别吗？的确是有区别：一个ID只能指定给页面中的一个元素。以刚才的 标记为例，页面中只能有一个div元素，可以带有menu这个ID。但类属性则没有这个限制，同一个类名可以随便用给任意多个元素。
这就意味着ID选择符非常适合用来为那些一个页面中唯一的、不会重复的元素应用样式。而这个也体现了使用ID选择符的一个优势，那就是清晰的表明某 个元素特别重要。比如，页面中可能有一个ID选择符叫Menu或者NavigationBar，那么设计师就知道页面中只有一个菜单或者导航条。当然并不 是非要使用ID选择符不可。有些Web设计师会在任何情况下都使用类选择符，无论标识的区块是不是唯一。这只能说是萝卜白菜各有所爱。
注意：
ID属性在JavaScript中同样扮演这重要角色，它可以让开发人员取得页面中的特殊元素，然后在代码中操作该元素。
伪类选择符
目前，我们看到的选择符都是直观的。它们一般都只考虑某个显而易见的特点，比如元素类型、类名或者ID属性值。伪类选择符就没有那么好理解，因为还要考虑其他方面。指的就是那些标记中并不存在，或者要根据用户操作来确定的信息。
css过去很长时间只支持几个伪类，其中又有大部分专门为链接而设计。伪类始终以一个冒号(:)开头，比如，
:link 伪类用于为新的、未访问过的链接应用样式
:visited 伪类用于为访问过的链接应用样式
:hover 伪类用于为用户鼠标悬停状态下的链接应用样式
:active 伪类用于为鼠标点击且尚未抬起状态下的链接应用样式
下面的样式规则使用伪类创建故意让人迷惑的页面，也就是说访问过的链接是蓝色，而未访问过的链接是红色。
a:link{
color:red;
}
a:visited{
color:blue;
}
伪类也可以与类名一起用：
.backwardlink:link{
color:red;
}
.backwardlink:visited{
color:blue;
}
那么，为了应用这个新样式的链接元素可能如下：
<a class="backwardlink" href="...">...</a>
伪类并不是只能用来为链接添加样式。比如，还可以用:hover伪类来创建动画效果和好玩的按钮。
注意：
当用css定义链接的各种状态时，要注意书写的顺序即：:link :visited :hover :active利用首字母：L V H A，你可以通过记忆LoVe,Hate,两个单词来记住其顺序。
延伸阅读：
属性选择符
属性选择符是css3提供个新功能，可以选择属性为特定值的特定类型的元素。以下面这个样式规则为例，它只适用于文本模式：
input[tyoe="text"]{
background-color:silver;
}
首先，这个选择符会取得所有<input>元素，然后，它会进一步筛选出type属性等于“text”的那 些<input>元素，只对这些元素应用样式。对于下面的标记而言，只有第一个<input>元素会带有银色背景，第二个元素则 不会：
<lable for="name">Name:</lable><input id="name" type="text"><br>
<input type="submit" value="OK">
严格来讲，不必在第一个<input>元素中指定type="text"，因为这是它的默认值，不指定的话，前面的属性选择符照样有效，因为它只关注属性的当前值，而不关注这个值是不是标记中指定的。
类似地，也可以另外创建一条规则，只应用给文本框的标题，忽略其他标签：
label[for="name"]{
width:200px;
}
文章出处：http://www.yangqq.com/jstt/bj/2013-07-24/523.html
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
