选择器(selector)是CSS中很重要的概念，所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。用户只需要通过选择器对不同的HTML标签进行控制，并赋予各种样式声明，即可实现各种效果。
1、标记选择器
<style>
h1{
color:red;
font-size:25px;
}
</style>
2、类别选择器
<html>
<head>
<title>class选择器</title>
<style type="text/css">
<!--
.one{
color:red; /* 红色 */
font-size:18px; /* 文字大小 */
}
.two{
color:green; /* 绿色 */
font-size:20px; /* 文字大小 */
}
-->
</style>
</head>
<body>
<p class="one">class选择器1</p>
<p class="two">class选择器2</p>
</body>
</html>
很多时候页面中几乎所有的<p>标记都使用相同的样式风格，只有1-2个特殊的<p>标记需要使用不同的风格来突出，这时可以通过class选择器与上一节提到的标记选择器配合使用。
<html>
<head>
<title>class选择器与标记选择器</title>
<style type="text/css">
<!--
p{ /* 标记选择器 */
color:blue;
font-size:18px;
}
.special{ /* 类别选择器 */
color:red; /* 红色 */
font-size:23px; /* 文字大小 */
}
-->
</style>
</head>
<body>
<p>class选择器与标记选择器1</p>
<p>class选择器与标记选择器2</p>
<p>class选择器与标记选择器3</p>
<p class="special">class选择器与标记选择器4</p>
<p>class选择器与标记选择器5</p>
<p>class选择器与标记选择器6</p>
</body>
</html>
另外类别选择器还有一种很直观的使用方法，就是直接在标记声明后接类别名称，以此来区别该标记。
<html>
<head>
<title>标记选择器.class</title>
<style type="text/css">
<!--
h3{ /* 标记选择器 */
color:blue;
font-size:18px;
}
h3.special{ /* 标记.类别选择器 */
color:red; /* 红色 */
font-size:23px; /* 文字大小 */
}
.special{ /* 类别选择器 */
color:green;
}
-->
</style>
</head>
<body>
<h3>标记选择器.class1</h3>
<h3>标记选择器.class2</h3>
<h3 class="special">标记选择器.class3</h3>
<h3>标记选择器.class4</h3>
<h3>标记选择器.class5</h3>
<p class="special">使用于别的标记</p>
</body>
</html>
在HTML的标记中，还可以同时给一个标记运用多个class类别选择器，从而将两个类别的样式风格同时运用到一个标记中。这在实际制作网站时往往会很有用，可以适当减少代码的长度。
<html>
<head>
<title>同时使用两个class</title>
<style type="text/css">
<!--
.one{
color:blue; /* 颜色 */
}
.two{
font-size:22px; /* 字体大小 */
}
-->
</style>
</head>
<body>
<h4>一种都不使用</h4>
<h4 class="one">同时使用两种class，只使用第一种</h4>
<h4 class="two">同时使用两种class，只使用第二种</h4>
<h4 class="one two">同时使用两种class，同时使用</h4>
</body>
</html>
3、ID选择器
ID选择器的使用方法跟class选择器基本相同，不同之处在于ID选择器只能在HTML页面中使用一次，因此其针对性更强。
<html>
<head>
<title>ID选择器</title>
<style type="text/css">
<!--
#one{
font-weight:bold; /* 粗体 */
}
#two{
font-size:30px; /* 字体大小 */
color:#009900; /* 颜色 */
}
-->
</style>
</head>
<body>
<p id="one">ID选择器1</p>
<p id="two">ID选择器2</p>
<p id="two">ID选择器3</p>
<p id="one two">ID选择器3</p>
</body>
</html>
从显示效果可以看到第2行与第3行都显示了CSS的方案，换句话说在很多浏览器一，ID选择器也可以用于多个标记。但这里需要指出的是，将ID选择器用于多个标记是错误的，因为每个标记定义的ID不只是CSS可以调用，JavaScript等其他脚本语言同样也可以调用。如果一个HTML中有两个相同ID的标记，那么将导致JavaScript在查找ID时出错。
正因为JavaScript等脚本语言也能调用HTML中设置的ID，因此ID选择器一直被广泛地使用。网站建设都在编写CSS代码时，应该养成良好的编写习惯，一个ID最多赋予一个HTML标记。
另外从最后一行可以看到没有任何CSS样式风格显示，这意味着ID选择器不支持像class选择器那样的多风格同时使用，类似"ID="one two"是完全错误的语法。
4、选择器声明
集体声明
<style type="text/css">
<!--
h1, h2, h3, h4, h5, p{ /* 集体声明 */
color:purple; /* 文字颜色 */
font-size:15px; /* 字体大小 */
}
h2.special, .special, #one{ /* 集体声明 */
text-decoration:underline; /* 下划线 */
}
-->
</style>
希望页面中所有的标记都使用同一种CSS样式，但又不希望逐个来加入集体声明列表。这时可以利用全局声明符号“*”。
<style type="text/css">
<!--
*{ /* 全局声明 */
color: purple; /* 文字颜色 */
font-size:15px; /* 字体大小 */
}
h2.special, .special, #one{ /* 集体声明 */
text-decoration:underline; /* 下划线 */
}
-->
</style>
5、选择器的嵌套
在CSS选择器中，还可以通过嵌套的方式，对特殊位置的HTML标记进行声明，例如当<p>与</p>之间包含<b></b>标记时，就可以使用嵌套选择器进行相应的控制。
<html>
<head>
<title>CSS选择器的嵌套声明</title>
<style type="text/css">
<!--
p b{ /* 嵌套声明 */
color:maroon; /* 颜色 */
text-decoration:underline; /* 下划线 */
}
-->
</style>
</head>
<body>
<p>嵌套使<b>用CSS</b>标记的方法</p>
嵌套之外的<b>标记</b>不生效
</body>
</html>
（经验之谈：选择器的嵌套在CSS的编写中可以大大减少对class和id的声明。因此在构建页面HTML框架时通常只给外层标记（父标记）定义class或者id，内层标记（子标记）能通过嵌套表示的则利用嵌套的方式，而不需要再定义新的class或者专用id。只有当子标记无法利用此规则时，才单独进行声明，例如一个<ul>标记中包含多个<li>标记，而需要对其中某个<li>单独设置CSS样式时才赋给该<li>一个单独id或者类别，而其他<li>同样采用"ul li(...)"的嵌套方式来设置。）
转自 http://hi.baidu.com/5tmusic/blog/item/5904e2086d432d35e92488c9.html
分享到：
相关推荐
在CSS选择器的体系中，存在多种不同类型的选择器，每种都有其特定的用途和使用场景。 首先，元素选择符是最基本的类型，包括通配符选择器、标签选择器、id选择器和class选择器。通配符选择器用“*”表示，可以选中...
在React开发中，CSS选择器是用于特定于组件的样式化的一种强大工具。React组件的样式管理是一个关键的方面，因为它影响着应用的可维护性和性能。本篇将深入探讨React组件与CSS选择器的结合使用，以及如何优化组件的...
此外，CSS 还提供了分组选择器，可以将多个选择器分组在一起，并应用同样的样式。例如： ```css h2, p {color: gray;} ``` 这将将 h2 和 p 元素的颜色设置为灰色。 分组选择器可以将任意多个选择器分组在一起，对此...
相比XPath或其他方法，CSS选择器往往更简洁、直观，对于前端开发者来说尤其友好。 在Scrapy中，`Selector`类提供了对文档进行解析和提取数据的功能，而CSS选择器就是其主要的数据定位手段。使用CSS选择器，你可以像...
### CSS选择器的应用 #### CSS概述与引入方式 CSS（层叠样式表）是一种用于定义HTML文档中元素样式的语言。它允许开发者控制网页布局、颜色、字体等外观特性，从而增强网页的表现力。CSS可以通过多种方式引入： -...
在前端开发中，CSS选择器是用于选取网页元素并应用样式的重要工具。高效的CSS选择器能够提高页面渲染速度，优化用户体验，特别是在处理大型或者复杂的页面结构时显得尤为重要。本篇文章将探讨如何使用CSS选择器来...
下面是前端开发中经常使用的 30 个 CSS3 选择器，包括通用元素选择器、ID 选择器、类选择器、标签选择器、伪类选择器、毗邻元素选择器、子元素选择器、属性选择器等。 1. 通用元素选择器 * 通用元素选择器*是选择...
常用选择器是 CSS 选择器中最基本的选择器，包括三种类型：ID 选择器、类选择器和标签选择器。 * ID 选择器：根据元素的 ID 来选择元素，例如 `#demoDiv{color:#FF0000;}`。在 HTML 中，元素可以定义一个 ID 属性，...
CSS选择器的介绍和使用,什么是CSS选择器？CSS选择器可以用于我们需要添加的样式的标签。想要在HTMLl页面中的元素实现一对一，一对多或者多对一的控制，就得要使用css选择器，css选择器进控制着HTML页面中的元素。
### CSS选择器与jQuery选择器详解 #### 一、引言 在现代Web开发中，选择器扮演着至关重要的角色。无论是对HTML元素应用样式还是对其进行动态操作，选择器都是必不可少的工具。本文将深入探讨两种常用的选择器——...
"前端css选择器练习diner.zip" 是一个针对CSS选择器学习和实践的资源包，名为"css-diner"。 在"css-diner"这个练习中，你可以深入理解并掌握各种CSS选择器的用法，从而提升你的前端开发技能。以下是一些关于CSS选择...
CSS选择器的灵活性和多样性是CSS强大之处的关键因素之一。下面是一些关于CSS选择器的资源描述。 ### CSS选择器资源描述 #### 1. **官方文档与教程** - **MDN Web Docs**：Mozilla提供的MDN Web Docs是学习CSS选择...
在这个主题“Scrapy爬虫下的CSS选择器使用”中，我们将深入探讨如何利用CSS选择器在Scrapy中提取网页数据。 首先，CSS（Cascading Style Sheets）选择器是用于选取HTML或XML文档中元素的工具，其在网页设计中广泛...
标题"让ie兼容css选择器"指的是通过引入外部JavaScript文件，如ie7.js、ie8.js和ie9.js，来增强这些旧版IE浏览器对CSS选择器的支持，使它们能够理解和应用更先进的CSS规则。这些JavaScript库通常会模拟缺失的功能，...
### 四大类CSS选择器的使用说明 #### 一、基础选择器 **基础选择器**主要包括四种类型：标签（元素）选择器、类选择器、ID选择器以及通配符选择器。 1. **标签选择器**：用于选取文档中的特定HTML标签。例如： `...
本文将深入探讨CSS选择器的种类、用法及其在实际开发中的应用。** 首先，我们要了解CSS选择器的基本分类： 1. **类型选择器**：基于元素的标签名进行选择，如`h1`，`p`等。 2. **类选择器**：使用`.`前缀，匹配...
以下是对CSS选择器的详细介绍： 一、基本选择器 通用选择器（*）： 匹配HTML或XML文档中的所有元素。 例如：* { margin: 0; padding: 0; } 将所有元素的外边距和内边距设置为0。 元素（标签）选择器（E）： 通过...