7.18 Web前端-css特殊选择器

最新推荐文章于 2024-05-09 11:34:16 发布

执笔绘江山

最新推荐文章于 2024-05-09 11:34:16 发布

阅读量254

点赞数 3

文章标签：前端 html html5 css

本文链接：https://blog.csdn.net/qq_45059691/article/details/125858033

版权

大家晚上好，今天继续我们的课程，前面说了常用的选择器，今天来介绍特殊的选择器，特殊选择器的种类比较多，但是都很实用，，话不多说，我们从复合选择器开始说起：

1.复合选择器

有的时候客户的需求中会有到多重的条件，用常用选择器我们也可以完成，但是一个一个列举常用选择器会很麻烦，所以我们引进了符合选择器的概念，而符合选择器我们用两种，分别是交集选择器和并集选择器，有一定数学基础的朋友们也都知道交集和并集的概念，在这里是通用的，所以我只说明一下书写方式：

并集选择器：

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

交集选择器：

语法选择器1，选择器2，选择器3{}

举例：

1.将class属性为red的div字体变成24像素；

2.将h1与h3的字体颜色变为蓝色；

<!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.red {
        font-size: 24px;
      }
      h1,
      h3 {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1>满江红·写怀</h1>
    <h3>岳飞·宋</h3>
    <p class="red">怒发冲冠，凭栏处、潇潇雨歇。</p>
    <div class="red">抬望眼，仰天长啸，壮怀激烈。</div>
    <div>三十功名尘与土，八千里路云和月。</div>
  </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>
    <style>
      /* 需求一：为div的子元素span设置一个字体颜色红色 */
      div > span {
        color: red;
      }
      /* 需求二：div里的span元素字体都变为30px */
      div span {
        font-size: 30px;
      }
      /* 需求三:选择下一个兄弟(仅挨着我的)*/
      p + span {
        color: green;
      }
      /* 需求四：选择下面所有的兄弟(前面的不选)*/
      p ~ span {
        background-color: grey;
      }
    </style>
  </head>
  <body>
    <div>
      我是超市<br />
      <span>我是零食区</span>
      <p>
        我是生鲜区
      </p>
      <span>我是鞋包区</span><br />
      <span>我是洗护区</span>
    <span>我是超市外的小卖部</span>
  </body>
</html>

运行结果如下：

3. 属性选择器：

属性选择器一般用来选择某一条属性的元素，用法也很简单，这里简单说一下它的语法。

语法：

[属性名]{} 选择含有指定属性的元素

[属性名=属性值]{} 选择含有指定属性和属性值的元素

[属性名^=属性值]{} 选择属性值以指定值开头的元素

[属性名$=属性值]{} 选择属性值以指定值结尾的元素

[属性名*=属性值]{} 选择属性值含有某值的元素

举例：p标签title中以a开头的元素变为红色

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

运行结果如下：

今天就先说这么多，如有什么不对的地方请大家及时指出，明天我会将选择器部分说完，设下的就说元素的伪类和伪类选择器，在后面的学习中会经常用到，大家要一起进步，共同学习，谢谢观看。

执笔绘江山

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
7.18 Web前端-css特殊选择器

今天就先说这么多，如有什么不对的地方请大家及时指出，明天我会将选择器部分说完，设下的就说元素的伪类和伪类选择器，在后面的学习中会经常用到，大家要一起进步，共同学习，谢谢观看。属性选择器一般用来选择某一条属性的元素，用法也很简单，这里简单说一下它的语法。[属性名^=属性值]{}选择属性值以指定值开头的元素。[属性名=属性值]{}选择含有指定属性和属性值的元素。[属性名$=属性值]{}选择属性值以指定值结尾的元素。[属性名*=属性值]{}选择属性值含有某值的元素。语法选择器1选择器2选择器3{}...
复制链接

扫一扫