前端入坑第六弹——CSS的复合选择器和背景设置

最新推荐文章于 2024-06-02 15:09:49 发布

这辈子不飞线

最新推荐文章于 2024-06-02 15:09:49 发布

阅读量402

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_55354258/article/details/121883288

版权

又是好几天没更新了，今天我来介绍一下CSS里面的复合选择器以及网页中的背景设置。

复合选择器

比起一般的基础选择器，复合选择器能够更准确、更高效地定位网页元素。

后代选择器

后代选择器可以对于父元素里面的子元素进行选择，不只是子元素，还可以是子元素的子元素。例如下面：

<!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>
</head>
<body>
    <ul>
        <li>小猪佩奇</li>
        <li>小羊肖恩</li>
        <li>小马宝莉</li>
    </ul>
    <ol>
        <li>王者荣耀</li>
        <li>英雄联盟</li>
        <li>魂斗罗</li>
    </ol>
</body>
</html>

这段代码包含了一个有序列表和一个无序列表，比如我们想要对于其中的某一项进行个性化修饰，利用基础选择器是有些麻烦的，更好的方法就是利用复合选择器，在这里我将使用后代选择器。它的格式是

元素1 元素2{
      修饰内容
}

其中元素1是父元素，元素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>后代选择器</title>
    <style>
        ul li{
            color: yellow;
            font-size: large;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <ul>
        <li>小猪佩奇</li>
        <li>小羊肖恩</li>
        <li>小马宝莉</li>
    </ul>
    <ol>
        <li>王者荣耀</li>
        <li>英雄联盟</li>
        <li>魂斗罗</li>
    </ol>
</body>
</html>

可以得到如下的效果：

再举一个修饰子元素的子元素的例子：

<!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>
        ul li{
            color: yellow;
            font-size: large;
            text-decoration: underline;
        }
        ul li a{
            color: purple;
            font-size: x-large;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <ul>
        <li>小猪佩奇</li>
        <li>小羊肖恩</li>
        <li>小马宝莉</li>
        <li><a href="#">想了解更多请戳这里</a></li>
    </ul>
    <ol>
        <li>王者荣耀</li>
        <li>英雄联盟</li>
        <li>魂斗罗</li>
    </ol>
</body>
</html>

在这里，在一个li标签里加上了一个链接的子元素，同时在style标签内部加上了相应的修饰内容。

子元素选择器

子元素选择器与后代选择器不同的是，子元素选择器只能对于子元素修饰，对于子元素的子元素不能修饰。

将刚才的元素1和元素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>后代选择器</title>
    <style>
        ul>li{
            color: yellow;
            font-size: large;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <ul>
        <li>小猪佩奇</li>
        <li>小羊肖恩</li>
        <li>小马宝莉</li>
        <li><a href="#">想了解更多请戳这里</a></li>
    </ul>
    <ol>
        <li>王者荣耀</li>
        <li>英雄联盟</li>
        <li>魂斗罗</li>
    </ol>
</body>
</html>

这时候链接作为子元素的子元素，就不能被修饰。

并集选择器

有时候我们想要对于很多不同标签进行相同的修饰，就可以使用并集选择器，语法如下：

元素1，
元素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>并集选择器</title>
    <style>
        ul,
        ol{
            color: yellow;
            font-size: large;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <ul>
        <li>小猪佩奇</li>
        <li>小羊肖恩</li>
        <li>小马宝莉</li>
        <li><a href="#">想了解更多请戳这里</a></li>
    </ul>
    <ol>
        <li>王者荣耀</li>
        <li>英雄联盟</li>
        <li>魂斗罗</li>
    </ol>
</body>
</html>

可以得到如下的效果：

伪类选择器

链接伪类选择器

我们可以对于链接进行一些如下设置:

例如：

<!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>
        a:link {
            color: purple;
        }
        a:visited {
            color:red;
        }
        a:hover {
            color: blue;
        }
        a:active {
            color: green;
        }
    </style>
</head>
<body>
    <a href="http://www.bilibili.com" target="_blank">哔哩哔哩</a>
</body>
</html>

也就是说，当我们点击这个链接之前，链接应该是紫色；访问之后这个链接就变成了红色；当指针到链接上的时候链接或变为蓝色；点击链接的瞬间链接会变为绿色。

这是目前还没有点击过的链接。

点击以后变为了红色。

如果鼠标放在链接上就会变为蓝色。

focus伪类选择器

这一类选择器是对于input而言的，我们利用这种选择器可以对input进行修饰。

<!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>focus伪类选择器</title>
    <style>
        input:focus {
            background-color:pink;
            color: red;
        }
    </style>
</head>
<body>
    <input type="text">
</body>
</html>

可以得到如下的效果：

元素显示模式

元素显示模式可以分为块元素、行内元素、行内块元素。

在一定情况下，我们需要对于元素的性质进行一些修改，此时可以在选择器里加上一句display,如

display:block
display:inline
display:inline-block

就可以进行相应的修改。

网页背景设置

背景颜色

在选择器中用background-color设置，background-color的默认参数是transparent，我们可以设置为其它颜色。

<!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>
        div {
            height: 1080px;
            width: 1920px;
            background-color: darkorange;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

得到了如下的结果：