CSS选择器2

苦中苦。

已于 2022-10-09 19:44:16 修改

阅读量792

点赞数

文章标签：前端 html css 学习

于 2022-10-09 19:27:12 首次发布

本文链接：https://blog.csdn.net/Antoine__/article/details/127231707

版权

一、复合选择器

二、关系选择器

三、属性选择器

http://t.csdn.cn/EY5xE（入门学习1）

http://t.csdn.cn/zpRi9 （入门学习2）

http://t.csdn.cn/PNvdB（入门学习3）

http://t.csdn.cn/hddFu （CSS选择器1）

前面学习文章的链接我给大家放在这里哦，大家可以巩固学习

前面我们学习了几个常用的选择器，今天我们一起接着学习

一、复合选择器

复合选择器有两种：

1、交集选择器

作用：选中同时满足多个条件的元素

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

注意：如果选择器中有元素选择器，那么元素选择器必须放在第一位

2、并集选择器

作用：同时选中满足条件的元素

语法：选择器1,选择器2,选择器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>
     /* 需求一：将class为red的诗句变为红色，同时将class为red的div字体变为24px */
      div.red{
        font-size: 34px;
        color: red;
      }
    /* 需求二：将h1,h3字体颜色变为黄色*/
      h1,h3{
        color: yellowgreen;
      }
    </style>
  </head>
  <body>
    <h1>满江红·写怀</h1>
    <h3>岳飞·宋</h3>
    <p class="red">怒发冲冠，凭栏处、潇潇雨歇。</p>
    <div class="red">抬望眼，仰天长啸，壮怀激烈。</div>
    <div>三十功名尘与土，八千里路云和月。</div>
    <p>莫等闲，白了少年头，空悲切！</p>
    <p>靖康耻，犹未雪。臣子恨，何时灭！</p>
    <p>驾长车，踏破贺兰山缺。</p>
    <p>壮志饥餐胡虏肉，笑谈渴饮匈奴血。</p>
    <p>待从头、收拾旧山河，朝天阙。</p>
  </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的子元素p设置一个字体颜色红色 */
      /* 1、子元素选择器
      作用：选中指定的父元素下面指定的子元素
      语法：父元素>子元素{}
      例如：div>p,.big>p,#big>p{}
      */
      #big > p {
        color: red;
      }
      /* 需求二：大超市div里的span元素字体都变为30px */
      /* 2、后代选择器
      作用：选中指定祖先元素下面指定的后代元素
      语法：祖先元素 后代元素{}
      例如：#big span{}
      */
      #big span {
        font-size: 30px;
      }
      /* 需求三:选择下一个兄弟(仅挨着我的)，选中生鲜区下面兄弟衣帽区，加个背景色*/
      /* 3、 选择下一个兄弟(仅挨着我的)选择器
      作用：选择下一个兄弟
      语法：兄+弟{}
      */
      .sx + div {
        background-color: green;
      }
      /* 需求四:选择下面所有的兄弟(前面的不选)
      通过衣帽区选中，零食区、酒水区
      */
      /* 4、选择下面所有的兄弟(前面的不选)
      语法：兄～弟{}
      */
      .ym~p{
        background-color: hotpink;
      }
    </style>
  </head>
  <body>
    <div id="big">
      大超市
      <p class="sx">生鲜区</p>
      <div class="ym">
        衣帽区
        <span>上衣
          <em>男上衣</em>
          <em>女上衣</em>
        </span>
        <span>裤子</span>
        <span>帽子</span>
      </div>
      <p>零食区</p>
      <p>酒水区</p>
    </div>
    <div>
      <p>烟酒区</p>
      <p>饮料</p>
      小超市
    </div>
  </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>属性选择器</title>
    <style>
      /* 需求一：有title属性的p标签，颜色变为红色 */
      /* 1:属性选择器
            语法：[属性名]{} 选择含有指定属性的元素
                 [属性名=属性值]{} 选择含有指定属性和属性值的元素
                 [属性名^=属性值]{} 选择属性值以指定值开头的元素  
                 [属性名$=属性值]{} 选择属性值以指定值结尾的元素
                 [属性名*=属性值]{} 选择属性值含有某值的元素
    */
    /* [title]{
      color: red;
    } */
    /* [class=ab]{
      color: red;
    } */
    /* [title^=a]{
      color: red;
    } */
    /* [title$=ab]{
      color: red;
    } */

    [title*=abc]{
      color: red;
    }
    </style>
  </head>
  <body>
    <h1 title="a" id="abcd" class="ab" >满江红·写怀</h1>
    <h3 title="ab">岳飞·宋</h3>
    <p>····</p>
    <p title="abc" class="abc">靖康耻，犹未雪。臣子恨，何时灭！</p>
    <p title="abcdab">驾长车，踏破贺兰山缺。</p>
    <p>壮志饥餐胡虏肉，笑谈渴饮匈奴血。</p>
    <p>待从头、收拾旧山河，朝天阙。</p>
  </body>
</html>

上述代码中，大家可以把我注释的代码注释一个一个去掉，看一看效果，都与上面所说的语法一一对应

运行结果展示：

四、伪类选择器

一、伪类（不存在的类，特殊的类）

伪类用来描述一个元素的特殊状态

比如：第一个元素，被点击的元素，鼠标移入的元素···

特点：一般请情况下，使用：开头

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()

功能跟上面相似，不同的是，这是在同类型的子元素中去选择

二、:not() 否定伪类

将符合条件的元素从选择器中去除

源码展示：

<!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>
      /* 需求一：将ul里的第一个li自动一直设置为红色 */
      
           /* ul>li:first-child{
             color: red;
           } */
           /* ul>li:last-child{
             color: red;
           } */
           /* ul>li:nth-child(n){
             color: red;
           } */
           /* ul>li:nth-child(2n){
             color: red;
           } */
           /* ul>li:nth-child(2n+1){
             color: red;
           } */

           /* li:first-of-type{
             color: red;
           } */
           /* li:last-of-type{
             color: red;
           } */
           /* li:nth-of-type(n){
             color: red;
           } */
           /* li:nth-of-type(2n){
             color: red;
           } */
           /* li:nth-of-type(2n+1){
             color: red;
           } */

           li:not(.l1){
             color: red;
           }

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

同样的，大家讲我的注释代码去掉注释，挨个试一试效果

运行结果展示：（这部分结果挨个截图太多了，大家看着也不舒服，可以把上面源码copy下来，自己挨个试一下，帮助理解，这里我只截最后一个 not（）否定伪类结果）