HTML+CSS 基本知识-入门概括-选取器
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">1、</span><span style="color: black;">选取</span>器概述</h3>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">1、什么是<span style="color: black;">选取</span>器</h3>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">CSS</span> <span style="color: black;"><span style="color: black;">选取</span>器的<span style="color: black;">功效</span>是<span style="color: black;">根据</span></span> <span style="color: black;">CSS</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;">浏览器在解析</span> <span style="color: black;">HTML</span> <span style="color: black;">页面时</span><span style="color: black;">，</span><span style="color: black;">会<span style="color: black;">按照</span></span> <span style="color: black;">CSS</span> <span style="color: black;">规则中的<span style="color: black;">选取</span>器定位</span> <span style="color: black;">HTML</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><span style="color: black;"><span style="color: black;">便是</span>对元素做标记</span><span style="color: black;">，</span><span style="color: black;">方便<span style="color: black;">按照</span>标记去决定给那几个元素添加css样式</span><span style="color: black;">）</span>
<span style="color: black;"></span>
<span style="color: black;"><span style="color: black;">经过</span></span> <span style="color: black;">CSS</span> <span style="color: black;"><span style="color: black;">选取</span>器<span style="color: black;">能够</span>实现对</span> <span style="color: black;">HTML</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;">CSS</span> <span style="color: black;"><span style="color: black;">选取</span>器一对<span style="color: black;">必定</span>位</span> <span style="color: black;">HTML</span> <span style="color: black;">元素</span><span style="color: black;">：</span>
<span style="color: black;">#</span><span style="color: black;">box</span> <span style="color: black;">{</span>
<span style="color: black;">color</span><span style="color: black;">:</span> <span style="color: black;">lightcoral</span><span style="color: black;">;</span>
<span style="color: black;">font-size</span><span style="color: black;">:</span> <span style="color: black;">24</span><span style="color: black;">px</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;">CSS</span> <span style="color: black;"><span style="color: black;">选取</span>器一对多定位</span> <span style="color: black;">HTML</span> <span style="color: black;">元素</span><span style="color: black;">：</span>
<span style="color: black;">div</span> <span style="color: black;">{</span>
<span style="color: black;">color</span><span style="color: black;">:</span> <span style="color: black;">lightcoral</span><span style="color: black;">;</span>
<span style="color: black;">font-size</span><span style="color: black;">:</span> <span style="color: black;">24</span><span style="color: black;">px</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;">CSS</span> <span style="color: black;"><span style="color: black;">选取</span>器多对<span style="color: black;">必定</span>位</span> <span style="color: black;">HTML</span> <span style="color: black;">元素</span><span style="color: black;">：</span>
<span style="color: black;">div</span><span style="color: black;">.</span><span style="color: black;">demo</span> <span style="color: black;">{</span>
<span style="color: black;">color</span><span style="color: black;">:</span> <span style="color: black;">lightcoral</span><span style="color: black;">;</span>
<span style="color: black;">font-size</span><span style="color: black;">:</span> <span style="color: black;">24</span><span style="color: black;">px</span><span style="color: black;">;</span>
<span style="color: black;">}</span>
</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">2、<span style="color: black;">选取</span>器的<span style="color: black;">归类</span></h3>
<div style="color: black; text-align: left; margin-bottom: 10px;">CSS 从<span style="color: black;">第1</span>版本发展到第三版本，<span style="color: black;">引起</span> CSS <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>如下：
基本<span style="color: black;">选取</span>器：共有 5 个基本<span style="color: black;">选取</span>器，是 CSS <span style="color: black;">选取</span>器的最为基本的用法。
层级<span style="color: black;">选取</span>器：共有 4 个层级<span style="color: black;">选取</span>器，是<span style="color: black;">按照</span> HTML 元素之间的关系来定位 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>器：<span style="color: black;">准许</span>未<span style="color: black;">包括</span>在 HTML 页面中的状态信息选定位 HTML 元素。
伪元素<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>，但<span style="color: black;">选取</span>器的每一种用法是一致的。</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">2、</span>基本选择器</h3>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">1、概述</h3>
<div style="color: black; text-align: left; margin-bottom: 10px;">CSS 的基本<span style="color: black;">选取</span>器是<span style="color: black;">选取</span>器所有种类中最为<span style="color: black;">基本</span>的用法，基本<span style="color: black;">选取</span>器共有 5 种<span style="color: black;">详细</span>用法，如下：
类型（Type）<span style="color: black;">选取</span>器（有些中文资料中<span style="color: black;">叫作</span>为“元素<span style="color: black;">选取</span>器”）
类（Class）<span style="color: black;">选取</span>器
ID <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>器</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">2.1、类型<span style="color: black;">选取</span>器</h3>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">类型<span style="color: black;">选取</span>器</span><span style="color: black;">，</span><span style="color: black;">又<span style="color: black;">叫作</span>为元素<span style="color: black;">选取</span>器</span><span style="color: black;">，</span><span style="color: black;">这种基本<span style="color: black;">选取</span>器是<span style="color: black;">经过</span></span> <span style="color: black;">HTML</span> <span style="color: black;">页面的元素名定位<span style="color: black;">详细</span></span> <span style="color: black;">HTML</span> <span style="color: black;">元素</span><span style="color: black;">。</span><span style="color: black;"><span style="color: black;">倘若</span>类型<span style="color: black;">选取</span>器单独<span style="color: black;">运用</span>的话</span><span style="color: black;">，</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;"><span style="color: black;">经过</span>元素名定位元素</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;">DOCTYPE</span> <span style="color: black;">html</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">html</span> <span style="color: black;">lang</span><span style="color: black;">=</span><span style="color: black;">"en"</span><span style="color: black;">></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><span style="color: black;">类型<span style="color: black;">选取</span>器</span><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;">style</span><span style="color: black;">></span>
<span style="color: black;">div</span> <span style="color: black;">{</span>
<span style="color: black;">color</span><span style="color: black;">:</span> <span style="color: black;">lightcoral</span><span style="color: black;">;</span>
<span style="color: black;">font-size</span><span style="color: black;">:</span> <span style="color: black;">24</span><span style="color: black;">px</span><span style="color: black;">;</span>
<span style="color: black;">}</span>
<span style="color: black;"></</span><span style="color: black;">style</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;"><</span><span style="color: black;">body</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">div</span><span style="color: black;">></span><span style="color: black;">这是测试内容</span><span style="color: black;">.</</span><span style="color: black;">div</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;">.</</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;"></</span><span style="color: black;">html</span><span style="color: black;">></span>
</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">2.2、类<span style="color: black;">选取</span>器</h3>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">类<span style="color: black;">选取</span>器是<span style="color: black;">经过</span></span> <span style="color: black;">HTML</span> <span style="color: black;">元素的</span> <span style="color: black;">class</span> <span style="color: black;">属性的值定位<span style="color: black;">详细</span></span> <span style="color: black;">HTML</span> <span style="color: black;">元素</span><span style="color: black;">。</span><span style="color: black;">这种基本<span style="color: black;">选取</span>器的用法是</span> <span style="color: black;">.</span><span style="color: black;">className</span> <span style="color: black;">形式</span><span style="color: black;">，</span><span style="color: black;">其中</span> <span style="color: black;">className</span> <span style="color: black;"><span style="color: black;">叫作</span>为类名</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;">DOCTYPE</span> <span style="color: black;">html</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">html</span> <span style="color: black;">lang</span><span style="color: black;">=</span><span style="color: black;">"en"</span><span style="color: black;">></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><span style="color: black;">类<span style="color: black;">选取</span>器</span><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;">style</span><span style="color: black;">></span>
<span style="color: black;">.</span><span style="color: black;">demo</span> <span style="color: black;">{</span>
<span style="color: black;">color</span><span style="color: black;">:</span> <span style="color: black;">lightcoral</span><span style="color: black;">;</span>
<span style="color: black;">font-size</span><span style="color: black;">:</span> <span style="color: black;">24</span><span style="color: black;">px</span><span style="color: black;">;</span>
<span style="color: black;">}</span>
<span style="color: black;"></</span><span style="color: black;">style</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;"><</span><span style="color: black;">body</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">div</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"demo"</span><span style="color: black;">></span><span style="color: black;">这是测试内容</span><span style="color: black;">.</</span><span style="color: black;">div</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;">.</</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;"></</span><span style="color: black;">html</span><span style="color: black;">></span>
</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">2.3、ID <span style="color: black;">选取</span>器</h3>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">ID</span> <span style="color: black;"><span style="color: black;">选取</span>器是<span style="color: black;">经过</span></span> <span style="color: black;">HTML</span> <span style="color: black;">元素的</span> <span style="color: black;">id</span> <span style="color: black;">属性的值定位<span style="color: black;">详细</span></span> <span style="color: black;">HTML</span> <span style="color: black;">元素</span><span style="color: black;">。</span><span style="color: black;">这种基本<span style="color: black;">选取</span>器的用法是</span> <span style="color: black;">#</span><span style="color: black;">ID</span> <span style="color: black;">形式</span><span style="color: black;">，</span><span style="color: black;">其中</span> <span style="color: black;">ID</span> <span style="color: black;">是</span> <span style="color: black;">id</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;">ID</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;">如下示例代码展示了ID</span> <span style="color: black;"><span style="color: black;">选取</span>器的用法</span><span style="color: black;">：</span>
<span style="color: black;"><!</span><span style="color: black;">DOCTYPE</span> <span style="color: black;">html</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">html</span> <span style="color: black;">lang</span><span style="color: black;">=</span><span style="color: black;">"en"</span><span style="color: black;">></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><span style="color: black;">ID<span style="color: black;">选取</span>器</span><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;">style</span><span style="color: black;">></span>
<span style="color: black;">#</span><span style="color: black;">Demo</span> <span style="color: black;">{</span>
<span style="color: black;">color</span><span style="color: black;">:</span> <span style="color: black;">lightcoral</span><span style="color: black;">;</span>
<span style="color: black;">font-size</span><span style="color: black;">:</span> <span style="color: black;">24</span><span style="color: black;">px</span><span style="color: black;">;</span>
<span style="color: black;">}</span>
<span style="color: black;"></</span><span style="color: black;">s</span>
</div>
页:
[1]