css选择器介绍

最新推荐文章于 2024-09-04 20:29:03 发布

原创最新推荐文章于 2024-09-04 20:29:03 发布 · 125 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #浏览器 #HTML #JavaScript #脚本 #ViewUI

xhtml / css 专栏收录该内容

47 篇文章

订阅专栏

选择器(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>

很多时候页面中几乎所有的标记都使用相同的样式风格，只有1-2个特殊的标记需要使用不同的风格来突出，这时可以通过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标记进行声明，例如当与之间包含标记时，就可以使用嵌套选择器进行相应的控制。

<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(...)"的嵌套方式来设置。）

选择器兼容图表