CSS样式基础
CSS选择器
重要程度：9 分
<h2>CSS选择器重点内容</h2>
<p>CSS选择器用于选择需要添加样式的HTML元素。</p>
<ul>
<li><strong>元素选择器</strong>：根据HTML元素名称来选择元素。<br>
<code>h1 { color: blue; }</code> 这个规则会把所有的<h1>标签内的文本颜色设置为蓝色。
</li>
<li><strong>类选择器</strong>：通过class属性来选择元素。<br>
<code>.special { font-weight: bold; }</code> 这个规则会给所有带有class="special"的元素加粗显示。
</li>
<li><strong>ID选择器</strong>：通过id属性来选择元素。<br>
<code>#header { background-color: red; }</code> 这个规则会让id="header"的元素背景色变为红色。
</li>
<li><strong>后代选择器</strong>：用于选择某个元素的后代元素。<br>
<code>div p { color: green; }</code> 这个规则会让所有在<div>内的<p>标签内的文本变成绿色。
</li>
<li><strong>子代选择器</strong>：用于选择某个元素的直接后代元素。<br>
<code>ul > li { list-style-type: square; }</code> 这个规则会让<ul>下的直接<li>子元素列表项符号变为方形。
</li>
<li><strong>属性选择器</strong>：根据元素的属性及属性值来选择元素。<br>
<code>a[target="_blank"] { color: purple; }</code> 这个规则会让所有target属性值为_blank的<a>链接变成紫色。
</li>
</ul>
<h3>例题</h3>
<p>假设你有以下HTML代码：</p>
<pre>
<div class="container">
<p>这是一段普通文本</p>
<p class="special">这是特殊文本</p>
<span>这是另一个文本</span>
</div>
</pre>
<p>使用CSS选择器来实现如下效果：</p>
<ul>
<li>使容器内的所有<p>标签文本颜色变红。</li>
<li>使class为"special"的<p>标签文本加粗并变成蓝色。</li>
<li>使class为"container"的<div>标签背景色变黄。</li>
</ul>
<p>对应的CSS代码如下：</p>
<pre>
.container { background-color: yellow; }
.container p { color: red; }
.container .special { font-weight: bold; color: blue; }
</pre>