page contents

CSS标签选择器的介绍

CSS的标签选择器的介绍：标签选择器、id选择器，类选择器，通用选择器

attachments-2021-09-cLSy4Bhk6146cac21f8d4.jpg

CSS的标签选择器的介绍

  • 引入css的方式
  1. 在css的<head>内定义一个<style>标签 p{color: red;}
  2. 在css的<body>内的<p style ="color: red">
  3. 在css的<head>内定义一个<link rel="stylesheet" href="mycss.css">标签，其中mycss是引入的css文件
  • 基本选择器
  1. 标签选择器、id选择器，类选择器，通用选择器
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*标签选择器 所有span标签的颜色都是红色*/
            span {color: orange}
            /*ID 选择器*/
            #s1 {font-size :36px}
            /*类选择器*/
            .c1 {color: blue}
            /* 通用选择器*/
            * {color : deeppink}
        </style>
     
    </head>
    <body>
    <span id ="s1">span</span>
    <div class="c1">div
        <p>p
            <span>span</span>
        </p>
    </div>
    <div class ="c1">div</div>
    </body>
    </html>

    　　

  • 组合选择器
  1. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*后代选择器*/
            div span{color:blue}
            /*儿子选择器*/
            div>span {color:red}
            /*毗邻选择器*/
            div+span {color:blue}
            /*弟弟选择器*/
            div~span {color:deeppink}
        </style>
    </head>
    <body>
    <span>我是div上面的span</span>
    <div>
        <span>我是div里面的第一个span</span>
        <p>我是div里面的第一个p
            <span>我是div里面第一个p里面的第一个span</span>
        </p>
        <span>我是div里面的第二个span</span>
    </div>
    <span>我是div下面的第一个span</span>
    <span>我是div下面的第二个span</span>
     
    </body>
    </html>

    　　

  • 属性选择器
  1. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            [xxx] {color:red}
            [xxx ='1'] {color:blue}
            [xxx ='2']{color:forestgreen}
            p[xxx='2']{color:pink}
        </style>
    </head>
    <body>
    <span xxx="2">span</span>
    <p xxx>我只有属性名</p>
    <p xxx ='1'>我有属性名和属性值并且值为1</p>
    <p xxx ="2">我有属性名和属性值并且值为2</p>
    </body>
    </html>
    分组与嵌套
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*div ,p,span {color:red}*/
            div p span {color:blue}
     
        </style>
    </head>
    <body>
    <div>div
    <p>p
    <span>span</span></p></div>
    <p>p</p>
    <span>span</span>
    </body>
    </html>

    　　

  • 伪类选择器
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    伪类选择器
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            a:link {
                color :red;
            }
            a:hover {
                color:blue;
            }
            a:active{
                color:yellow;
            }
            a:visited{
                color:green;
            }
            input:focus{
                background-color: red;
            }
        </style>
    </head>
    <body>
    <a href="http://www.souhu.com">搜狐</a>
    <a href="http://www.xiaohuar.com">校花</a>
    <a href="https://www.sogo.com">搜狗</a>
    <input type="text">
    </body>
    </html>

    　　

  • 伪元素选择器
  1. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    !DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            p:first-letter{
                color: red;
                font-size: 48px;
            }
            p:before {
                content:'*';
                color:red;
            }
            p:after{
                content: "?";
                color:deeppink;
                font-size: 48px;
            }
        </style>
    </head>
    <body>
    <p>继承是css的一个主要特征，他是一个依赖祖先-后代的关系的</p>
    <p>继承是css的一个主要特征，他是一个依赖祖先-后代的关系的</p>
    <p>继承是css的一个主要特征，他是一个依赖祖先-后代的关系的</p>
    <p>继承是css的一个主要特征，他是一个依赖祖先-后代的关系的</p>
     
    </body>
    </html>

    　　

  • 选择器优先级
  1. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*#p1 {color :blue;}*/
            .c1 {color:red;}
            /*p {color:blue}*/
        </style>
        <link rel="stylesheet" href="mycss.css">
    </head>
    <body>
    <p id="p1" class="c1">p</p>
    </body>
    </html>
    选择器优先级
    选择器相同的情况下,就近原则
    行内样式>id选择器>类选择器>元素选择器


更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

程序员编程交流QQ群：805358732

如果你想用Python开辟副业赚钱，但不熟悉爬虫与反爬虫技术，没有接单途径，也缺乏兼职经验
关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。

attachments-2022-06-x8El2s3w62afe9ee37851.jpeg

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
轩辕小不懂
轩辕小不懂

2403 篇文章

作家榜 »

  1. 轩辕小不懂 2403 文章
  2. 小柒 1470 文章
  3. Pack 1135 文章
  4. Nen 576 文章
  5. 王昭君 209 文章
  6. 文双 71 文章
  7. 小威 64 文章
  8. Cara 36 文章

轩辕小不懂

如果觉得我的文章对您有用，请随意打赏。你的支持将鼓励我继续创作！