CSS实战练习与解析-优快云博客

本文链接：https://blog.youkuaiyun.com/SSSS__AS/article/details/125416280

本文主要探讨了CSS在前端开发中的应用，通过一系列实战练习题，深入解析了CSS选择器、布局、响应式设计等核心概念，旨在提升读者的CSS技能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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;}
   </style>
   
    <!-- 需求2:通过class属性值‘l1’ 找到下面所有的兄弟，加背景色绿色-->
    <style>
      .l1~li{background-color: green;}
    </style>
    <!-- 需求3:诗句的第一句一直是红色 -->
    <style>
      li:first-of-type{color: red;}
    </style>
     
    <!-- 需求4:除了l1,所有的诗句字体变大25px -->
<style>
     li:not(.l1),p{font-size: 25px;}
    </style>
    <!-- 选择器的权重问题 -->
 
  <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>

<!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>.s1{color: red;}
      /* 需求二 */
      div .s2{background-color:  green;}
      /* 需求三 */
      .s2+span{font-size: 30px;}
      /* 需求四 */
      .s2~span{color: orange;}
      /* 需求五*/
      p::first-letter {color: red;}
    </style>
  </head>
  <body>
    <!-- 需求一：通过div超市，找到span衣服，给span衣服设置字体颜色，红色 -->
    <!-- 需求二：通过div超市，找到span洗发水，给洗发水设置背景色绿色 -->
    <!-- 需求三：通过span洗发水，找到纸巾，给纸巾字体放大到30px -->
    <!-- 需求四：通过span洗发水，找到后面所有的兄弟，给他们设置字体颜色橘色-->
    <!-- 需求五：段落的文字第一个字一直是红色 -->
    <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>

css练习题