CSS选择器详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_35427176/article/details/79115652

css选择器种类：

基本选择器（元素选择器，类选择器，属性选择器）

1.元素选择器只是用来对一种元素进行选择，例如一下代码对所有的div进行选择：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css</title>
		<style>
			div{
				font-size: 30px;
				color: red;
			}
		</style>
	</head>
	<body>
		<div >
			你好  亲爱哒
		</div>
		<div >
			嗯呢
		</div>
		<div>
			好的  亲爱哒
		</div>
	</body>
</html>

2.类选择器对元素添加类，对相同的类进行选择，如下代码所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css</title>
		<style>
			.myDiv{
				font-size= 66px ;
				color:blanchedalmond ;
			}
		</style>
	</head>
	<body>
		<div class="myDiv">
			你好  亲爱哒
		</div>
		<div class="myDiv">
			嗯呢
		</div>
		<div>
			好的  亲爱哒
		</div>
	</body>
</html>

3.id选择器对指定id的元素进行选择，如下代码所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css</title>
		<style>
			#div_1{
				font-size: 99px;
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="div_1">
			你好  亲爱哒
		</div>
		<div >
			嗯呢
		</div>
		<div>
			好的  亲爱哒
		</div>
	</body>
</html>

其他选择器（层级选择器，属性选择器）

1.层级选择器同一元素，根据所在层级不同进行选择，代码如下所示

（只进行在div中的p进行选择，而在div外的p不做选择）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css</title>
		<style>
			div p{
				font-size: 99px;
				color: yellow;
			}
		</style>
	</head>
	<body>
		<div >
			<p>你好  亲爱哒</p>
		</div>
		<div >
			嗯呢
		</div>
		<div>
			好的  亲爱哒
		</div>
		<p>hello</p>
	</body>
</html>

2.属性选择器根据同一标签中不同属性进行选择，例如一下代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<style>
			input[type="text"]{
				background-color: red;
			}
			input[type=password]{
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<form>
			<input type="text" />
			<input type="password" />
		</form>
	</body>
</html>

css选择器引入方式分类

1.内部引入

在html中的head中加入style和选择器形如上面代码

2.行内引入标签中加入属性style 然后写样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css</title>
	</head>
	<body>
		<div style="font-size: 36px; color: red;">
			<p>你好  亲爱哒</p>
		</div>
	</body>
</html>

3.外部引入单独书写一个css文件，通过link标签引入到html中

css文件中的代码：

div{
	font-size: 33px;
	color: blue;
}

html中的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css</title>
		<link rel="stylesheet" href="../css/css.css" type="text/css"/>
	</head>
	<body>
		<div >
			嗯呢
		</div>
		<div>
			好的  亲爱哒
		</div>
	</body>
</html>

css选择器与引入方式