CSS 中 >、~、+ 、空格、逗号的用法
<h2 style="color: black; text-align: left; margin-bottom: 10px;">前言</h2>
<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>你是新手那还说的过去，毕竟刚接触，<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>步入工作岗位、入门了，这些常用的 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>属于是大忌。</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>一下它们的用法。</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">子元素<span style="color: black;">选取</span>器（>）</h2>
<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;">第1</span>代子元素，<span style="color: black;">咱们</span>来看一个例子：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><!DOCTYPE html></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;">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;">meta</span> <span style="color: black;">name</span><span style="color: black;">=</span><span style="color: black;">"viewport"</span> <span style="color: black;">content</span><span style="color: black;">=</span><span style="color: black;">"width=device-width, initial-scale=1.0"</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><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;">type</span><span style="color: black;">=</span><span style="color: black;">"text/css"</span><span style="color: black;">></span>
<span style="color: black;">.</span><span style="color: black;">parent</span><span style="color: black;">></span><span style="color: black;">div</span> <span style="color: black;">{</span>
<span style="color: black;">width</span><span style="color: black;">:</span> <span style="color: black;">200</span><span style="color: black;">px</span><span style="color: black;">;</span>
<span style="color: black;">height</span><span style="color: black;">:</span> <span style="color: black;">100</span><span style="color: black;">px</span><span style="color: black;">;</span>
<span style="color: black;">bac<span style="color: black;">公斤</span>round-color</span><span style="color: black;">:</span> <span style="color: black;">red</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;">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;">"parent"</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;">div</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;">div</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"parent"</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">ul</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">li</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;">div</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">li</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">ul</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;">body</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">html</span><span style="color: black;">></span>
</div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-ce513afa82b055ad733e1b427878a8c9_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;">如上代码和效果图所示，我给 .parent 的<span style="color: black;">第1</span>代子元素 div 设置了宽高和背景色，<span style="color: black;">因为</span>我是用了 > 符号进行操作的，<span style="color: black;">因此</span><span style="color: black;">仅在</span><span style="color: black;">第1</span>代子元素中生效，它的孙子代、重孙子代以及之后的子代都不生效，这<span style="color: black;">便是</span> > 的用法。</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">浪花</span>号（~）</h2>
<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>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><!DOCTYPE html></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;">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;">meta</span> <span style="color: black;">name</span><span style="color: black;">=</span><span style="color: black;">"viewport"</span> <span style="color: black;">content</span><span style="color: black;">=</span><span style="color: black;">"width=device-width, initial-scale=1.0"</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>号的<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><span style="color: black;">style</span> <span style="color: black;">type</span><span style="color: black;">=</span><span style="color: black;">"text/css"</span><span style="color: black;">></span>
<span style="color: black;">h1</span><span style="color: black;">~</span><span style="color: black;">div</span> <span style="color: black;">{</span>
<span style="color: black;">width</span><span style="color: black;">:</span> <span style="color: black;">200</span><span style="color: black;">px</span><span style="color: black;">;</span>
<span style="color: black;">height</span><span style="color: black;">:</span> <span style="color: black;">60</span><span style="color: black;">px</span><span style="color: black;">;</span>
<span style="color: black;">bac<span style="color: black;">公斤</span>round-color</span><span style="color: black;">:</span> <span style="color: black;">skyblue</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;">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;">"parent"</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;">第1</span>个DIV<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;">h1</span><span style="color: black;">></span>我是标题一<span style="color: black;"></</span><span style="color: black;">h1</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">h2</span><span style="color: black;">></span>我是标题二<span style="color: black;"></</span><span style="color: black;">h2</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">div</span><span style="color: black;">></span>第二个DIV<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><span style="color: black;">></span>我是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;">input</span> <span style="color: black;">type</span><span style="color: black;">=</span><span style="color: black;">"text"</span> <span style="color: black;">name</span><span style="color: black;">=</span><span style="color: black;">"testIpt"</span> <span style="color: black;">value</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;">div</span><span style="color: black;">></span>第三个DIV<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;">div</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>
你的话语如春风拂面，让我心生暖意。 说得好啊！我在外链论坛打滚这么多年，所谓阅人无数，就算没有见过猪走路，也总明白猪肉是啥味道的。 你的话语如春风拂面，让我感到无比温暖。 对于这个问题，我有不同的看法... 百度seo优化论坛 http://www.fok120.com/ 外贸论坛是我们的，责任是我们的，荣誉是我们的，成就是我们的，辉煌是我们的。
页:
[1]