CSS选择器

没时间喽

已于 2023-06-26 10:44:56 修改

阅读量56

点赞数 2

分类专栏： HTML+CSS+JavaScript 文章标签： css html css3

于 2023-06-26 09:28:20 首次发布

本文链接：https://blog.csdn.net/Z15800020057/article/details/131390593

版权

HTML+CSS+JavaScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

选择器基础

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 全局选择器 */
        *{
            margin: 0px;
            padding: 0px;
        }
        /* id选择器 */
        #box {
            height: 200px;
            background-color: rgb(0, 144, 101);
        }
        /* class选择器 类选择器 */
        .a1 {
            height: 20px;
            background-color: rgb(0, 132, 255);
        }
        .a2 {
            height: 20px;
            background-color: rgb(0, 255, 81);
        }
        .a3 {
            height: 20px;
            background-color: rgb(166, 255, 0);
        }
        /* 标签选择器 */
        p {
            color: rgb(62, 249, 255);
        }
        /* 多元素选择器，中间用,隔开 */
        .a1,.a2 {
            height: 30px;
        }
        /* 选中父元素下所有的子元素，包括子元素的子元素 */
        #box div {
            height: 50px;
            background-color: rgb(0,0,255);
        }
        /* 选中父元素下所有的子元素，不包括子元素的子元素 */
        #box>div {
            height: 60px;
            background-color: rgb(255, 153, 0);
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="a1">
            <p></p>
        </div>
        <div class="a1">
            <div class="a3"></div>
        </div>
    </div>
    <div class="a2"></div>
</body>
</html>

基础选择器之兄弟选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 相邻兄弟选择器 以p开头+后面元素开始 */
        p + p{
            font-size: 20px;
            background-color: rgb(255, 0, 0);
        }
        /* 一般兄弟选择器 以p开头+后面元素开始 */
        p ~ p{
            font-size: 20px;
            background-color: rgb(255, 242, 0);
        }
    </style>
</head>
<body>
    <div>
        <p>我是第一个段落</p>
        <p>我是第二个段落</p>
        <a href="#">我是一个a标签</a>
        <p>我是第三个段落</p>
        <p>我是第四个段落</p>
    </div>
</body>
</html>

伪元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 伪类是单冒号 */
        a:link {
            /* 是未访问 */
        }
        a:visited {
            /* 已访问 */
        }
        a:hover {
            /* 停留时 */
        }
        a:active {
            /* 点击时 */
        }
    </style>
</head>
<body>
    <div>
        <a href="https://www.csdn.net/" target="_blank">csdn</a>
        <b>是粗体标签</b>
        <p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
        <p><b>注意：</b> a:active 必须在 a:hover 之后。</p>
    </div>
</body>
</html>

伪对象选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        /* 伪对象是双冒号 */
        /* 选中第一个字母 */
        div::first-letter{
            font-size: 30px;
        }
        /* 第一行 */
        div::first-line{
            font-size: 30px;
            background-color: #00FF00;
        }
        /* 在内容开始添加 */
        p::before{
            content:"我是";
            color:red;
        }
        /* 在内容最后添加 */
        p::after{
            content: "标签";
            color: #0000FF;
        }
        /* 元素被选择时 */
        /* 第一个元素被设置::first-letter将不被::selection影响,
        会保持默认的选择状态 */
        div::selection{
            color: red;
            background-color: yellow;
        }
        
    </style>
</head>
<body>
    <div>
        我是一个div
        <p>一个段落</p>
    </div>
</body>
</html>

属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        a[href="https://www.baidu.com"]{
            color: red;
        }
        /* 以chen开头 */
        [id^="chen"]{
            background-color: #008000;
        }
        
        /* 以guo 结尾 */
        [id$="guo"]{
            background-color: #6CC1EA;
        }
        
        /* 包含就选中 */
        [id*="z"]{
            color: red;
        }
    </style>
</head>
<body>
    
    <a href="https://www.csdn.net">csdn</a>
    <a href="https://www.baidu.com">百度一下</a>
    
    <p id="chenhaonan">尘郝男</p>
    <p id="chenzhen" >尘珍</p>
    <p id="mabaoguo">麻包果</p>
    <p id="zhangliguo">丈果梨</p>
    
</body>
</html>