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 。 这是相同样式设置时,后面设置的会覆盖前面的样式。