选择器的提问及答案整理

最新推荐文章于 2024-05-22 10:27:27 发布

绿皮车的忧伤

最新推荐文章于 2024-05-22 10:27:27 发布

阅读量160

点赞数

文章标签：前端 html javascript css

本文链接：https://blog.csdn.net/greentrainsad/article/details/127289579

版权

选择器提问一

选择器提问二

选择器提问三

整理了关于选择器的一些问题及答案，想要巩固选择器这当面知识的，可以认真看一下，欢迎提问。答案和问题都以代码的形式展示

1.选择器提问一

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="./index.css" />

  <!-- 需求1:通过ul找到诗句'顿失滔滔',字体变红色 -->
  <style>
    ul .s1 {
      color: red;
    }

    /* <!-- 需求2:通过class属性值‘l1’ 找到下面所有的兄弟，加背景色绿色--> */
    .l1~li {
      background-color: green;
    }

    /* <!-- 需求3:诗句的第一句一直是红色 --> */
    li:first-of-type {
      color: red;
    }

    /* <!-- 需求4:除了l1,所有的诗句字体变大25px --> */
    li:not(.l1),
    p {
      font-size: 25px
    }
  </style>
</head>

<body>
  <h1>沁园春·雪</h1>
  <h3>毛泽东</h3>
  <ul>
    <span>测试</span>
    <li>北国风光，千里冰封，万里雪飘。</li>
    <li>望长城内外，惟余莽莽；大河上下，<span class="s1">顿失滔滔</span></li>
    <p>山舞银蛇，原驰蜡象，欲与天公试比高。</p>
    <p>须晴日，看红装素裹，分外妖娆。</p>
    <li class="l1">江山如此多娇，引无数英雄竞折腰。</li>
    <li>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</li>
    <li>一代天骄，成吉思汗，只识弯弓射大雕。</li>
    <li>俱往矣，数风流人物，还看今朝。</li>
  </ul>
</body>

</html>

2.选择器提问二

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="./index.css" />
  <style>
    /* <!--需求一  标题变红色    用内联样式 */
    /* 在标题处查看 */

    /* 需求二  第一句诗字体30px  用id选择器   用内部样式表 */
    #m {
      font-size: 30px;
    }

    /* 需求三  第二句，第三句诗加背景色绿色  用class选择器    用外部样式表 */
    p.g {
      color: orange;
    }

    /* 需求四  额外给第三句字体变橘色  用复合选择器   */
    [title] {
      color: yellowgreen;
    }

    /* 
      需求五  给含有title属性的诗句加颜色黄绿色， 
              并且给已属性值d结束的诗句变大字体40px */
    [title$=d] {
      font-size: 40px;
    }
  </style>
</head>

<body>

  -->
  <h1 style="color:red ;">沁园春·雪</h1>
  <h3 style="color:red ;">毛泽东</h3>
  <ul>
    <span>测试</span>
    <li id="m">北国风光，千里冰封，万里雪飘。</li>
    <li class="g">望长城内外，惟余莽莽；大河上下，顿失滔滔。</li>
    <p class="g">山舞银蛇，原驰蜡象，欲与天公试比高。</p>
    <p>须晴日，看红装素裹，分外妖娆。</p>
    <li>江山如此多娇，引无数英雄竞折腰。</li>
    <li title="ab">惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</li>
    <li title="abd">一代天骄，成吉思汗，只识弯弓射大雕。</li>
    <li title="bd">俱往矣，数风流人物，还看今朝。</li>
  </ul>
</body>

</html>

外部样式表代码段如下在html中用 <link rel="stylesheet" href="./index.css" />链接

3.选择器提问三

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    /* <!-- 需求一：通过div超市，找到span衣服，给span衣服设置字体颜色，红色 --> */
    div>.s1 {
      color: red;
    }

    /* <!-- 需求二：通过div超市，找到span洗发水，给洗发水设置背景色绿色 --> */
    div .s2 {
      background-color: green;
    }

    /* <!-- 需求三：通过span洗发水，找到纸巾，给纸巾字体放大到30px --> */
    .s2+span {
      font-size: 30px;
    }

    /* <!-- 需求四：通过span洗发水，找到后面所有的兄弟，给他们设置字体颜色橘色--> */
    .s2~span {
      color: orange;
    }

    /* <!-- 需求五：段落的文字第一个字一直是红色 --> */
    p::first-letter {
      color: red;
    }
  </style>
</head>

<body>


  <div>
    超市
    <p>
      日用品区
      <span>牙膏</span>
      <span class="s2">洗发水</span>
      <span>纸巾 </span>
      <span>沐浴露</span>
      <span>护发素</span>
    </p>
    <p>生鲜区</p>
    <span class="s1">衣服</span>
  </div>
  <p>
    dolor, sit amet consectetur adipisicing elit. Laboriosam enim recusandae cumque ad totam aspernatur magni aut iste
    placeat odio? Vel error ut natus voluptas blanditiis, iusto optio repellendus
    sint.
  </p>
</body>

</html>