CSS基础(一)CSS常用选择器

最新推荐文章于 2024-09-30 23:36:44 发布

今天自洽了吗

最新推荐文章于 2024-09-30 23:36:44 发布

阅读量86

点赞数

分类专栏： CSS 文章标签： html5 css3 前端

本文链接：https://blog.csdn.net/hold_on_qlc/article/details/128377894

版权

CSS 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

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>
    <style>
        h1{
            color: red;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <h1>hello world</h1>
</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>
        .test{
            color:red;
        }
    </style>
</head>
<body>
    <!-- 给h1标签设置一个类名为test -->
    <h1 class="test">hello world</h1>
</body>
</html>

id选择器

通过id名选中需要设置样式的元素

语法：

井号+id名{ }

示例代码

<!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>ID选择器</title>
    <style>
        #test{
            color: red;
        }
        /* 类选择器和ID选择器区别：
        多个标签可以用同一个类名 */
    </style>
</head>
<body>
    <h1 id="test">hello world</h1>
</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>Document</title>
    <style>
        /* 通配符选择器：找到所有元素 */
        *{
            color: red;
        }
    </style>
</head>
<body>
    <h1>hello world</h1>
    <p>hello p</p>
    <a href="">hello a</a>
</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>
        .box1 h1{
            color: red;
        }
    </style>
</head>
<body>
    <div class="box1">
        <h1>hello world</h1>
        <h2>hello world</h2>
    </div>
    <div class="box2">
        <h1>hello world</h1>
    </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>组合选择器</title>
    <style>
        .box1 h1,.box1 h2{
            color: red;
        }
    </style>
</head>
<body>
    <div class="box1">
        <h1>hello h1</h1>
        <h2>hello h2</h2>
    </div>
    <div class="box2">
        <h1>hello world</h1>
    </div>
</body>
</html>

伪类选择器

语法：

选择器：hover{ }

示例代码

<!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>
        /* 用处：当鼠标悬停到按钮上，显示其他颜色 */
        .btn:hover{
            background-color:grey;
        }
    </style>
</head>
<body>
    <input class="btn" type="button" value="按钮">
</body>
</html>

伪元素选择器

可以在元素内容的前面/后面增加内容

语法：

选择器::before{ }
选择器::after{ }

示例代码

<!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>
        h1::before{
            /* 文本内容 */
            content: "123";
        }
        h1::after{
            content: "456";
        }
        /* CSS2:伪类选择器和伪元素选择器都是一个冒号
        CSS3:让伪元素选择器增加了一个冒号 */
        /* 浏览器对CSS2和CSS3兼容 */
        .line::before,.line::after{
            content:"----";
            color: greenyellow;
        }

    </style>
</head>
<body>
    <h1>hello world</h1>
    <h2 class="line">hello world</h2>
    <h3 class="line">hello world</h3>
    <p class="line">这是一个段落。</p>
</body>
</html>