7.18 Web前端-css特殊选择器

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

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
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

执笔绘江山

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值