标签选择器
使用html标签筛选需要渲染的网页元素。
使用场景
修改标签的默认样式，例如ul li 有默认的内边距，开发时应去掉标签的默认样式。
设定全局字体样式。
根据分辨率设定html标签的默认字体。
div {/*直接用标签作为选择器*/ ???background-color: yellow;}
类选择器
为一组样式属性进行命名（类名），标签使用时需要声明，使用频率最多的选择器。
类选择器的特点
多个标签可以引用同一个样式类，提高程序的公用性。
通过语义化的类名定义增加了程序可读性。
标签可以通过class引入多个样式类名，用空格分开。
类名区分大小写。
1 <!DOCTYPE html> 2 <html> 3 ????<head> 4 ????????<meta charset="utf-8" /> 5 ????????<title></title> 6 ????????<style type="text/css"><!--使用style标签包裹--> 7 ????????????.aClass{ 8 ????????????????background-color: #2E8B57; 9 ????????????}10 ????????????.bClass{11 ????????????????color: red;12 ????????????}13 ????????</style>14 ????</head>15 ????<body>16 ????????<div class="aClass bClass">这是一个div容器</div>17 ????</body>18 </html>
ID选择器
根据标签的id属性筛选要被渲染的标签（很少使用）。
注意事项
ID不能重复，因此每个元素都要编写一个id选择器，无法提炼公用样式。
文档内元素的ID是区分大小写的。
id命名规则是由字母、数字和下划线组成。
但是数字不能开头。
- 程序示例
???<head> ???????<meta charset="utf-8" /> ???????<title></title> ???????<style type="text/css"><!--使用style标签包裹--> ???????????#v_div{ ???????????????color: green; ???????????} ???????</style> ???</head> ???<body> ???????<div id="v_div">这是一个div容器</div> ???</body>
选择器分组
对一组选择器赋予同样的样式属性。
使用场景：对于一组公用标签的相同属性进行赋值。
基本语法
selector1,selector2…..{/*若干个选择器，用逗号分隔*/ ???此处为css属性以及取值}程序示例
???<head> ???????<meta charset="utf-8" /> ???????<title></title> ???????<style type="text/css"><!--使用style标签包裹--> ???????????#v_div,a,.v_p{ ???????????????border: solid 3px #800080; ???????????} ???????</style> ???</head> ???<body> ???????<div id="v_div">这是一个div容器</div> ???????<p class="v_p">段落</p> ???????<a href="#">超链接</a> ???</body>
派生选择器
又称为后代选择器，按照html标签的层级关系（全部后代子孙）筛选被渲染的标签。
基本语法
<!--父在前，子在后，并用空格隔开-->selector1 selector2…..{ ???此处为css属性以及取值}程序示例
???<head> ???????<meta charset="utf-8" /> ???????<title></title> ???????<style type="text/css"> ???????????.parent p { ???????????????color: red; ???????????} ???????</style> ???</head> ???<body> ???????<div class = "parent"> ???????????????<div> ???????????<p>派生选择器</p> ????????????????</div> ???????</div> ???</body>
后代选择器
又称为子元素选择器，按照html标签的层级关系（直接后代），筛选要被渲染的标签。
基本语法
selector1>selector2{ ???此处为css属性以及取值}程序示例
1 ????<head> 2 ????????<meta charset="utf-8" /> 3 ????????<title></title> 4 ????????<style type="text/css"><!--使用style标签包裹--> 5 ????????????.parent>div>p { 6 ????????????????color: red; 7 ????????????} 8 ????????</style> 9 ????</head>10 ????<body>11 ????????<div class = "parent">12 ????????????????<div>13 ????????????????<p>派生选择器</p>14 ?????????????????</div>15 ????????</div>16 ????</body>
属性选择器
根据元素的html属性或属性值筛选要被渲染的元素。
基本语法
selector[attr][attr=‘value’]{ ???此处为css属性以及取值}程序示例
<style type="text/css"> ???a[href] { ???????color:yellow; ???} ???a[href][title] { ???????color:red; ???} ???a[href=‘www.baidu.com‘] { ???????color:blue; ???}</style>
伪类选择符
按照用户操作状态筛选需要渲染的元素，在css2中定义的伪类选择符一般用来操作超链接。
伪类选择符的状态
E:link:筛选未被访问的链接。
E:visited :筛选已经被被访问的链接。
E:hover:筛选当前鼠标悬停时的任何元素。
E:active:筛选被用户激活（鼠标点击）时的任何元素。
<style type="text/css"><!--使用style标签包裹--> ???.mydiv:link{ ???????color: blue; ???} ???.mydiv:visited{ ???????color: gray; ???} ???.mydiv:hover { ???????color: purple; ???} ???.mydiv:active{ ???????color: red; ???}</style><!--.mydiv为类选择器-->
伪对象选择符
在其他选择器筛选的结果中继续筛选需要渲染的标签
- E::first-letter：设置符合E筛选条件的第一个字符的样式。
- E::first-line：设置符合E筛选条件内的第一行的样式。
- E::before：设置符合E筛选条件的前一个元素的样式。
- E::after：设置符合E筛选条件的后一个元素的样式。
<style type="text/css">.myObj::first-line {/*第一行字体为红色*/
color: blue;
}
</style>
选择器的优先级别
- 当同一个元素被多个选择符筛选，并且继承父元素的样式时，优先级别如下：
- !important的优先级别最高。
- 继承的优先级别最低，私有css属性将覆盖继承的属性。
- 同一个元素被不同选择器筛选，又无!important修饰时优先级别计算公式
- ID选择符个数*100+类选择符个数*10+标签选择符个数
web（八）CSS选择器
原文地址：http://www.cnblogs.com/-maji/p/7467061.html