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