CSS 分组、嵌套、继承

CSS - 分组选择器

分组选择器将具有相同样式的 HTML 元素集中在一处，可以减少代码量。每个选择器用逗号分隔。如：

p,h1,div{ font-size: 15px; }
span, .txt { text-align: center; }

CSS - 嵌套选择器

css 嵌套选择器可以指定css样式的作用范围。选择器之间需要至少一个空格。

p .txt - 作用于 <p> 元素里面 class="txt" 的样式
.txt p - 作用于 class="txt" 的元素里面的 <p> 元素
div p - 作用于 <div> 元素里面 <p> 元素
p.txt - 作用于 class="txt" 的 <p> 元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>pangugle 教程</title>
		<style>
			div p { color: red;}
		</style>
	</head>
	<body>
		<p>这是一个段落。</p>
		<div>
			<p>这是第二个段落。</p>
			<span>span 文本。</span>
			<p>这是第三个段落。</p>
		</div>
	</body>
</html>

指定只有 <div> 里面的所有 <p> 元素字体颜色才为 red。

css - 继承

css的继承：就是给父级设置一些属性，子级继承了父级的该属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>pangugle 教程</title>
		<style>
			div {
				text-align: center;
			}
		</style>
	</head>
	<body>
		<p>第一个段落。</p>
		<div>
			<p>第二个段落。</p>
		</div>
	</body>
</html>

以上实例中，第二个 <p> 是 <div> 的子元素，<div> 是父元素。子元素会继承父元素的 css 属性，所以第二个 <p> 的内容会水平居中。

css - 样式覆盖

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>pangugle 教程</title>
		<style>
			p { color: blue; }
			div p {
				color: red;
			}
		</style>
	</head>
	<body>
		<p>第一个段落。</p>
		<div>
			<p>第二个段落。</p>
		</div>
	</body>
</html>

以上实例在浏览器可以看到，第二个 <p> 元素的字体颜色是 red 。这是相同样式设置时，后面设置的会覆盖前面的样式。