CSS3中的选择器
Posted tulintao
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3中的选择器相关的知识，希望对你有一定的参考价值。
CSS3选择器是在CSS2.1选择器的基础上新增了属性选择器、伪类选择器、过滤选择器，减少了对html类名或ID名的依赖，避免了对HTML结构的干扰，使编写的过程更加轻松。
根据所获取页面中的元素的不同，可以把CSS选择器分成五大类：
- 基本选择器
- 组合选择器
- 伪类选择器
- 伪元素
- 属性选择器
在这其中伪类选择器又分成了六类：
- 动态伪类选择器
- 目标伪类选择器
- 语言伪类
- UI元素状态伪类选择器
- 结构伪类选择器
- 否定伪类选择器
接下来依次介绍：
一、基本选择器：
1.标签选择器
标签选择器直接引用HTML标签名称，也称为类型选择器，类型选择器规定了网页元素在页面中默认的显示样式。因此，标签选择器可以快速、方便的控制页面标签的默认显示效果。
【示例】 通过标签选择器，统一定义网页中段落文本的样式为：段落内文本字体大小为12px，字体的颜色为红色。
<style type="text/css"> p{ font-size: 12px; color: red; } </style>
在定制网页样式时可以利用标签选择器设计网页元素默认效果，或者统一常用元素的基本样式。标签选择器在CSS中是使用频率最高的一类选择器，且容易管理，因为它们都是和网页元素同名的。
（1）、类选择器：
类选择器能够为网页对象定义不同的样式，实现不同元素拥有相同的样式，相同元素的不同对象拥有不同的样式。类选择器以一个点(.)前缀开头，然后跟随一个自定义的类名。
应用类样式可以使用class属性来实现，HTML所有元素都支持该属性，只要在标签中定义class属性，然后把该属性值设置为事先定义好的类选择器的名称就OK了。
【示例1】利用类选择器为页面中的3个相邻的段落文本对象定义不同的样式，其中第1和3段文本的字体大小为12px、字体红色，第2段文本的字体大小为18px、字体为红色。
第一步：启动Dreamweaver，新建一个网页，在<body>标签中输入三段文本。
<p>问君能有几多愁，恰似一江春水向东流</p> <p>剪不断，理还乱，是离愁。别是一般滋味在心头</p> <p>独自莫凭栏，无限江山，别是容易见时难。流水落花春也去，天上人间</p>
第二步：在<head>标签中添加<style type="text/css">标签，定义一个内部样式表。
第三步：通过标签选择器为所有段落文本的字体大小定义为12px，字体颜色为红色。
<style type="text/css"> p{ font-size: 12px; /*字体大小为12像素*/ color: red; /*字体颜色为红色*/ } </style>
第四步：如果仅定义第2段文本的字体大小为18px，这个时候就可以用到类选择器。在这里先定义一个18px大小的字体类：
.font18px{font-size: 18px;}
第五步：在第二段段落标签中引用font18px类样式。
<p>问君能有几多愁，恰似一江春水向东流</p> <p class="font18px">剪不断，理还乱，是离愁。别是一般滋味在心头</p> <p>独自莫凭栏，无限江山，别是容易见时难。流水落花春也去，天上人间</p>
最终在浏览器中显示的样式为：
【示例2】如何在对象中应用多个样式类。class属性可以包含多个类，因此可以设计复合样式类。
第一步：复制上面示例的文档，并在内部样式表中定义了3个类：font18px、underline、italic
第二步：然后在段落文本中分别引用这些类，其中第二段文本标签引用了3个类，第三段引用了一个类。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> p{ /*段落默认样式*/ font-size: 12px; /*字体大小为12像素*/ color: red; /*字体颜色为红色*/ } .font18px{ /*字体大小类*/ font-size: 18px; } .underline{ /*下划线类*/ text-decoration: underline; } .italic{ /*斜体类*/ font-style: italic; } </style> </head> <body> <p class="underline">问君能有几多愁，恰似一江春水向东流</p> <p class="font18px underline italic">剪不断，理还乱，是离愁。别是一般滋味在心头</p> <p class="italic">独自莫凭栏，无限江山，别是容易见时难。流水落花春也去，天上人间</p> </body> </html>
如果把标签和类捆绑在一起来定义选择器，则可以限定类的使用范围，这样就可以指定该类仅适用于特定的标签范围内，这种方法也称为指定类选择器。
（2）、ID选择器：
ID选择器以井号(#)作为前缀，然后是一个定义的ID名。应用ID选择器可以使用id属性来实现，HTML所有元素都支持该属性，只要标签中定义id属性，然后把该属性值设置为事先定义好的ID选择器的名称即可。
【示例1】 演示如何在文档中设置ID样式。
第一步：启动Dreamweaver，新建一个网页，在<body>标签内输入<div>标签，定义一个盒子:
<div id="box">问君能有几多愁，恰似一江春水向东流</div>
第二步：在<head>标签内添加<style type="text/css">标签，定义一个内部样式表。然后为该盒子定义固定的宽和高，并设置背景图像，以及边框和内边距大小。
<style type="text/css"> #box{ background: url("./images/leaves.png") center bottom; height: 200px; width: 400px; border: solid 2px red; padding: 100px; } </style>
在浏览器中的效果：
也可以为ID选择器指定标签范围。采用这种方法能够提高该样式的优先级。
【示例2】针对上面的示例。可以在ID选择器前面增加一个div标签，这样div#box选择器的优先级会大于#box选择器的优先级。在同等条件下，浏览器会优先解析div#box选择器定义的样式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div#box{ background: url("./images/leaves.png") center bottom; height: 200px; width: 400px; border: solid 2px red; padding: 100px; } </style> </head> <body> <div id="box">问君能有几多愁，恰似一江春水向东流</div> </body> </html>
提示！！！
一般通过ID选择器来定义HTML款架结构的布局效果，因为HTML框架元素的ID值都是唯一的。
（3）、通配选择器
如果HTML所有元素都需要定义相同的样式，这个时候就可以用到通配选择器，它是固定的，用星号（*）表示。
【示例】针对上面示例中清除边距样式
*{
margin: 0;
padding: 0;
}
二、组合选择器
（1）、包含选择器
包含选择器通过空格标识符来表示，前面的一个选择器表示包含框对象的选择器，而后面的选择器表示被包含的选择器。
【示例】如何使用包含选择器为不同层次下的标签定义样式。
第一步：启动Dreamweaver，新建一个网页，在<body>标签中输入如下结构。
<div id="wrap"> <div id="header"> <p>1</p> <p>2</p> <p>3</p> </div> <div id="main"> <p>4</p> <p>5</p> <p>6</p> </div> </div>
第二步：在<head>标签中添加<style type="text/css">标签，定义一个内部样式表。然后定义样式，希望实现1、定义<div id="header">包含框内的段落文本字体大小为14px。2、定义<div id="main">包含框内的段落文本字体大小为12px。
第三步：这个时候就可以利用包含选择器来快速定义了：
<style type="text/css"> #header p{ font-size: 14px; } #main p{ font-size: 12px; } </style>
【示例2】针对上面的结构，用户也可以使用子选择器来定义他们的样式。
<style type="text/css"> #header > p{ font-size: 14px; } #main > p{ font-size: 12px; } </style>
【示例3】要是页面的结构比较复杂的话，所包含的元素就不止子元素了，这个时候就只能使用包含选择器了
<body> <div id="wrap"> <div id="header"> <h2> <p>第一段文本</p> </h2> <p>第二段文本</p> </div> <div id="main"> <div> <p>第三段文本</p> <p>第四段文本</p> </div> <p>主题文本</p> </div> </div> </body>
（2）、子选择器
子选择器是指定父元素所包含的子元素。子选择器使用尖角号（>）表示
以上是关于CSS3中的选择器的主要内容，如果未能解决你的问题，请参考以下文章