ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

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

2021-12-12 12:00:04  阅读：198  来源： 互联网

标签：color 元素 链接 background 修饰 入坑 选择器 CSS


        又是好几天没更新了，今天我来介绍一下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>

              得到了如下的结果：

背景图片

       background-image是描述背景图片的属性，一般应用于些logo、小型图片还有超大的背景图片，优点是便于控制位置。它的默认值是none，我们可以设置为url()，其中括号里写这个图片的网页链接。

背景平铺

       background-repeat是描述背景平铺的属性，其默认值是repeat，所以会出现平铺的现象。我们一般将属性值设置为no-repeat。当然，也可以设置为repeat-x或者repeat-y，即沿着x轴方向或者y轴方向平铺。

背景位置

       background-position是描述背景位置的属性，可以用具体的数值（数字+单位）描述，也可以用方位词（left、right、center、top、bottom）来进行描述。

背景固定

  

透明度设置

background:rgba(0,0,0,x)

 

      最后一位的x的取值在[0，1]之间，表示透明度，其中0的时候最透明。

以上就是为大家带来CSS的第二次分享的内容，感谢大家的收看，欢迎大家提出意见和建议。

（部分图片和素材来自黑马程序员pink老师的教学视频）

标签：color,元素,链接,background,修饰,入坑,选择器,CSS
来源： https://blog.csdn.net/m0_55354258/article/details/121883288

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有