CSS 三种基本选取器
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">本节<span style="color: black;">咱们</span>来学习 CSS 中的<span style="color: black;">选取</span>器，<span style="color: black;">选取</span>器是 CSS 里面一个很<span style="color: black;">要紧</span>的概念，HTML 中的所有标签样式，都是<span style="color: black;">经过</span><span style="color: black;">区别</span>的 CSS <span style="color: black;">选取</span>器进行<span style="color: black;">掌控</span>的。<span style="color: black;">咱们</span>只<span style="color: black;">必须</span><span style="color: black;">经过</span><span style="color: black;">选取</span>器，就<span style="color: black;">能够</span>对<span style="color: black;">区别</span>的 HTML 标签进行<span style="color: black;">选取</span>，并指定<span style="color: black;">各样</span>样式声明。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在 CSS 中三三种最基本的<span style="color: black;">选取</span>器，分别是标签<span style="color: black;">选取</span>器、类<span style="color: black;">选取</span>器（class）、ID<span style="color: black;">选取</span>器。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">咱们</span><span style="color: black;">晓得</span>在 HTML 页面中引入 CSS 样式最好的<span style="color: black;">办法</span>是引入<span style="color: black;">外边</span>样式，<span style="color: black;">亦</span><span style="color: black;">便是</span>将 CSS 代码单独<span style="color: black;">安置</span>到一个 .css 文件内，<span style="color: black;">而后</span>再引入这个 CSS 文件。</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">标签<span style="color: black;">选取</span>器</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">咱们</span><span style="color: black;">晓得</span>一个 HTML 页面是<span style="color: black;">经过</span><span style="color: black;">非常多</span>标签<span style="color: black;">构成</span>的，CSS 标签<span style="color: black;">选取</span>器<span style="color: black;">便是</span>用来声明这些标签的，<span style="color: black;">由于</span>每一个 HTML 标签的名<span style="color: black;">叫作</span>都<span style="color: black;">能够</span><span style="color: black;">做为</span>相应的标签<span style="color: black;">选取</span>器的名<span style="color: black;">叫作</span>。</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">示例：</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">例如<span style="color: black;">咱们</span>来看一个例子，下面是一段 HTML 代码：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><!DOCTYPE></span>
<span style="color: black;"><</span><span style="color: black;">html</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">head</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">meta</span> <span style="color: black;">charset</span><span style="color: black;">=</span><span style="color: black;">"utf-8"</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">title</span><span style="color: black;">></span>CSS学习(9xkd.com)<span style="color: black;"></</span><span style="color: black;">title</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">link</span> <span style="color: black;">rel</span><span style="color: black;">=</span><span style="color: black;">"stylesheet"</span> <span style="color: black;">type</span><span style="color: black;">=</span><span style="color: black;">"text/css"</span> <span style="color: black;">href</span><span style="color: black;">=</span><span style="color: black;">"index.css"</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">head</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">body</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">h3</span><span style="color: black;">></span>侠课岛<span style="color: black;"></</span><span style="color: black;">h3</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">p</span><span style="color: black;">></span>你好，侠课岛！<span style="color: black;"></</span><span style="color: black;">p</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">body</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">html</span><span style="color: black;">></span>
</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">倘若</span><span style="color: black;">咱们</span>要为这两个标签定义 CSS 样式，就<span style="color: black;">能够</span>直接在 .css 文件内<span style="color: black;">经过</span>标签<span style="color: black;">选取</span>器来声明样式：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">h3{
color: red ;
}
p{
color: green;
}</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">记得在 HTML 中<span style="color: black;">经过</span> <link> 标签来引入 CSS 文件，此时在浏览器中的演示效果如下所示：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-c241c884020cd8de4e90c9ae5b282e23_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">从<span style="color: black;">以上</span>代码中，<span style="color: black;">咱们</span>看到，CSS 语法<span style="color: black;">便是</span>由<span style="color: black;">选取</span>器和声明块 {} <span style="color: black;">构成</span>，<span style="color: black;">每一个</span>声明块中<span style="color: black;">能够</span><span style="color: black;">包括</span>一个或多个样式声明，并且每条声明后面以分号 ; 结尾。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">当然除了<span style="color: black;">以上</span>例子中的 p 、h3 标签<span style="color: black;">能够</span><span style="color: black;">做为</span>标签<span style="color: black;">选取</span>器，其他的例如 html、body、a、img 等所有标签都是<span style="color: black;">能够</span><span style="color: black;">做为</span>标签<span style="color: black;">选取</span>器的。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">然则</span><span style="color: black;">咱们</span>在<span style="color: black;">运用</span>标签<span style="color: black;">选取</span>器的时候会有一个问题，举个例子，<span style="color: black;">咱们</span>先来看下面这段代码：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><!DOCTYPE></span>
<span style="color: black;"><</span><span style="color: black;">html</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">head</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">meta</span> <span style="color: black;">charset</span><span style="color: black;">=</span><span style="color: black;">"utf-8"</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">title</span><span style="color: black;">></span>CSS学习(9xkd.com)<span style="color: black;"></</span><span style="color: black;">title</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">link</span> <span style="color: black;">rel</span><span style="color: black;">=</span><span style="color: black;">"stylesheet"</span> <span style="color: black;">type</span><span style="color: black;">=</span><span style="color: black;">"text/css"</span> <span style="color: black;">href</span><span style="color: black;">=</span><span style="color: black;">"index.css"</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">head</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">body</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">h3</span><span style="color: black;">></span>动物园里有什么？<span style="color: black;"></</span><span style="color: black;">h3</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">p</span><span style="color: black;">></span>小白兔<span style="color: black;"></</span><span style="color: black;">p</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">p</span><span style="color: black;">></span>小狮子<span style="color: black;"></</span><span style="color: black;">p</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">p</span><span style="color: black;">></span>小老虎<span style="color: black;"></</span><span style="color: black;">p</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">p</span><span style="color: black;">></span>小猴子<span style="color: black;"></</span><span style="color: black;">p</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">body</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">html</span><span style="color: black;">></span>
</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在浏览器中的演示效果：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-4d42379cd67988f01509f548b4bdea01_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">倘若</span><span style="color: black;">咱们</span>想要将<span style="color: black;">以上</span>代码中 “小兔</p>
外贸论坛是我们的，责任是我们的，荣誉是我们的，成就是我们的，辉煌是我们的。 你的见解独到，让我受益匪浅，期待更多交流。 楼主的文章非常有意义，提升了我的知识水平。
页:
[1]