CSS学习记录4-优快云博客

本文链接：https://blog.youkuaiyun.com/zhaoshengmeyan/article/details/139453716

CSS复合选择器：

交集选择器，并集选择器，后代选择器，子代选择器，兄弟选择器，属性选择器，伪类选择器，伪元素选择器。

交集选择器：

给同时满足条件的标签加样式。

交集有并且的意思。

语法：

选择器1选择器2。。。。。。选择器n{ }

<!DOCTYPE html>
<html lang="zh-CN">
<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.m_nvidia{
            color:gold;
        }
    </style>
</head>
<body>
    <h1 class="m_nvidia">NVIDIA</h1>
    <p>i3-13500</p>
    <p class="m_nvidia">i5-13500</p>
</body>
</html>

大部分情况是类选择器交元素选择器。

并集选择器：

给多个标签加样式。

并集有或的意思。

语法：

选择器1,选择器2, 。。。。。。选择器n{ }

选择器之间用逗号（，）连接。

<!DOCTYPE html>
<html lang="zh-CN">
<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>
        .m_game,
        .m_nvidia,
        h2 {
            color:red;
            font-size: 100px;
        }
    </style>
</head>
<body>
    <h1 class="m_nvidia">NVIDIA</h1>
    <p>i3-13500</p>
    <p class="m_nvidia">i5-13500</p>
    <p class="m_yuansheng">原神</p>
    <p class="m_game">老头环DLC快出了！</p>
    <h2>快没预算了，穷逼大学生</h2>
</body>
</html>

后代选择器：

给指定标签的后代标签加样式。

语法：

选择器1 选择器2 。。。。。。选择器n { }

选择器之间用空格连接。

<!DOCTYPE html>
<html lang="zh-CN">
<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>
        ul li {
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>黑魂</li>
        <li>只狼</li>
        <li>老头环</li>
        <li>血源诅咒</li>
    </ul>
    <ol>
        <li>鬼泣</li>
        <li>怪猎</li>
        <li>生化危机</li>
    </ol>
</body>
</html>

可以与交集并集选择器一起使用。

子代选择器：

给指定标签的子代标签加样式。

语法：
选择器1>选择器2>。。。。。。选择器n { }

选择器之间用大于号（>）连接。

<!DOCTYPE html>
<html lang="zh-CN">

<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>
        div>ul{
            color:aqua;
        }
        div>ol>p{
            color: red;
        }
        ol>.power{
            color: blueviolet;
        }
    </style>
</head>

<body>
    <div>
        <ul>
            <li>黑魂</li>
            <li>只狼</li>
            <li>老头环</li>
            <li>血源诅咒</li>
        </ul>
        <ol>
            <P>卡表</P>
            <li class="power">鬼泣</li>
            <li>怪猎</li>
            <li>生化危机</li>
        </ol>
    </div>
</body>

</html>

可以与交集并集选择器一起使用。

兄弟选择器：

分为两种：相邻兄弟选择器，通用兄弟选择器。

相邻兄弟选择器：给指定标签紧挨其的兄弟标签加样式。

语法：

选择器1+选择器2{ }

<!DOCTYPE html>
<html lang="zh-CN">

<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>
        span+p{
            color: red;
        }
    </style>
</head>

<body>
    <span>购物软件</span>
    <p>淘宝</p>
    <p>京东</p>
    <p>拼多多</p>
    <p>咸鱼</p>
</body>

</html>

通用兄弟选择器：给指定标签的指定兄弟标签加样式。

语法：

选择器1~选择器2{ }

<!DOCTYPE html>
<html lang="zh-CN">

<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>
        span~p{
            color: red;
        }
    </style>
</head>

<body>
    <span>购物软件</span>
    <p>淘宝</p>
    <p>京东</p>
    <p>拼多多</p>
    <p>咸鱼</p>
</body>

</html>

属性选择器：

给含有某个属性的标签加样式。

语法：
[属性名]{ } 给具有指定属性的标签加样式。

[属性名="值"]{ } 给具有指定属性，且属性值为指定值的标签加样式。

[属性名^="值"]{ } 给具有指定属性，且属性值以指定值开头的标签加样式。

[属性名$="值"]{ } 给具有指定属性，且属性值以指定值结尾的标签加样式。

[属性名*="值"]{ } 给具有指定属性，且属性值包含指定值的标签加样式。

<!DOCTYPE html>
<html lang="zh-CN">

<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>
        /*选中属性为title的标签*/
        [title] {
            color: red;
        }
        /*选中属性为title,且属性值为2test02的标签*/
        [title="2test02"] {
            color: blue;
        }
        /*选中属性为title,且属性值以3开头的标签*/
        [title^="3"] {
            color: black;
        }
        /*选中属性为title,且属性值以4结尾的标签*/
        [title$="4"] {
            color: chartreuse;
        }
        /*选中属性为title,且属性值含有5的标签*/
        [title*="5"] {
            color: gold;
        }
    </style>
</head>

<body>
    <p title="1test01">原神</p>
    <p title="2test02">崩铁</p>
    <p title="3test03">崩坏</p>
    <p title="4test04">鸣潮</p>
    <p title="5test05">fgo</p>
</body>

</html>

伪类选择器和伪元素选择器因为篇幅问题，下一篇记。