css常见选择器_css选择器 子

基础选择器

元素选择器

	div {
		width: 500px;
		height: 300px;
		background-color: green;
		border: 10px dashed red;
	   }
	   
	<div>div1</div>
	
	元素选择符(类型选择符、element选择符) 		权重：0001
			语法： 元素名称{属性: 属性值;属性: 属性值;}
			说明：就是使用元素名称当做选择符使用，可以选择符页面所有的这个名称的元素，为其添加样式
1
2
3
4
5
6
7
8
9
10
11
12

id选择器

	#divbox1 {
		width: 500px;
		height: 200px;
		background-color: orange;
	 }
	<div id="divbox1">div1</div>
	
	id选择符 								权重：0100
		语法： #id名{属性: 属性值;属性: 属性值;}
		设置id：给元素添加一个名为 id 的html属性，属性值就是 id名
			<标签 id="id名"> </标签>
			<标签 id="id名" />
		id具有唯一性：同一个页面中，一个id名只能定义一次，不能重复定义
		id的命名规则：
			必须以字母开头名称，第一个字符必须是字母
			后面可以跟 数字 字母 下划线_ 连接符-
			示例：divbox  div1  d-box  d_box  DivBox ....
		id选择符最大的作用：创建网页的外围结构
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

class选择器

	.box2{
			width: 500px;
			height: 100px;
			border: 20px dashed blue;
			color: orange;
		}
	<p class="box2">ppp1</p>
	
		class选择符(类选择符) 					权重：0010
		语法： .class名{属性: 属性值;属性: 属性值;}
		设置class：给元素添加一个名为 class 的html属性，属性值就是 class名(类名)
			<标签 class="class名"> </标签>
			<标签 class="class名" />
			
		说明:
			多个元素可以处在一个类中，也就是说 多个元素可以拥有相同的 class名(类名)
			一个元素可以处在多个类中，也就是说 一个元素可以拥有多个 class名(类名)
		class的命名规则：
			必须以字母开头名称，第一个字符必须是字母
			后面可以跟 数字 字母 下划线_ 连接符-
			示例：divbox  div1  d-box  d_box  DivBox ....
		class选择符结合元素选择符可以实现针对元素的精确选中
			元素选择符.class名{属性: 属性值;}
			权重计算是相加之和 1+10 === 11
	
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

群组选择器

		#box,
		.divbox,
		.pbox,
		h2,
		h4 {
			 background-color: orange;
		}
	<div id="box">div1</div>
	<h2>h2</h2>
	<div class="divbox">div2</div>
	<h4>h4</h4>
	<p class="pbox">p2</p>
	<h4>h4</h4>
	
	群组选择符 								权重：各自选择符自身的权重
	语法： 选择符1,选择符2,选择符3,...{属性: 属性值;属性: 属性值;}
	说明：如果多个元素需要执行相同的样式，
	就可以通过逗号分隔的方式将多个选择符划分到一个组中，
	最终给多个元素定义相同的样式
	逗号前后分隔的选择符是独立，权重计算是单独计算的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

包含选择器

	div p span{
		background-color: blue;
	}
	
	<div>
		<span>你发球像周琦</span>
			<p>
				<span>我喜欢的人在后面，我们班陶虹，我是段奕宏</span>
			</p>
	</div>
	
		包含选择符(后代选择符) 					权重：所有使用到的选择符的权重相加之和
		语法： 选择符1 选择符2{属性: 属性值;属性: 属性值;}
		说明：选择符1 和 选择符2 之间书写是使用空格分开
		
		选择符2必须是选择符1的后代元素，选择符2必须是被选择符1包含的元素
		匹配到 选择符1 的 后代元素 选择符2
		最终样式执行在写在最后的选择符上
		写在前面的选择符的作用是 限定缩小匹配范围
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

进阶选择器

伪类选择符

伪类选择符 								权重：0010
		:link{属性: 属性值;属性: 属性值;} 		定义超链接在初始状态的样式
		:visited{属性: 属性值;属性: 属性值;} 		定义超链接被访问过后的样式
		:hover{属性: 属性值;属性: 属性值;} 		定义超链接被鼠标滑过时的样式
		:active{属性: 属性值;属性: 属性值;} 		定义超链接被激活时(鼠标按下未抬起)的样式
		
		说明：
			当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为：
			a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效；
		:hover可以使用在非超链接标签上
			1、可以定义 元素被鼠标滑过时，改变自身的样式或给自身添加样式
			2、可以结合后代选择符，通过 滑过父元素，改变后代元素的样式或给后代元素添加样式
1
2
3
4
5
6
7
8
9
10
11
12

子选择符

		#box>a{
			background-color: yellow;
		}
		
		<div id="box">
			<a href="#">aaaa4</a>
				<p>
				<a href="#">aaaa3</a>
					<span>
						<a href="#">aaaa1</a>
					</span>
				<a href="#">AAAA2</a>
				</p>
			<a href="#">aaaa5</a>
			</div>
		<a href="#">aaaa6</a>
子选择符 							权重：使用到的选择符权重相加之和
	语法：选择符1>选择符2{属性: 属性值;属性: 属性值;}
	说明：选择符2必须是选择符1的子元素
		  匹配选择到 选择符1 的 子元素 选择符2
	
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

兄弟选择符

 #box>p+h3 {
            background: red;
        }   相邻
        
  #box>p~h3 {
       background: red;
   }       通用
   
   <div id="box">
        <h3>h3-0</h3>
        <p>pppp</p>
        <h3>h3-1</h3>
        <h3>h3-2</h3>
        <h3>h3-3</h3>
        <h3>h3-4</h3>
    </div>
兄弟选择符					权重：使用到的选择符权重相加之和
	相邻兄弟选择符
		选择符1+选择符2{属性: 属性值;属性: 属性值;}
			匹配到 写在选择符1后面的并且与之相邻的兄弟元素选择符2
	通用兄弟选择符
		选择符1~选择符2{属性: 属性值;属性: 属性值;}
			匹配到 写在选择符1后面的所有兄弟元素选择符2
    注：
	兄弟选择符 只会 向后选择，之前的兄弟不做选择

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

属性选择符

属性选择符的话实际项目中用的还是比较少的在这里我就简单的介绍几个吧
	E[attr]{属性: 属性值;属性: 属性值;}
	匹配到E元素中具有attr属性的E元素
	
	E[attr="value"]{属性: 属性值;属性: 属性值;}
	匹配到E元素中具有attr属性并且属性值为value的E元素
					
	E元素的attr属性只能有一个属性值并且为需要匹配的value才可以被选择到
	
	E[attr~="value"]{属性: 属性值;属性: 属性值;}
	匹配到E元素中具有attr属性并且至少有一个属性值为value的E元素
	
css3中的属性选择符
		E[attr^="value"]{属性: 属性值;属性: 属性值;}
			匹配到E元素中具有attr属性，并且属性值是 以value开头 的E元素
			
		E[attr$="value"]{属性: 属性值;属性: 属性值;}
			匹配到E元素中具有attr属性，并且属性值是 以value结尾 的E元素
			
		E[attr*="value"]{属性: 属性值;属性: 属性值;}
			匹配到E元素中具有attr属性，并且属性值中 包含value 的E元素
			
因为这里的话选择符比较多而且实际的项目中用的比较少我就不举例了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

结构伪类选择符

不限定元素类型: 从所有的子元素中查找第几个
		E>F:nth-child(value){属性: 属性值;属性: 属性值;}
			匹配父元素E中的第value个子元素 F元素
			匹配机制说明：
				首先会从 E元素中查找到 第value个子元素
				然后判断 第value个子元素 是否为 需要匹配的 F元素
				如果是 就执行样式
				如果不是 则没有元素执行样式
				
		E>F:nth-last-child(value){属性: 属性值;属性: 属性值;}
			匹配父元素E中的倒数第value个子元素 F元素
		
		E>F:first-child{属性: 属性值;属性: 属性值;}
			匹配父元素E中的第一个子元素 F元素
		
		E>F:last-child{属性: 属性值;属性: 属性值;}
			匹配父元素E中的倒数第一个子元素 F元素


限定元素类型: 从需要匹配的子元素中查找第几个
		E>F:nth-of-type(value){属性: 属性值;属性: 属性值;}
			匹配父元素E中的第value个具有指定类型的子元素 F元素
			匹配机制说明：
				直接从 E元素中查找 F元素中的 第value个子元素 F元素
				针对非F元素的子元素不会进行查找，只会从需要匹配的F元素查找第几个
				
		E>F:nth-last-of-type(value){属性: 属性值;属性: 属性值;}
			匹配父元素E中的倒数第value个具有指定类型的子元素 F元素
			
		E>F:first-of-type(value){属性: 属性值;属性: 属性值;}
			匹配父元素E中的第一个具有指定类型的子元素 F元素
			
		E>F:last-of-type(value){属性: 属性值;属性: 属性值;}
			匹配父元素E中的倒数第一个具有指定类型的子元素 F元素
			
nth-child 和 nth-of-type的区别就是 nth-child和中子元素的第一个开始算 
                                  nth-of-type是从指定的元素开始算并不是从第一个子元素开始算
                                  
在项目中最常用的还是nth-of-type()
我们就举例说明下nth-child 和 nth-of-type的区别吧

<style>
  #box>P:nth-child(5) {
            color: red;
        }
</style>

<div id="box">
        <p>pppp</p>
        <div>div1</div>
        <div>div2</div>
        <div>div3</div>
        <p>pppp</p>
        <div>div4</div>
        <div>div5</div>
        <div>div6</div>
        <div>div7</div>
        <p>pppp</p>
        <div>div8</div>
        <div>div9</div>
        <p>pppp</p>
        <p>pppp</p>
    </div>

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

这是nth-child

这是nth-of-type

伪元素选择符

伪元素比较常用的话就是::before 和::after

它们不是直接给元素样式 可以在元素前面后面加入东西
	被选元素::after{content: "插入的内容";display: 属性值;属性: 属性值;}
		定义在 被选元素 内部的 最后面 插入内容
		插入内容需要配合 一个 content属性实现，content属性的属性值就是 插入的内容，属性值用双引号包含
		说是插入了内容，其实是插入了一个行内元素，在行内元素中写着内容
		既然插入的是元素，那就可以改变元素类型和其他的一些属性定义，完全当做一个元素对待
	
	被选元素::before{content: "插入的内容";display: 属性值;属性: 属性值;}
		定义在 被选元素 内部的 最前面 插入内容
		插入内容需要配合 一个 content属性实现，content属性的属性值就是 插入的内容，属性值用双引号包含
		说是插入了内容，其实是插入了一个行内元素，在行内元素中写着内容
		既然插入的是元素，那就可以改变元素类型和其他的一些属性定义，完全当做一个元素对待
		
伪元素选择符的冒号可以写两个
	在css3.0之前定义伪元素选择符时其实只有一个冒号
	但是为了和 伪类选择符 作 区分
	在css3.0之后 定义 伪元素选择符 应该具有两个冒号
	但是因为在css3.0之前已经定义了一些 伪元素选择符，都是一个冒号，为了不改变
	所以决定 在css3.0之前定义伪元素选择符 可以写一个冒号，也可以写两个冒号
	但是在css3.0之后 定义 伪元素选择符 都只能写两个 冒号
对于伪元素的应用我们在后续的文章在继续介绍吧，讲下一些特效和常用的用法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

总结: 今天我们主要介绍下在平时的开发过程中常用的一些选择器，在下一节文档中我们主要讲解下css的一些常用的属性
如果大家有什么不理解的欢迎大家前来讨论    联系方式：zhang_chao96@163.com