m5k1umn 发表于 2024-6-30 05:00:19

CSS高级选取器的功效及案例代码演示


    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">CSS是对样式的修饰，权重<span style="color: black;">表率</span>着某种级别，权重决定了你css规则<span style="color: black;">怎么样</span>被浏览器解析直到生效，css权重关系到你的css规则是<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>：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;">案例</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">h1{
      color:blue;
      font-size:15px;
      }</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">以上h1标签<span style="color: black;">选取</span>器，做了两件事：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1.找到所有的h1标签（<span style="color: black;">选取</span>对象）</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.设置这些标签的样式：字体颜色为蓝色，字体<span style="color: black;">体积</span>为15px（设置样式）</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">
      <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://picx.zhimg.com/v2-684d6328cc529b68b193754653727eb9_l.jpg?source=f2fdee93" style="width: 50%; margin-bottom: 20px;">
            <div style="color: black; text-align: left; margin-bottom: 10px;">
                <div style="color: black; text-align: left; margin-bottom: 10px;">diveng</div>
                <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">2 次咨询</span>
                  <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">5.0</span></div>
                </div>
                <div style="color: black; text-align: left; margin-bottom: 10px;">南通大学 工学硕士</div>
                <div style="color: black; text-align: left; margin-bottom: 10px;">11251 次赞同</div>
            </div>
            <div style="color: black; text-align: left; margin-bottom: 10px;">去咨询</div>
      </div>
    </div>
    <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>：CSS<span style="color: black;">便是</span>为了给HTML页面添加样式，CSS设置样式是<span style="color: black;">经过</span>CSS<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>CSS<span style="color: black;">功效</span>的标签，让CSS样式<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;">CSS的<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>器：针对一类标签</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">ID<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></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>器：用空格隔开</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">子代<span style="color: black;">选取</span>器：用&gt;隔开</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">交集<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>器）：用逗号隔开</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">伪类<span style="color: black;">选取</span>器：常用的是:hover</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>器以及CSS权重的<span style="color: black;">关联</span>内容见下面的链接，重点讲一下高级<span style="color: black;">选取</span>器</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-a8b6a41c607be83280bf3e795d533bbc_720w.webp" style="width: 50%; margin-bottom: 20px;"></div><span style="color: black;">选取</span>器权重用4位数<span style="color: black;">暗示</span>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><a style="color: black;"><span style="color: black;"><span style="color: black;">diveng：<span style="color: black;">怎样</span>理解CSS样式表权重与优先级</span><span style="color: black;">1 赞同 · 0 评论<span style="color: black;"><span style="color: black;">文案</span></span></span></span><span style="color: black;"><img src="https://pic2.zhimg.com/v2-810eadf61cc361f06d2fb335feccdbfd_180x120.jpg" style="width: 50%; margin-bottom: 20px;"></span></a></div>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">1.后代<span style="color: black;">选取</span>器（<span style="color: black;">包括</span><span style="color: black;">选取</span>器）</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（1）语法格式：父元素 后代元素{属性:属性值;属性:属性值;}</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（2）<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>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（3）<span style="color: black;">为何</span>要<span style="color: black;">运用</span>后代<span style="color: black;">选取</span>器而<span style="color: black;">不消</span>class<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>将一个类名为diveng的div下所有的p标签<span style="color: black;">所有</span>设置为蓝色，<span style="color: black;">此时</span>候<span style="color: black;">咱们</span>给所有的p标签（1个，2个，还能处理，还有可能是100个.......，即使<span style="color: black;">咱们</span>在vscode中<span style="color: black;">运用</span>ctrl+d的方式进行快捷设置，<span style="color: black;">亦</span>不美观）添加class是非常麻烦的，<span style="color: black;">然则</span>用后代<span style="color: black;">选取</span>器避免这些麻烦与问题。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">&lt;!DOCTYPE html&gt;
      &lt;html lang="en"&gt;
      &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Document&lt;/title&gt;
      &lt;style&gt;
      .diveng p{color:blue;}
      &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;div class="diveng"&gt;
      &lt;p&gt;&lt;/p&gt;
      &lt;p&gt;&lt;/p&gt;
      &lt;p&gt;&lt;/p&gt;
      &lt;p&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;</div>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">2.子代<span style="color: black;">选取</span>器</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（1）语法格式：父元素&gt;子元素{属性:属性值;}</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（2）<span style="color: black;">运用</span>场景：当<span style="color: black;">咱们</span><span style="color: black;">必须</span>把段落1、2、5的文字改成红色，加粗时。<span style="color: black;">倘若</span><span style="color: black;">运用</span><span style="color: black;">包括</span><span style="color: black;">选取</span>器，就会把段落3、4<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;">&lt;!DOCTYPE html&gt;
      &lt;html lang="</div>




听听海 发表于 2024-9-24 10:49:39

你的见解真是独到，让我受益匪浅。

j8typz 发表于 2024-10-14 23:21:07

同意、说得对、没错、我也是这么想的等。

4zhvml8 发表于 4 天前

真情实感，其含义为认真了、走心了的意思，是如今的饭圈常用语。
页: [1]
查看完整版本: CSS高级选取器的功效及案例代码演示