Web前端----CSS进阶-选择器

最新推荐文章于 2024-10-17 09:40:47 发布

坚持与努力的星星

最新推荐文章于 2024-10-17 09:40:47 发布

阅读量253

点赞数 1

文章标签：前端学习 html css

本文链接：https://blog.csdn.net/m0_70612148/article/details/126215722

版权

此文章是对CSS进行的一些基础的学习。

前言

随着计算机的不断发展，Web前端这门技术也越来越重要，很多人都开启了前端的学习，本篇文章就是简单的写了一下CSS的语法，用来对CSS进行基础的学习。

一、CSS是什么？

CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

二、选择器

1.1选择器-后代

代码示例如下：

<!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>Document</title>
    <style>
        /* 找到div的儿子设置为你的颜色是红色 */
        /* 父选择器  后代选择器{} */
        div p {
            color:red;
        }
    </style>
</head>
<body>
    <!-- 后代:儿子，孙子，重孙子 ...-->
    <p>这是一个p标签</p>
    <div>
        <p>这是div的儿子</p>
    </div>
</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>Document</title>
    <style>
        /* 这个空格隔开的是后代，儿子，孙子，重孙子 */
        /* div a {
            color:red;
        } */

        /* 只想选中儿子 */
        /* div的儿子a文字颜色是红色 */
        div>p>a {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        父级
        <a href="#">这是div里面的a</a>
        <p>
            <a href="#">这是div里面的p里面的a</a>
        </p>
    </div>
</body>
</html>

代码运行结果如下：

1.3 选择器-并集

代码示例如下：

<!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>Document</title>
    <style>
        /* p div span h1文字颜色是红色 */
        /* 选择器1，选择器2{} */
        p,
        div,
        h1,
        span {
            color: red;
        }
    </style>
</head>
<body>
    <p>ppp</p>
    <div>div</div>    
    <span>span</span>
    <h1>h1</h1>
    
    <h2>h2</h2>
</body>
</html>

代码运行结果如下：

1.4 选择器-交集

代码示例如下：

<!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>Document</title>
    <style>
        /* p {
            color:red;
        } */
        /* .box {
            color: red;
        } */
        /* 必须是p标签，而且添加了box类 */
        p.box {
            color:red;
        }
    </style>
</head>
<body>
    <!-- 找到第一个p，带box类的，设置文字颜色是红色 -->
    <p class="box">这是p标签</p>
    <p>ppppppp</p>
    <div class="box">这是div标签:box</div>

</body>
</html>

代码运行结果如下：

1.5 选择器-伪类

代码示例如下：

<!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>Document</title>
    <style>
        /* 悬停的时候文字颜色是红色 */
        a:hover {
            color: red;
            background-color: green;
        }
        /* 用户鼠标悬停到div的时候，文字是绿色 */
        div:hover {
            color:green;
        }
    </style>
</head>
<body>
    <a href="#">这是一个超链接</a>
    <!-- 任何一个标签都可以添加伪类，任何一个标签都可以用鼠标悬停 -->
    <div>div</div>
</body>
</html>

代码运行结果如下：