HTML中css的学习（二）——选择器

选择器：每一条css样式声明（定义）由两部分组成，形式如下：选择器{样式；}

一、标签选择器：就是html中的标签

div{
	color: red;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/test.css" type="text/css"/>
	</head>
	<body>
		<div>
			css样式			
		</div>
	</body>
</html>

二、类选择器：英文圆点开头，类选择器名称可以任意起名，不能是中文

步骤：

①使用合适的标签把要修饰的内容标记起来

②使用class="类选择器的名称"为标签设置一个类

③设置类选择器css样式点（.）名字{}

.test{
	color: red;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/test.css" type="text/css"/>
	</head>
	<body>
		<div class="test">
			css样式			
		</div>
	</body>
</html>

三、ID选择器：为标签设置id="ID名称"，ID选择符的前面是#号

①ID选择器只能在文档中使用一次，类选择器能多次使用

②ID选择器只能为一个元素设置一个样式，类选择器能为一个元素设置多个样式

#test{
	color: red;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/test.css" type="text/css"/>
	</head>
	<body>
		<div id="test">
			css样式			
		</div>
	</body>
</html>

四、子选择器：用于选择指定标签元素的第一代子元素，使用 >

例：div>span{color：red;}

这里指的是在div标签下的第一级元素为span设置，而如果是div标签元素下的第二级span就不会被设置。

div>span{
	color: red;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/test.css" type="text/css"/>
	</head>
	<body>
		<div>
			<span>第一个子元素1</span>
			
			<a>第二个子元素</a>
			<span>第一个子元素2</span>
			本元素		
		</div>
		<div>
			<span>第一个子元素1</span>
			<a><span>第二个子元素</span></a>
			本元素		
		</div>
	</body>
</html>

五、包含（后代）选择器：将“>”符号改为空格，用于作用于选择器指定标签元素下的后辈元素。

意思是在指定标签元素下的所有指定子元素都会被设置。

div span{color:red;}

div span{
	color: red;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/test.css" type="text/css"/>
	</head>
	<body>
		<div>
			<span>第一级span元素1</span>
			
			<a>a元素</a>
			<span>第一级span元素2</span>
			本元素		
		</div>
		<div>
			<span>第一级span元素</span>
			<a><span>第二级span元素</span></a>
			本元素		
		</div>
	</body>
</html>

六、相邻兄弟选择器：作用于指定元素标签后面指定的那个相邻的元素标签

语法：h1 + li{color:red;}这里的意思是指在h1后面那个li元素

这种选择器作用在指定元素后面接着的那个指定元素，必须是相邻的，如果中间隔了一个，也是没法作用的。

span + a{
	color: red;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/test.css" type="text/css"/>
	</head>
	<body>
		<div>
			<span>
				我是span元素
			</span>
			<a>我是a元素1</a>
			<a>我是a元素2</a>
		</div>
		<div>
			<span>我是span元素1</span>
			<i>我是i元素1</i>
			<a>我是a元素1</a>
			<span>
				<a>我是span元素里的a元素1</a>
				<span>我是span元素里的span元素</span>
				<a>我是span元素里的a元素2</a>
			</span>
		</div>
	</body>
</html>

七、通用选择器：使用一个“*”号指定，匹配html中所有标签元素。

*{
	color: red;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/test.css" type="text/css"/>
	</head>
	<body>
		<div>
			<span>
				我是span元素
			</span>
			<a>我是a元素1</a>
			<a>我是a元素2</a>
		</div>
		
	</body>
</html>

八、伪类选择器：它允许给html中不存在的标签（值标签的某种状态）设置样式

E:link{color:red}指未点击时的状态(特指a标签)

E:visited{color:blue}指点击过后的状态（特指a标签）

E:hover{color:black}指点击时的状态（不限于a标签）

E:active{color:white}指选定的时候的状态，即点击了还没松开（不限于a标签）

由于代码展示的截图看不出来效果，这里提供代码，自己可以敲出来试验。还有好几种伪类，这里写出常用的。

a:link{
	color: red;
}
a:visited{
	color: black;
}
a:hover{
	color: purple;
}
a:active{
	color: blue;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/test.css" type="text/css"/>
	</head>
	<body>
		<div>
			<a href="#">我是a1标签</a>
			<a href="#">我是a2标签</a>
			<a href="#">我是a3标签</a>
			<a href="#">我是a4标签</a>
		</div>
			
	</body>
</html>

HTML中css的学习（二）——选择器

猜你喜欢