CSS-常用选择器

转载防丢失，原文链接：
CSS常用选择器（通配符选择器，标签选择器，类选择器，id选择器…），你知道多少？

CSS常用选择器

CSS选择器的作用是从HTML页面中找出特定的某类元素，而常用的CSS选择器有如下几类，一起来看看吧！

一、通配符选择器

通配符选择器常用 ‘*’ 号表示，它是所有选择器里作用范围最广的，能匹配页面中所有的元素。

基本语法格式：*{ 属性1：属性值1；属性2：属性值2；}

例子
使用该选择器定义样式，清除所有HTML标记的默认边距。

*{
margin：0；       /*定义外边距*/
padding：0；     /*定义内边距*/
}

   
    
    
   
    
    
     
     1
     
     2
     
     3
     
     4

但实际开发中不建议使用通配符选择器，因为它设置的样式对所有的HTML标记都生效，不管标记是否需要该样式，反而降低了代码的执行速度。

二、标签选择器

标签选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标签指定统一的CSS样式。

基本语法格式：标签名{ 属性1：属性值1；属性2：属性值2；}

所有的HTML标记名都可以作为标签选择器，例如a、body、p、h1等等。用标签选择器定义的样式对页面中该类型的所有标签都有效。

扫描二维码关注公众号，回复： 14927969 查看本文章

例子
使用p选择器定义HTML页面中所有段落的样式。

p{ font-size: 12px; color: #666; font-family:"微软雅黑"; }

   
    
    
   
    
    
     
     1

标签选择器最大的优势是能快速为页面中同类型的标签统一样式，同时这也是它的缺点，不能设计差异化样式。

三、类选择器

类选择器使用**‘.’**(英文点号)进行标识，后面紧跟类名。

基本语法格式：.类名{ 属性1：属性值1；属性2：属性值2；}

该语法中，类名即为HTML元素的class属性值，大多数HTML元素都可以定义class属性。

例子

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>类选择器</title>
6 <style type="text/css">
7  .red{color: red;}
8  .green{color:green;}
9  .font22{font-size:22px;}
10 p{ text-decoration:underline; font- family:"微软雅黑"; }
11 </style>
12 </head>
13 <body>
14 <h2 class="red">二级标题文本</h2>
15 <p class-"green font22">段落文本内容</p>
16 <p class="red font22">段落二文本内容</p>
17 <p>段落三文本内容</p>
18 </body>
19 </html>

   
    
    
   
    
    
     
     1
     
     2
     
     3
     
     4
     
     5
     
     6
     
     7
     
     8
     
     9
     
     10
     
     11
     
     12
     
     13
     
     14
     
     15
     
     16
     
     17
     
     18
     
     19

类选择器最大的优点是可以为元素对象定义单独或相同的样式，而且多个标记可以使用同一个类名，可以实现为不同类型的标记指定相同的样式。同时，一个HTML元素也可以应用多个class类，设置多个样式，此时多个类名之间需要用空格隔开，如上述代码中的前两个<p>标记。

注意：类名的第一个字符不能使用数字，并且严格区分大小写。一般采用小写的英文字符。

四、id选择器

id选择器使用**‘#’**进行标识，后面紧跟id名。

基本语法格式：#id名{ 属性1：属性值1；属性2：属性值2；}

该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。

例子

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>id选择器</title>
6 <style type="text/css">
7 #bold{font -weight:bold; }
8 #font24 {font-size:24px; }
9 </style>
10 </head>
11 <body>
12 <pidf"bold">段落1: id="bold",设置粗体文字。</p>
13 <p id="font24">段落2: id="font24", 设置字号为24px。</p>
14 <p id="font24">段落3: id="font24", 设置字号为24px。</p>
15 <pid="bold font24">段落4: id="bold font24",同时设置粗体和字号24px。</p>
16 </body>
17 </html>

   
    
    
   
    
    
     
     1
     
     2
     
     3
     
     4
     
     5
     
     6
     
     7
     
     8
     
     9
     
     10
     
     11
     
     12
     
     13
     
     14
     
     15
     
     16
     
     17

注意：同一个id不允许应用于多个标记，虽然很多浏览器并不会报错，但JavaScript等脚本语言调用id时会出错。另外，id选择器不支持像类选择器那样定义多个值。

五、属性选择器

属性选择器可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。

语法格式：[标签名称] { 属性1：属性值1；属性2：属性值2；}

注意：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。

CSS 选择器参考手册：

选择器	描述
[attribute]	用于选取带有指定属性的元素
[attribute=value]	用于选取带有指定属性和值的元素
[attribute~=value]	用于选取属性值中包含指定词汇的元素
[attributeI=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词
[attribute^=value]	匹配属性值以指定值开头的每个元素
[attribute$=value]	匹配属性值以指定值结尾的每个元素
[attribute*=value]	匹配属性值中包含指定值的每个元素

例子

1、为带有 title 属性的所有元素设置样式：

2、为 title=“W3School” 的所有元素设置样式：

[title=W3School]
{
border:5px solid blue;
}

   
    
    
   
    
    
     
     1
     
     2
     
     3
     
     4

3、为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：

[title~=hello] { color:red; }

   
    
    
   
    
    
     
     1

4、为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：

[lang|=en] { color:red; }

   
    
    
   
    
    
     
     1

5、设置表单的样式
属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：

input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}

input[type=“button”]
{
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}

使用属性选择器，可以只指定元素的某个属性，还可以同时指定元素的某个属性和其对应的属性值。

六、并集选择器

并集选择器是同时匹配多个选择器，取多个选择器的并集，选择器之间用逗号隔开，如em,strong{ }。

语法格式：
标签名称1,标签名称2 { 属性1：属性值1；属性2：属性值2；}

例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="author" content="https://www.cnblogs.com/jizuiku"/>
    <title></title>
    <style type="text/css">
    span,div, .content {
            color:darkorange;
        }
&lt;/style&gt;

</head>
<body>
<span>博客园</span>
<div>给最苦</div>
<p class=“content”>网页设计</p>
</body>
</html>

并集选择器的优点是将多个标签的相同样式提取出来，集体声明，优化代码，方便阅读。

七、后代选择器

后代选择器也称包含选择器，用来选择特定元素的后代。如.asideNav li{ }，表示先匹配第二个选择器的元素，并属于第一个选择器内。

语法格式：
标签名称1 标签名称2{ 属性1：属性值1；属性2：属性值2；}

在CSS中，后代是根据HTML文档中的DOM上下文来决定的。当元素发生嵌套时，内层的元素就成为外层元素的后代。如元素B嵌在元素A内部，B就是A的后代。而且，B的后代也是A的后代，就像家族关系。

定义后代选择器时，外层的元素写在前面，内层的元素写在后面，中间用空格分隔。后代选择器会影响到它的各级后代，没有层级限制。如：

div p { color: red; }

 
  
  
 
  
  
   
   1

上述选择器中，div 为祖先元素，p 为后代元素，其作用就是选择 div 元素的所有后代 p元素，不管 p 元素是 div 元素的子元素、孙辈元素或者更深层次的关系，都将被选中。换句话说，不论 p 是 div 的多少辈的后代，p 元素中的文本都会变成红色。

例子

后代选择器中的空格，是用来表示后代层级的，当然就不限于二级的。根据需要，从任一个祖先元素开始，直到想应用样式的那个元素，都可以被放到后代选择器链中。如：

<ul>
<li><a href="/home/">首页</a></li>
<li><a href="/new/">新房</a></li>
<li><a href="/esf/">二手房</a></li>
<ul>
<li><a href="/sale/">出售房源</a></li>
<li><a href="/buy/">求购房源</a></li>
</ul>
<li><a href="/rent/">租房</a></li>
</ul>

 
  
  
 
  
  
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   10

上述导航菜单中，假如希望所有锚文本的字体大小是16px，就可以通过后代选择器ul a来选择 ul 元素的所有后代，因为后代选择器会影响到它的各级后代。如：

ul a {
   font-size: 16px;
}

 
  
  
 
  
  
   
   1
   
   2
   
   3

假如又希望第二级列表项的锚文本的字体大小是12px，就可以通过ul.nav ul a的这种多层后代关系的后代选择器，它只选择第二级列表项的锚文本。

ul li a {
font-size: 12px;
}

 
  
  
 
  
  
   
   1
   
   2
   
   3

当然，这个后代选择器也可以写成ul、li、ul、li、a，以实现更精准的控制。

注意：
1、后代包括儿子，孙子，只要是放在指定标签的后代都是。
2、也可以不用标签名称1、2，也可以用id和class名，分别用id和class来选择。
3、后代选择器可以无限衍生。

八、子代选择器

子代选择器使用**‘>’**表示，如ul>li{ }，表示匹配第二个选择器，且为第一个选择器的元素的后代。

语法格式：
标签名称1>标签名称2{ 属性1：属性值1；属性2：属性值2；}

例子

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实例</title>
    <style>
        #box>p{
            color: darkorange;  /*设置颜色为 深橙色*/
            font-size: 80px;
    }
    </style>
</head>
<body>
    <div id="box">
        <div>
            <div>
                <div>
                    <p>
                        狸花猫
                    </p>
                </div>
            </div>
        </div>
        <p>
            大橘猫
        </p>
    </div>
</body>
</body>
</html>

 
  
  
 
  
  
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   10
   
   11
   
   12
   
   13
   
   14
   
   15
   
   16
   
   17
   
   18
   
   19
   
   20
   
   21
   
   22
   
   23
   
   24
   
   25
   
   26
   
   27
   
   28
   
   29
   
   30

注意：
1、只会查找儿子，不会查找其他被嵌套的标签。
2、子元素选择器也可以用其他的id和class选择器来进行查找。 3、子元素选择器也可以通过>符号一直延续下去。

九、兄弟选择器（+和~）

相邻兄弟选择器使用+号表示，如p+a{ }，表示匹配紧跟第一个选择器并匹配第二个选择器的元素，如紧跟p元素后的a的元素。
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。

语法格式：标签名称1+标签名称2 { 属性1：属性值1；属性2：属性值2；}

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style  type="text/css">
         h1 + p {
        margin-top:50px;
        color:red;
    }
</style>
</head>
<body>
<p>This is paragraph.</p>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
</body>
</html>

 
  
  
 
  
  
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   10
   
   11
   
   12
   
   13
   
   14
   
   15
   
   16
   
   17
   
   18
   
   19

兄弟只会影响下面的p标签的样式，不影响上面兄弟的样式。
注意这里的’+’的意义跟’and’意义不一样，兄弟选择器的样式是应用在兄弟元素上，跟参照的元素样式无关，如上例只影响p元素的样式，而不影响h1标签的样式。
当两个兄弟元素相同时，会实现一次循环查找：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
    li + li {
        color:red;
    }
</style>
</head>
<body>
<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
</div>
</body>
</html>

 
  
  
 
  
  
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   10
   
   11
   
   12
   
   13
   
   14
   
   15
   
   16
   
   17
   
   18
   
   19
   
   20
   
   21

而~ 选择器：作用是查找某一个指定元素的后面的所有兄弟结点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
    h1 ~ p{
        color:red;
    }
</style>
</head>
<body>
    <p>1</p>
    <h1>2</h1>
    <p>3</p>
    <p>4</p>
    <p>5</p>
</body>
</html>

 
  
  
 
  
  
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   10
   
   11
   
   12
   
   13
   
   14
   
   15
   
   16
   
   17
   
   18
   
   19

十、伪选择器
伪选择器是一种特殊的选择器，它分为伪类选择器和伪对象选择器2种。

1.伪类选择器：
CSS提供了五种基本伪类选择器，分别对应HTML标记的五种状态。

伪类选择器	作用	应用对象
:hover	定义标记在鼠标悬停(划过)时的样式	所有显示标记
:link	定义标记在超链接状态下的样式	a标签
:focus	定义标记在获取焦点时的样式	a标签(IE浏览器不支持)
:visited	定义标记被访问过后的样式	a标签
:active	定义标记在选定时刻下的样式	a标签

例子

以下是5个a标签

    <a href="#" id="a1">链接1</a>
 	<a href="#" id="a2">链接2</a>
 	<a href="#" id="a3">链接3</a>
 	<a href="#" id="a4">链接4</a>
 	<a href="#" id="a5">链接5</a> 

 
  
  
 
  
  
   
   1
   
   2
   
   3
   
   4
   
   5

加点CSS样式：

 a{
		padding: 10px;
		color:black; /*初始颜色全为黑色*/
		font-weight: bold;
	}
	#a1:hover{
		color:red; /*当鼠标悬停时链接1变成红色*/
	}
	#a2:link{
		background-color: blue; /*给链接2添加蓝色的背景色*/
	}
	#a3:focus{
		color:yellow; /*当链接3获取焦点时变为黄色,失去焦点时恢复黑色*/
	}
	#a4:visited{
		color:green; /*被访问过后的链接4变为绿色*/
	}
	#a5:active{
		background-color: blue; /*鼠标点击的那一瞬间给链接5添加蓝色的背景*/
	}

 
  
  
 
  
  
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   10
   
   11
   
   12
   
   13
   
   14
   
   15
   
   16
   
   17
   
   18
   
   19
   
   20

除了以上五种基本伪类选择器之外，CSS还支持诸如：”:first-child“首元素选择器和“:lang()”语言选择器等伪类选择器。

2.伪对象选择器
伪对象选择器根据对象内部的局部元素定义其样式。

伪对象选择器	作用
:first-letter	定义文本的第一个字符样式
:first-line	定义文本的首行样式
:before	定义对象之前内容的样式
:after	定义对象之后内容的样式

例子

<p>我是文本我是文本我是文本我是文本</p>

 
  
  
 
  
  
   
   1

使用:before和:after样式后：

 p:before{
		content:'我说：“';/*在文本前面追加内容*/
		color:red;
	}
	p:after{
		content:'。”我说完了！';/*在文本结尾追加内容*/
		color:red;
	}

 
  
  
 
  
  
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8

以上就是CSS常见的选择器啦,你记住了吗？^_^