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
css样式高级技巧-选择器的更多相关文章
- CSS样式表 选择器
1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联样式表</p> &l ...
- CSS样式与选择器
CSS构造块的样式: 1. h1{color:red;background-color:yellow} 其中:h1是选择器,花括号内是声明部分.多个声明之间用分号隔开. 2.为样式规则添加注释:/* ...
- 日常：css样式、选择器、个别知识点、数组array
优先加入css引入文件定义,个别的在下面用style改变.(从左往右,从上往下)CSS样式表1.内联样式表(优先级最高)(改个别的)<div style="width:100px; h ...
- 前端之css样式（选择器）。。。
一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...
- java基础57 css样式、选择器和css定位（网页知识）
本文知识点(目录): 1.CSS样式 2.选择器 3.CSS定位 1.CSS样式 1.html 在一个网页中负责的是一个页面的结构 2.css(层叠样式表)在一个页面中负责了一个页面 ...
- 前端基础之css样式（选择器）
一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...
- 前端之css样式（选择器）
一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...
- css的基本操作学习--css样式，选择器，hover，文字属性，文本属性，背景
什么是css? 通配符选择器 <head> /* *通配符选择器 匹配任何元素 */ *{ margin: 0; padding: 0; } </head> css样式有三种 ...
- CSS样式之选择器
一.CSS选择器构成 CSS选择器是你想要改变样式的html元素,通俗的说,选择器可以改变html文件中标签的属性,这些属性可以是颜色,背景图,字体等.每个选择器有一条或多条声明,可以同时改变某个标签 ...
随机推荐
- Springboot Excle导入导出
Springboot Excle导入导出 导入操作:Excle批量导入 导出操作:下载模版 开发笔记 pom.xml <!-- Excle相关jar --> <dependency& ...
- (53)C# 工具
https://docs.microsoft.com/zh-cn/dotnet/framework/tools/ildasm-exe-il-disassembler 一.Visual Studio的开 ...
- HTML5篇
[HTML5十大新特性] (1) 语义化标签 (2) 增强型表单 (3) 视频和音频 (4) canvas绘图 (5) SVG绘图 (6) 地理定位 (7) 拖放API (8) Web Worker ...
- C#获取系统服务+进程+启动时间
原文:C#获取系统服务+进程+启动时间 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/weixin_38208401/article/details ...
- css 给图片添加滤镜效果，透明层毛玻璃效果
我们用的第一个滤镜是sepia(),他会给图片增加一整降饱和度的橙色染色效果 原图 添加sepia滤镜的效果 img{ width:100%; transition: .5s filter; filt ...
- 22-7map
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- style优先级
不同级别 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式. 作为style属性写在元素内的样式 id选择器 类选择器 标签选择器 通配符选择器 浏览器自定义或继承 ...
- 通过反射来创建对象？getConstructor()和getDeclaredConstructor()区别？
1. 通过类对象调用newInstance()方法,适用于无参构造方法: 例如:String.class.newInstance() public class Solution { public st ...
- Mysql 查询视图出现The user specified as a definer ('root'@'%') does not exist的问题
今天服务器Mysql版本在5.7升级到8.0+之后,部分网站(老的)访问视图出现The user specified as a definer ('root'@'%') does not exist问 ...
- wireshark 分析 TCP 请求（转）
转自:http://supben.iteye.com/blog/2329780 先看一段代码 程序片段是一个RPC调用 ,根据简历id获取简历实体.本地IP 10.252.156.132, 远程ip ...