css选择器

最新推荐文章于 2020-03-14 14:38:37 发布

weixin_34000916

最新推荐文章于 2020-03-14 14:38:37 发布

阅读量81

点赞数

文章标签： python

原文链接：https://my.oschina.net/yxmBetter/blog/828761

版权

2019独角兽企业重金招聘Python工程师标准>>>

赶紧来系统的认识一下CSS选择器吧！

CSS基础选择器（作用:选取元素）

要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器，CSS基础选择器有四种：

标签选择器

标记选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标记指定统一的CSS样式。其基本语法格式如下：
标记名{属性1:属性值1;属性2:属性值2;属性3:属性值3}
标记选择器最大的优点是能快速为页面中同类型的标记统一样式，同时这也是他的缺点，不能设计差异化样式。 （直接复制代码到你的编辑器中查看效果哦）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p {
			color: rgb(255,0,0);
		}
		h1 {
			color: rgb(0,255,0);
		}
		h2 {
			color: rgb(0,0,255);
		}
	</style>
</head>
<body>
	<p>段落</p>
	<h1>标题1</h1>
	<h2>标题2</h2>
</body>
</html>

类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：

.类名{属性1:属性值1;属性2:属性值2;属性3:属性值3} 类选择器最大的优势是可以为元素对象定义单独或相同的样式。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.p1 {
			color: red;
		}
		.p2 {
			color: pink;
		}
		.p3 {
			color: yellow;
		}
		.p4 {
			color: green;
		}
	</style>
</head>
<body>
	<p class="p1">P1</p>
	<p class="p2">P2</p>
	<p class="p3">P3</p>
	<p class="p4">P4</p>
</body>
</html>

id选择器

id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#p1 {
			color: right;
		}
		#p2 {
			color: green;
		}
	</style>
</head>
<body>
	<p id="p1">P1</p>
	<p id="p2">P2</p>
</body>
</html>

通配符选择器

通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：

*{属性1:属性值1;属性2:属性值2;属性3:属性值3}
例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。

*{
	margin:0;		/*定义外边距*/
	padding:0;		/*定义内边距*/
}

并集选择器

并集选择器必须同时满足所有的条件，选择器中间使用逗号隔开（英文逗号）:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p ,.p1 ,#p2{
			color: red ;
		}
	</style>
</head>
<body>
	<p class="p1">含有类的p标签</p>
	<p>只是p标签本身</p>
	<div>只是div标签本身</div>
	<h1 class="p1">含有类的h1标签</h1>
	<span id="p2">含有id名的span标签</span>
</body>
</html>

交集选择器

“交集选择器”由两个选择器直接链接构成，其结果是选中各自元素范围的交集。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p.p1#p2 {
			color: red;
		}
	</style>
</head>
<body>
	<p class="p1"  id="p2">含有类和id的p标签</p>
	<p>只是p标签</p>
	<div>只是div标签</div>
	<h1 class="p1">含有类的h1标签</h1>
</body>
</html>

后代选择器

后代选择器使用空格隔开两个选择器，符合条件的是父选择器的所有子代选择器。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.father p {
			color: red;
		}
	</style>
</head>
<body>
	<div class="father">
		<p>这是p</p>
		<div>这是div</div>
		<h1>这是h1</h1>
		<div>
			<p>这是最里面的p</p>
		</div>
	</div>
	<p>这是div同级的p</p>
</body>
</html>

子代选择器

子代选择器使用'>'连接，只选择到直接子代选择器。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.father>p {
			color: red;
		}
	</style>
</head>
<body>
	<div class="father">
		<p>这是直接子代p</p>
		<div>这是直接子代div</div>
		<h1>这是直接子代h1</h1>
		<div>
			<p>这不是直接子代p</p>
		</div>
	</div>
	<p>这是同级p</p>
</body>
</html>