2.css选择器
由第一节的语法结构可以看出css语言的核心思想就是：找到对象，然后对选定的对象进行属性赋值。其中，css中对象的选择，依靠的就是选择器。当掌握了选择器以后，就能够指哪打哪，弹无虚发了。
css的选择器有许多种，下面来逐一介绍：
1.基本选择器
使用简单且频率高的一些选择器这里归类为基本选择器，而基本选择器有包含下的内容：
1.1 通用选择器
* {
border: 1px solid red;
}
说明：通用选择器的核心就是使用统配符*作为对象标识，在很多语言中，*的含义是指代所有对象，也就是所HTML文件中的所有标签都会被选中，包括<html> 和<body>标签。但这通常不是我们想要的结果，所有一般情况下也用不到。
1.2 元素选择器
p {
color: red;
}
说明：这里的元素其实就是HTML里面的标签，例如这里的p，就是指<p></p>标签。通过使用元素选择器就可以选择特定的标签，但是要注意，元素选择器会选择HTML文档内的所有同名标签。样式的设置会对所有选中的对象生效。
1.3 ID选择器
#abc {
font-size: 20px;
}
//<p id="abc">段落</p>
说明：ID选择器会根据全局属性id的值，来选择对象，如上面的<p></p>标签所示。理论上选择到的元素是唯一的，因为根据html语言的标准，id值在一个页面中应该是唯一的。但是如果出现相同的id值，可能会选中相同id值的元素。（这个行为会根据浏览器的不同而不同，所以对不同的元素设置相同的id值要极力避免，以免发生不可估计的错误）
1.4 类选择器
.abc {
border: 1px solid red;
}
//<b class="abc">加粗</b>
//<span class="abc">无</span>
说明：类选择器针对的是元素内class属性的值，这是常用的多对象选择器，如果有多个元素的class属性含义同样的值，那么这些元素都会被选中。
1.5 属性选择器
/*css2*/
[href] {
color: orange;
} //<a herf="..."></a>
//<a herf="..."></a>
说明：属性选择器是css2版本新增的选择器，不过到了现在HTML5全面普及的时代，一般的主流浏览器的最新版本都应该支持。其意思是如果标签含有指定的属性，都会被选中，也就是选中多个。如上面的例子所示，其中href属性是所有<a></a>标签必须声明的属性，这种写法将选中HTML页面中的所有<a></a>标签。
关于属性选择器还有下面这些扩展:
/*css2*/
[type="password"] {
border: 1px solid red;
} //<input type="password" />
说明：该选择器进一步限制了除了要有相应的属性之外，其属性的值也要符合要求。当有多个对象符合要求时，也会选中多个对象。
/*css3*/
[href^="http"] {
color: orange;
}
说明：这是css3版本中新增的，加入了正则匹配的部分特性，如上面例子表示属性的值的开头必须是http。
/*css3*/
[href$=".com"] {
color: orange;
}
说明：与开头匹配相对的，这里是结尾匹配。
/*css2*/
[href*="baidu"] {
color: orange;
}
说明：这里表示，只要属性的值中含有指定的字符就能匹配，不管字符是在开头还是结尾。
/*css2*/
[class~="edf"] {
font-size: 50px;
} //<div class="abc edf"></div>
说明：当一个属性含有多个值的时候，可以用这个方式选择。
/*css2*/
[lang|="en"] {
color: red;
} //<span lang="en-us"></span>
说明：当属性有多个值，且多个值间是使用-号分隔的时候，可以使用这个选择器。
2.复合选择器
将不同的选择器进行组合形成新的特定匹配，我们称为复合选择器。
2.1 分组选择器
p,b,i,span {
color: red;
}
说明：将多个选择器通过逗号分割，同时设置一组样式。当然，不但可以分组元素选择器，还可以使用 ID 选择器、类选择器、属性选择器混合使用。
2.2 后代选择器
p b {
color: red;
}
//<p>
// <b>a</b>
// <b>b</b>
// <div>
// <b>c</b>
// </div>
//</p>
//注意：这里标绿色不是css样式设置后的结果，只是表面选择器选中了哪个，下同。
说明：选择<p>元素内部所有<b>元素。不在乎<b>的层次深度，也就是父级元素内不管嵌套了几级，只要有都会被选中。当然，后代选择器也可以混合使用ID选择器、类选择器、属性选择器。
2.3 子代选择器
ul > li {
border: 1px solid red;
}
//<ul>
// <li>a</li>
// <li>b</li>
// <div>
// <li>c</li>
// </div>
//</ul>
说明:子代选择器和后代选择器类似，但是子代选择器只能选择父级元素的下一级元素，而后代选择器不限制层次的深度。
2.4 相邻兄弟选择器
p + b {
color: red;
}
//<p></p>
//<b></b>
//<b></b>
说明：相邻兄弟选择器匹配和第一个元素相邻的第二个元素，第三、第四之类的不会匹配。
2.5 普通兄弟选择器
p ~ b {
color: red;
}
//<p></p>
//<b></b>
//<b></b>
说明：普通兄弟选择器匹配和第一个元素后面的所有元素，不管有几个。
注意：无论是相邻兄弟选择器还是普通兄弟选择器都不会先前选择。
3.伪元素选择器
伪元素选择器是更具某些特征来选择的选择器，在css3中引入，其语法特征是包含两个冒号（::）具体如下：
3.1 ::first-line 块级首行
div::first-line {
color: red;
}
说明：块级，只要是针对<p>、<div>等带有块级属性的标签的选择器，将选中其首行的文本，进行特定的样式设置。若不在前指定特点的标签，则当前页面的所以块级元素将生效。
3.2 .::first-letter 块级首字母
div::first-letter {
color: red;
}
说明：块级元素的首行字,若是中文文本，将选中第一个中文字符，其他同上。
3.3 ::before 文本前插入
a::before {
content: '点击';
}
//<a href="...">我</a> //设置前
//<a href="...">点击我</a> //设置后
说明：这个倒不限制是否是块级元素，多配合content属性使用，在文本前插入内容。
3.4 ::after 文本后插入
a::after {
content: '很帅';
}
//<a href="...">我</a> //设置前
//<a href="...">我很帅</a> //设置后
说明：在文本后插入内容。（如上所示，能一秒成帅哥）
3.5 ::selection 文字选择时触发
span::selection {
color:red;
}
说明：所谓选择时触发，即是按住鼠标左键选择多个文字的时候。如上设置，表示选择后文字变成红色。
4.伪类选择器
伪类选择器和为元素选择器类似，也是按照某些特征进行选择。其语法特点是包含一个冒号（:），所以和伪元素选择器很容易混淆。伪类选择器分为四种类型：结构性伪类、UI 伪类、动态伪类和其他伪类选择器，具体如下：
4.1 结构性伪类选择器
结构性伪类选择器能够根据元素在文档中的位置选择元素。这类元素都有一个前缀（:）。
4.1.1 根元素选择器
:root {
border: 1px solid red;
}
说明：匹配文档中的根元素，基本不怎么用，因为总是返回<html>元素。
4.1.2子元素选择器
ul > li:first-child {
color: red;
}
//<ul>
// <li>a</li>
// <li>a</li>
//</ul>
说明：这里先用子代选择器选择里<ul>元素里的子代<li>元素，此时可能选中了多个子代元素，再用:first-child表示选择这些子代中的第一个。
ul > li:last-child {
color: red;
}
//<ul>
// <li>a</li>
// <li>a</li>
//</ul>
说明：相对的，也能选择子代中的最后一个。
ul > li:only-child {
color: red;
}
//<ul>
// <li>a</li>
//</ul>
//<ul>
// <li>a</li>
// <li>a</li>
//</ul>
说明:选择只有一个子元素的那个子元素。如上面例子所示，第一个<ul>下只有一个<li>，而第二个<ul>下则有两个<li>，此时，第一个<ul>的子元素<li>将被选中。
ul > li:only-of-type {
color: red;
}
//<ul>
// <li>a</li>
// <li>a</li>
//</ul>
//<ul>
// <li>a</li>
// <p>a</p>
//</ul>
说明：这里的情况比较复杂，该选择器表面的是子代中只能有一个指定的类型是，才能被选择。如上面例子所示：第一个<ul>的子代只有<li>元素，而第二个<ul>的子代除了<li>之外，还有<p>。此时，只有第一个<ul>的子代<li>才能被选中。注意，选择的还是子代元素。
4.1.3 nth-child(n)系列
ul > li:nth-child(2) {
color: red;
}
//<ul>
// <li>a</li>
// <li>a</li>
// <li>a</li>
// <li>a</li>
//</ul>
说明：选择子代元素中的第n个元素。
ul > li:nth-last-child(2) {
color: red;
}
//<ul>
// <li>a</li>
// <li>a</li>
// <li>a</li>
// <li>a</li>
//</ul>
说明：选择子代元素中的倒数第n个元素。
div > p:nth-of-type(2) {
color: red;
};
//<div>
// <span>1</span>
// <p>2</p>
// <span>3</span>
// <p>4</p>
//</div>
说明：选择特定子元素的第n个。
div > p:nth-last-of-type(2) {
color: red;
};
//<div>
// <span>1</span>
// <p>2</p>
// <span>3</span>
// <p>4</p>
//</div>
说明：选择特定子元素的倒数第n个。
4.2 UI 伪类选择器
UI 伪类选择器是根据元素的状态匹配元素。
4.2.1 :enabled
input:enabled {
border: 1px solid red;
}
//<input type="text" name=username />
说明：选择启用状态的元素，多配合表单使用。
4.2.2 :disabled
input:disabled {
border: 1px solid red;
}
//<input type="text" name=username />
说明：选择禁用状态的元素。
4.2.3 :checked
input:checked {
display: none;
}
说明：选择勾选的input元素。
4.2.4:default
input:default {
display: none;
}
说明：从一组类似的元素中选择默认元素。比如 input 被勾选的即默认的。
4.2.5 :valid 和:invalid
/*验证合法时*/
input:valid {
border: 1px solid blue;
} /*验证不合法时*/
input:invalid {
border: 1px solid green;
}
说明：输入验证合法与不合法显示时选择的元素。
4.2.6 :required 和:optional
/*当表单字段是必填项时*/
input:required {
border: 1px solid blue;
} /*当表单字段是非必填项时*/
input:optional {
border: 1px solid green;
}
说明：根据是否具有 required 属性选择元素。
4.3 动态伪类选择器
4.3.1 link 和 visited
a:link {
color: red;
}
a:visited {
color: orange;
}
说明： :link 表示未访问过的超链接，:visited 表示已访问过的超链接。
4.3.2 :hover
a:hover {
color: blue;
}
说明： 表示鼠标悬停时。
4.3.3 :active
a:active {
color: green;
}
说明：表示鼠标按下激活超链接时。
4.3.4 :focus
input:focus {
border: 1px solid red;
}
说明：表示获得焦点时。
4.4 其他伪类选择器
4.4.1 :not
a:not([href*="baidu"]) {
color: red;
}
说明：对条件进行反选
4.4.2 :empty
:empty {
display: none;
}
说明：匹配没有任何内容的元素
4.4.3 :target
:target {
color: red;
}
说明：定位到锚点时，选择此元素
暂时总结到这里……
2.css选择器的更多相关文章
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- css选择器
常用css选择器,希望对大家有所帮助,不喜勿喷. 1.*:通用选择器 * { margin: 0; padding: 0; } 选择页面上的全部元素,通常用于清除浏览器默认样式,不推荐使用. 2.#i ...
- dynamic-css 动态 CSS 库，使得你可以借助 MVVM 模式动态生成和更新 css，从 js 事件和 css 选择器的苦海中脱离出来
dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...
- CSS选择器的权重与优先规则？
我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用 ...
- css选择器的使用详解
-.css选择器的分类: 二.常用选择器详解: 1.标签选择器: 语法: 标签名 { 属性:属性值; } 代码示例: h1 { color: #ccc; font-size: 28px; } 2.类选 ...
- js,jq,css选择器
js获取节点: var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; / ...
- CSS系列：CSS选择器
选择器(selector)是CSS中很重要的概念,所有HTML语言中的标记样式都是通过不同的CSS选择器来控制的.用户只需要通过选择对不同的HTML标签进行选择,并赋予各种样式声明,即可实现各种效果. ...
- 细说CSS选择器
众所周知,CSS的一个核心特征就是能向文档中的一组元素类型应用某些规则.每个规则都有两个基本部分:选择器(selector)和声明块(declaration block).下图显示了规则的各个部分. ...
- CSS选择器 转
来自于:http://www.cnblogs.com/webblog/archive/2009/08/07/1541005.html 最近在研究jQuery的选择器,大家知道jQuery的选择器和cs ...
- HTML5 -入门 (---css样式-------------（css基础与css选择器）---------------------—）
---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...
随机推荐
- Kindle3与亚马逊
喜欢上亚马逊,偶尔会买些免费或极低价格的书,但始终无法把这些书传到“我的”kindle3上,原因是kindle3无法在中国注册,又绕不开DRM,同时经历了换屏.换主板,早已不是原来的kindle了.今 ...
- MSDN(电驴)
主站: http://msdn.itellyou.cn/ 辅站: http://msdn.ez58.net/
- Effective Modern C++翻译(7)-条款6：当auto推导出意外的类型时，使用显式的类型初始化语义
条款6:当auto推导出意外的类型时,使用显式的类型初始化语义 条款5解释了使用auto来声明变量比使用精确的类型声明多了了很多的技术优势,但有的时候,当你想要zag的时候,auto可能会推导出了zi ...
- Nodejs文件服务器
最近一直在忙于一个比较大的项目,在项目中需要有个文件服务器来支持.老鸟们建议我去用NodeJs来实现,我在接手这个项目之前其实并不了解NodeJs,但是一直想去了解.借着这个机会好好去学习一下.下面是 ...
- Flex4/AS3.0自定义VideoPlayer组件皮肤,实现Flash视频播放器
要求 必备知识 本文要求基本了解 Adobe Flex编程知识. 开发环境 Flash Builder4/Flash Player11 演示地址 演示地址 资料下载 Adobe Flash Pla ...
- MyEclipse开发JAX-RS架构WebServices收发JSON数据格式
最近因项目需求,开始学习WebServices. 1.开发环境: MyEclipse2013 2.客户端发送的JSON数据格式为 {persons:[{"name":"a ...
- 简单的TCPIP 客户端 服务器
// soClient.cpp : Defines the entry point for the console application. // #include "stdafx.h&qu ...
- @media screen解决移动web开发的多分辨率问题
当今移动设备的发展已经越来越迅速,移动web开发的需求也越来越多多.许多大平台.大门户都纷纷推出了自己的移动web版网站. 随着移动设备飞速的发展,移动产品的屏幕规格越来越多.从几年前的320×240 ...
- 跨域请求之JSONP 二
续上篇,加两个实用功能 1,增加data属性,请求参数2,增加scope属性,可以让回调函数在指定的上下文中执行 接口如下 1 2 3 4 5 6 Sjax.load(url, { data ...
- 【MVC】ASP.NET MVC 请求生命周期
当一个asp.net mvc应用程序提出请求,为了响应请求,包含一些请求执行流程步骤! 在asp.net mvc应用程序Http request和Http response 过程中,主要包含8个步骤: ...