前端學習(二)——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>