CSS复合选择器

最新推荐文章于 2022-08-26 09:58:00 发布

小雪Margain

最新推荐文章于 2022-08-26 09:58:00 发布

阅读量128

点赞数

分类专栏：学习文章标签：复合选择器

本文链接：https://blog.csdn.net/qq_42862581/article/details/97765877

版权

学习专栏收录该内容

24 篇文章 0 订阅

订阅专栏

复合选择器是由两个或多个基础选择器，

1、交集选择器

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，

h3.class{属性1:属性值1;属性2:属性值2;}

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复合选择器</title>
    <style>
      .singer{
        color: darkcyan;
      }
      div.singer{
        font-size: 28px;
        font-weight: 700;
      }
    </style>
</head>
<body>
  <div class="singer">刘德华</div>
  <div class="singer">张学友</div>
  <p class="singer">张杰</p>
  <p class="singer">汪峰</p>
</body>
</html>

预览
在这里插入图片描述

2、并集选择器

并集选择器是各个选择器通过逗号连接而成,所有选择器都可以
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>并集选择器</title>
    <style>
      p,div,h1{
        color: red;
      }
    </style>
</head>
<body>
  <p>苹果</p>
  <p>火龙果</p>
  <div>娃娃菜</div>
  <div>西红柿</div>
  <h1>米饭</h1>
  <h1>馒头</h1>
</body>
</html>

预览
在这里插入图片描述

3、后代选择器

后代选择器又称包含选择器，中间用空格隔开，当标签发生嵌套时，内层标签就成为外层标签的后代。
例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .nav ul li{
        color: red;
        font-size: 24px;
      }
    </style>
</head>
<body>
  <div class="nav">
    <ul>
      <li>首页</li>
      <li>资讯</li>
      <li>娱乐</li>
    </ul>
  </div>
  <div>
    <ul>
      <li>首页</li>
      <li>资讯</li>
      <li>娱乐</li>
    </ul>
  </div>
</body>
</html>

预览在这里插入图片描述

4、子元素选择器

子元素选择器只能选择作为某元素子元素的元素，写法是把父级标签写在前面，子级标签写在后面，中间跟一个>进行连接，大于号左右用空格隔开
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子选择器</title>
    <style>

      .item li{ /*后代选择器*/
        color: #0ff;
      }
      .item > li{/*子元素选择器*/
        color: red;
      }
    </style>
</head>
<body>
   <ul class="item">
     <li>一级菜单
        <ul>
         <li>二级菜单1</li>
         <li>二级菜单2</li>
        </ul>
     </li>
     <li>一级菜单
       <ul>
         <li>二级菜单1</li>
         <li>二级菜单2</li>
       </ul>
     </li>
     <li>一级菜单
       <ul>
         <li>二级菜单1</li>
         <li>二级菜单2</li>
       </ul>
     </li>
   </ul>
</body>
</html>

预览
在这里插入图片描述

小雪Margain

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS复合选择器

复合选择器是由两个或多个基础选择器，1、交集选择器交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，h3.class{属性1:属性值1;属性2:属性值2;}例如：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"...
复制链接

扫一扫

专栏目录