web前端小白第三天学习体会和感受

最新推荐文章于 2023-04-20 16:27:30 发布

呵呵＆

最新推荐文章于 2023-04-20 16:27:30 发布

阅读量144

点赞数 1

文章标签：前端 java html

本文链接：https://blog.csdn.net/m0_72174649/article/details/125414876

版权

今天学的东西比昨天还要多，真的头都要大了，也够我消化一阵的了。现在也还只是个开始，到后面可能要学的东西会变得越来越多，让人压力山大啊！

简单分享今天所学的东西：

复合选择器

1、交集选择器

作用：选中符合多个选择器条件的内容

语法：选择器1选择器2选择器3···{}

例如：div.red{},#div2.red{}

注意：如果选择器中有元素选择器，必须把元素选择器放在前面

2、并集选择器

作用：同时选中符合多个选择器对应的内容

语法：选择器1,选择器2,选择器3····{}

例如：.red,#p2,h1{}

   /*知识点1:去掉项目符号*/

      /* 一 、伪类（不存在的类，特殊的类）
          -伪类用来描述一个元素的特殊状态
          -比如：第一个元素，被点击的元素，鼠标移入的元素···

          -特点：一般请情况下，使用：开头
             1、 :first-child  第一个子元素
             2、 :last-child   最后一个子元素
             3、 :nth-child()  选中第n个子元素
                   特殊值： n    所有的
                          2n或even  选中偶数
                          2n+1或odd  选中奇数
          —以上这些伪类都是根据所有的子元素进行排序

             1、:first-of-type   第一个子元素
             2、:last-of-type     最后一个子元素
             3、:nth-of-type()    选中第n个子元素
                  功能跟上面相似，
              不同的是，这是在同类型的子元素中去选择           
               */
      /* 二、:not() 否定伪类
           -将符合条件的元素从选择器中去除 
     */

      /* 需求一：将ul里的第一个li一直设置为红色 */
      li:not(.l1v){
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>沁园春·雪</h1>
    <h3>毛泽东</h3>
    <ul>
      <span>测试</span>
      <li class="l1">望长城内外，惟余莽莽；大河上下，顿失滔滔。</li>
      <li>北国风光，千里冰封，万里雪飘。</li>
      <li>山舞银蛇，原驰蜡象，欲与天公试比高。</li>
      <li>须晴日，看红装素裹，分外妖娆。</li>
      <li>江山如此多娇，引无数英雄竞折腰。</li>
      <li>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</li>
      <li>一代天骄，成吉思汗，只识弯弓射大雕。</li>
    </ul>
  </body>
</html>

加油，就是干