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文件中标签的属性,这些属性可以是颜色,背景图,字体等.每个选择器有一条或多条声明,可以同时改变某个标签 ...
随机推荐
- PHP中关于Phar的学习
什么是phar 一个PHP程序往往是由多个文件组成的,如果能够集中为一个文件来分发和运行是很方便的.phar便应运而生.大概跟java的jar文件是差不多类似的.但是php的phar文件是可以由php ...
- centos7下命令行配置nginx
本教程中的步骤要求用户拥有root权限 第一步 - 添加Nginx存储库要添加CentOS 7 EPEL仓库,请打开终端并使用以下命令: sudo yum install epel-release第二 ...
- IDM自定义报错页面
由于用户两次重复单点登录会跳转至原生态ORACLE的错误页面页面.请提供配置方法.原因:是由于重复登录导致的.解决方案:Oracle官方给出了具体的解决方案,具体如下:I.创建战争档案a.创建目录&q ...
- Elasticsearch介绍和安装与使用
转载:https://blog.csdn.net/weixin_42633131/article/details/82902812 1.Elasticsearch介绍和安装 1.1.简介1.1.1.E ...
- Bootstrap-table 使用总结 转载https://www.cnblogs.com/laowangc/p/8875526.html
一.什么是Bootstrap-table? 在业务系统开发中,对表格记录的查询.分页.排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这 ...
- Netty 源码分析——ChannelPipeline
Netty 源码分析--ChannelPipeline 通过前面的两章我们分析了客户端和服务端的流程代码,其中在初始化 Channel 的时候一定会看到一个 ChannelPipeline.所以在 N ...
- JPA安装配置
现在让我们继续安装JPA,如下几个步骤. 第一步:确认已经Java安装 首先,需要在系统上安装Java软件开发工具包(SDK).为了验证这一点,根据所使用的平台执行以下两个命令. 如果Java安装已正 ...
- 集合 HashMap 的原理，与 Hashtable、ConcurrentHashMap 的区别
一.HashMap 的原理 1.HashMap简介 简单来讲,HashMap底层是由数组+链表的形式实现,数组是HashMap的主体,链表则是主要为了解决哈希冲突而存在的,如果定位到的数组位置不含链表 ...
- C#十六进制值0x12,是一个无效字符 - 程序园
原文:C#十六进制值0x12,是一个无效字符 - 程序园 我正在加载很多xml文档,其中一些返回错误,如“十六进制值0x12,是无效字符”,并且有不同的字符.如何删除它们? 我在这里做了一个小的研 ...
- linux 档案 指令（鸟哥私房菜）
[ls -al] [ls -l --full-time] 显示文件完整的日期格式 [ls] 显示非隐藏档的文件信息 [ls -al] 显示所有文档信心.文档前面的 “”.“”表明该文档是隐藏档.eg. ...