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文件中标签的属性,这些属性可以是颜色,背景图,字体等.每个选择器有一条或多条声明,可以同时改变某个标签 ...
随机推荐
- docker镜像管理和dockerfile详解(8)
docker镜像加速 docker-io先到 https://cr.console.aliyun.com/ 注册一下,登录成功后,在控制台,看左侧,有一个加速器按钮,点开找到自己的专属加速链接,我的是 ...
- STM32嵌入式开发学习笔记（五）：中断
我们过去了解了用循环实现延时,或用系统滴答计时器实现延时,但这两种方法都有一种问题:会阻塞处理器的运行.下面我们学习一种不阻塞处理器运行其他事件的功能:时钟中断. 所谓中断,就是让处理器放下手头的事情 ...
- JAVA常用集合解析
ArrayList : 底层基于数组实现,在使用add方法添加元素时,首先校验集合容量,将新添加的值放入集合尾部并进行长度加一,进行自动扩容,扩容的操作时将数据中的所有元素复制到新的集合中. 在指定位 ...
- PHP面试 PHP基础知识 一（引用变量）
PHP引用变量 常见引用变量面试题: 什么是引用变量? 在PHP中用什么符号定义引用变量? 考点:PHP的引用变量的概念及定义方式 概念:在PHP中引用意味着用不用的名字访问同一个变量内容 定 ...
- bootstrap Modal 模态框垂直居中
解决 Modal 垂直居中的问题,上网找了好多博客,有好多说改源码的,这个并没有实践. 但发现另一种解决办法,可以实现,代码如下: function centerModals(){ $('.modal ...
- DQL 数据查询语言 show
2.show show databases; 查看所有的库 show tables; 查看当前库的所有的表 show tables from database; 查看指定的库下的所有表 show pr ...
- JDK8新特性之Stream流
是什么是Stream流 java.util.stream.Stream Stream流和传统的IO流,它们都叫流,却是两个完全不一样的概念和东西. 流可以简单的说是处理数据集合的东西,可以申明式流式A ...
- html5本地存储（二）--- SQLList
html5内置了2种本地数据库,一是被称为“SQLLite”,可以通过SQL语言来访问文件型SQL数据库.二是被称为“indexedDB” 的NoSQL类型的数据库 这篇主要讲SQLLite 在js中 ...
- 多个串的最长公共子串 SPOJ - LCS2 后缀自动机
题意: 求多个串的最长公共子串 这里用的是O(n)的后缀自动机写法 我后缀数组的专题有nlog(n)写法的 题解: 对于其中的一个串建立后缀自动机 然后对于后缀自动机上面的每一个节点求出每一个节点最长 ...
- $router和$route的区别，路由跳转方式name 、 path 和传参方式params 、query的区别
一.$router和$route的区别 $router : 是路由操作对象,只写对象$route : 路由信息对象,只读对象 例子://$router操作 路由跳转 this.$router.push ...