CSS复合选择器

最新推荐文章于 2024-07-24 15:15:31 发布

陈开心i

最新推荐文章于 2024-07-24 15:15:31 发布

阅读量214

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/CCT912097957/article/details/105273990

版权

**~~复合选择器~~ **是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。

交集选择器

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交集选择器 </title>
    <style>
        /* 交集选择器用法是标签名+类名 使用较少 特殊情况使用 */
        /* div.bule 的意思是只指定div标签下的类名叫 blue 的内容 所以p标签类名虽然相同但是不起作用 */
        div.blue{
            color: blue;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div>你不许给我变颜色</div>
    <div class="blue">
        <p>你给我变个颜色试试</p>
    </div>
    <p class="blue">我赌你不能给我变颜色</p>
</body>
</html>

在这里插入图片描述

并集选择器

并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>并集选择器</title>
    <!-- 并集选择器目的是集体声明，减少重复写类名，写法 所有标签名用逗号隔开，可以理解为 我们都需要这个样式，这个选择器使用较多，多使用在样式初始化(清除默认样式) -->
    <!-- 需求：使 div span 标签变成红色，h1 p 变成蓝色 -->
    <style>
        div,span {
            color: blue;
        }
        h1,p {
            color: red;
        }
    </style>
</head>
<body>
    <div>我想变成红色</div>
    <span>我也想变成红色</span>
    <h1>我要变蓝色</h1>
    <p>我也想</p>
</body>
</html>

在这里插入图片描述

后代选择器

后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后代选择器</title>
    <style>
        /* 标签选择器会选取全局div */
        div {
            color: violet;
            font-size: 16px;
        }
        /* 后代选择器能定义子类属性 在基本的标签选择器后面加上空格在加上子标签*/
        div p {
            color: yellowgreen;
        }
        /* 但会有另一种情况，例如ul和ol下面会出现相同的li标签可以用另一种选择方式 父级标签类选择器class定义， 选择器类名+子标签 */
        .fh li {
            color: blue;
        }
    </style>
</head>
<body>
    <div>大话西游</div>
    <div>王者荣耀</div>
    <div>
        <p>我是后代选择器</p>
    </div>
    <ul>
        <li>水果</li>
    </ul>
    <ol class="fh">
        <li>苹果</li>
    </ol>
</body>
</html>

在这里插入图片描述

子元素选择器

子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。
子指的是亲儿子不包含孙子重孙子之类。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子代选择器</title>
    <style>
        /* 要求：一级菜单红色 二级菜单蓝色并且没有下划线 */
        ul > li > a {
            /* 子代选择器可以选择该标签下唯一的亲儿子标签，而以下的其他嵌套标签内的相同标签不受影响 */
            color: red;
            font-size: 30px;
        }
        ul > li > div > a {
            color: blue;
            text-decoration: none;
        }
    </style>
</head>
<body>
      <ul>
          <li>
              <a href="#">一级菜单</a>
          </li>
          <li>
            <div>
                <a href="#">二级菜单</a>
                <a href="#">二级菜单</a>
                <a href="#">二级菜单</a>
            </div>
          </li>
      </ul>
</body>
</html>

在这里插入图片描述

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类链接</title>
    <style>
        /* 未访问过的链接 */
        a:link {
            font-size: 30px;
            text-decoration: none;
            color: #3c3c3c;
            font-weight: 700;
        }
        /* 访问过的链接 */
        a:visited {
            color: #3c3c3c;
        }
        /* 鼠标移动上去的链接 */
        a:hover {
            color: red;
        }
        /* 鼠标选定下的链接 */
        a:active {
            color: seagreen;
        }
    </style>
</head>
<body>
    <a href="#">我是链接</a>
</body>
</html>