【CSS】2-css选择器

2-css选择器

1.元素选择器

直接使用标签名作为选择器，会选中本页面所有指定的元素。

2.类选择器

使用标签的class属性值作为选择器，会选中包含指定class属性值的所有元素。

3.id选择器

使用标签的id属性作为选择器，一般情况下是唯一的，所以会选择指定id属性值的某个元素。

优先级

id选择器 > 类选择器 > 元素选择器，没有就近原则。

4.属性选择器

使用标签的指定属性和指定属性值来作为选择器，会选中所有符合条件的元素。

5.层次选择器

    1.后代选择器：父元素选择器 后代元素选择器{...},会选中指定父元素的所有指定后代元素
    2.子选择器：父元素选择器>子元素选择器{...},只会选中父元素的直系所有指定子元素 
    3.相邻兄弟选择器:选择器+兄弟元素选择器{...},选中指定元素的相邻下一个元素
    4.通用兄弟选择器：选择器~兄弟元素选择器{...}，选中指定元素之后的所有同辈元素

6.选择器组

多个选择器之间使用逗号分隔，表示多选。

7.伪类选择器

css伪类，用于添加一些选择器的特殊效果。

代码实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css选择器</title>
		<style type="text/css">
			/* 标签选择器 */
			div {
				font-size: 50px;
			}
			
			/* class类选择器 */
			.font-bolder {
				font-weight: bolder;
			}
			.font-red {
				color: red;
			}
			
			/* id选择器 */
			#div4 {
				font-size: 30px;
				color: blue;
			}
			
			#div5 {
				color: blue;
			}
			
			p {
				color: yellow;
			}
			
			/* 属性选择器 */
/* 			input[name="username"] {
				font-size: 30px;
			} */
			
			/* 带有name属性，不考虑值 */
/* 			input[name] {
				font-size: 30px;
			} */
			
			/* name属性值以“p”开头 */
/* 			input[name^="p"] {
				font-size: 30px;
			} */
			
			/* name属性值以“name”结尾 */
/* 			input[name$="name"] {
				font-size: 30px;
			} */
			
			/* name属性值包含“a” */
			input[name*="a"] {
				font-size: 30px;
			}
			
			/* 层次选择器 */
			ul li {
				font-size: 30px;
			}
			
/* 			#div6 div {
				font-size: 20px;
			} */
			
			#div6>div {
				font-size: 20px;
			}
			
			
/* 			#li3+li {
				color: green;
			} */
			
			#li3~li {
				color: green;
			}
			
			/* 选择器组 */
			#div7,#div9 {
				color: green;
			}
			
		</style>
	</head>
	<body>
		
		<div>hello world</div>
		<div class="font-bolder font-red">hello world</div>
		<div>hello world</div>
		<div class="font-bolder">hello world</div>
		
		<div id="div4">
			hello world
		</div>
		
		<!-- 测试元素、类、id三种选择器的优先级 -->
		<p id="div5" class="font-red">
			你好 世界
		</p>
		
		<input id="username" type="text" name="username"/>
		<input id="real_name" type="text" name="real_name"/>
		<input id="password" type="text" name="password"/>
		<input id="password2" type="text" name="password2"/>
		<div name="username">
			我的name也叫username
		</div>
		
		<ul>
			<li>hello1</li>
			<li>hello2</li>
			<li id="li3">hello3</li>
			<li>hello4</li>
			<li>hello5</li>
			<li>hello6</li>
		</ul>
		
		<ol>
			<li>你好1</li>
			<li>你好2</li>
			<li>你好3</li>
		</ol>
		
		<div id="div6">
			<div>
				hello
				<div>
					world
				</div>
			</div>
		</div>
		
		<div id="div7">
			hello world1
		</div>
		<div id="div8">
			hello world2
		</div>
		<div id="div9">
			hello world3
		</div>
		
	</body>
</html>