前端学习(二)——CSS

原創

stcode

2020-02-21 19:14

1.CSS选择器

选择器可以说是CSS里最为核心的部分，选择器语法如下

在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。

选择器	例子	例子描述	CSS
.class	.intro	选择 class="intro" 的所有元素。	1
#id	#firstname	选择 id="firstname" 的所有元素。	1
*	*	选择所有元素。	2
element	p	选择所有 <p> 元素。	1
element,element	div,p	选择所有 <div> 元素和所有 <p> 元素。	1
element element	div p	选择 <div> 元素内部的所有 <p> 元素。	1

例子1：

<!DOCTYPE html>
<html>
<head>
	<title>CSS 测试</title>
	<meta charset="utf-8"/>
	<!-- 该标签表示标签间的元素是CSS -->
	<style type="text/css">
		.color{
			color: red;
		}
	</style>
</head>
<body>
<p class="color">颜色测试</p>
</body>
</html>

例子2：

<!DOCTYPE html>
<html>
<head>
	<title>CSS 测试</title>
	<meta charset="utf-8"/>
	<!-- 该标签表示标签间的元素是CSS -->
	<style type="text/css">
		.color{
			color: red;
		}
		#color{
			color: blue;
		}
	</style>
</head>
<body>
<p class="color">颜色测试</p>
<p id="color">颜色测试2</p>
</body>
</html>

例子

<!DOCTYPE html>
<html>
<head>
	<title>CSS 测试</title>
	<meta charset="utf-8"/>
	<!-- 该标签表示标签间的元素是CSS -->
	<style type="text/css">
		.color{
			color: red;
		}
		#color{
			color: blue;
		}
		p{
			color: green;
		}
	</style>
</head>
<body>
<p class="color">颜色测试</p>
<p id="color">颜色测试2</p>
<p>颜色测试3</p>
</body>
</html>