css中级选择器

最新推荐文章于 2024-04-07 14:36:52 发布

SSS4362

最新推荐文章于 2024-04-07 14:36:52 发布

阅读量552

点赞数 3

分类专栏： java web基础知识文章标签： css 前端 html

本文链接：https://blog.csdn.net/SSS4362/article/details/125438216

版权

java web基础知识专栏收录该内容

18 篇文章 0 订阅

订阅专栏

css中级选择器

1.1 派生选择器(子类选择器)

a.语法

选择器a 选择器b{
    样式名1:样式值1;
    样式名2:样式值2;
    ..........
}
/*
寻找的范围是选择器a里面的所有标签，无论是儿子还是孙子,只要标签名与选择器b能匹配的上,那么就会对它进行更改样式
*/

b.不加派生选择器的效果

在这里插入图片描述

c.加派生选择器的效果

在这里插入图片描述

d.源码

<!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 type="text/css">
        div span{
            color: orange;
        }
    </style>
</head>
<body>
    <div id="box">
        <span>早安</span>
        <div>
            <span>各位</span>
        </div>
      </div>
      <span>祝你好运</span>
</body>
</html>

2.2 直接子类选择器

a.语法

选择器a > 选择器b{
  样式名1:样式值1;
  样式名2:样式值2;
  ..........
}
/*
其中选择的是a里面的所有儿子(第一层)与b去进行比较,若符合就进行相应的css操作
*/

b.不加直接选择器的效果

在这里插入图片描述

c.加直接选择器的效果

在这里插入图片描述

d.源码

<!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 type="text/css">
        div > span{
            color: orangered;
        }
    </style>
</head>
<body>
    <div id="box">
        <span>早安</span>
        <div>
            <p>
                <span>各位</span>
            </p>        
        </div>
        <p>每个人都是一个潜力股</p>
        <span>Good luck</span>
        <p>我们的是最棒的</p>
        <p>我们的是最牛的</p>
      </div>
      <span>祝你好运</span>    
</body>
</html>

2.3 分组选择器

a.语法

/*
  使用场景:不同标签具有相同样式的去使用
*/
选择器a,选择器b{
    样式名1:样式值1;
    样式名2:样式值2;
}
/*
会找到选择器a,选择器b所对应的所有标签,一起给它们设置样式值
*/

b.不加分组选择器的效果

在这里插入图片描述

c.加分组选择器的效果

在这里插入图片描述

d.源码

<!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 type="text/css">
        span,p{
            color: orangered;
        }
    </style>
</head>
<body>
    <div id="box">
        <span>早安</span>
        <div>
            <span>各位</span>
        </div>
        <span>Good luck</span>
        <p>我们的是最棒的</p>
      </div>
      <span>祝你好运</span>
</body>
</html>

2.4 兄弟选择器

a.语法

选择器a+选择器b{
    样式名1:样式值1;
    样式名2:样式值2;
}
/*
  直会选择选择器a所找到的所有标签的临近(右边)的第一个元素(有且只有一个)
*/

b.不加兄弟选择器的效果

在这里插入图片描述

c.加兄弟选择器的效果

在这里插入图片描述

d.源码

<!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 type="text/css">
        span+p{
            color: orangered;
        }
    </style>
</head>
<body>
    <div id="box">
        <span>早安</span>
        <div>
            <span>各位</span>
        </div>
        <p>每个人都是一个潜力股</p>
        <span>Good luck</span>
        <p>我们的是最棒的</p>
        <p>我们的是最牛的</p>
      </div>
      <span>祝你好运</span>    
</body>
</html>