• CSS常见选择器


    CSS常见选择器

    Web开发中,层叠样式表(CSS)是用于描述HTML或XML(包括SVG和XHTML等其他XML语言)文档的样式的语言。CSS描述了文档的表现形式,包括布局、颜色和字体等。在CSS中,选择器是一种模式,用于选择需要添加样式的元素。以下是一些常见的CSS选择器。

    1. 元素选择器

    元素选择器是最基本的选择器,它匹配HTML元素的类型名称。例如,p选择器将匹配所有的

    元素。

    p {
        color: red;
    }
    
    • 1
    • 2
    • 3

    2. 类选择器

    类选择器匹配HTML元素的类属性。类选择器以.开始。例如,.myClass选择器将匹配所有类名为myClass的元素。

    .myClass {
        color: blue;
    }
    
    • 1
    • 2
    • 3

    3. ID选择器

    ID选择器匹配HTML元素的ID属性。ID选择器以#开始。例如,#myID选择器将匹配所有ID为myID的元素。

    #myID {
        color: green;
    }
    
    • 1
    • 2
    • 3

    4. 属性选择器

    属性选择器匹配具有特定属性的HTML元素。例如,[target]选择器将匹配所有具有target属性的元素。

    [target] {
        color: yellow;
    }
    
    • 1
    • 2
    • 3

    5. 伪类选择器

    伪类选择器允许你样式化链接的状态,例如未访问的链接、已访问的链接、鼠标悬停在链接上时等。例如,:hover选择器将匹配鼠标悬停在其上的元素。

    a:hover {
        color: purple;
    }
    
    • 1
    • 2
    • 3

    6. 组合选择器

    组合选择器允许你同时选择多个元素。你可以使用,来分隔每个选择器。例如,p, li选择器将匹配所有的

  • 元素。

    p, li {
        color: orange;
    }
    
    • 1
    • 2
    • 3

    7. 后代选择器

    选择作为另一个元素后代的元素。

    div p {
        text-align: center;
    }
    
    • 1
    • 2
    • 3

    8. 子元素选择器

    选择作为另一个元素直接子元素的元素。

    ul > li {
        list-style-type: circle;
    }
    
    • 1
    • 2
    • 3

    9. 相邻兄弟选择器

    选择紧接在另一个元素后的兄弟元素。

    h2 + p {
        margin-top: 10px;
    }
    
    • 1
    • 2
    • 3

    10. 通用选择器

    *将匹配所有元素。

    * {
        box-sizing: border-box;
    }
    
    • 1
    • 2
    • 3
  • 相关阅读:
    系统架构师之软件工程
    vite - 多渠道差异化打包插件
    服务器往客户端发送字符串的网络编程
    十三、函数式编程(3)
    计算机组成原理期末复习第三章-2(唐朔飞)
    一种基于最大似然的语音信号混响时间(reverberation time)估计方法的MATLAB实现
    DP入门(一)
    基于单片机的机械臂运行轨迹在线控制系统设计
    CanOpen协议的伺服驱动控制
    Java if VS switch
  • 原文地址:https://blog.csdn.net/qq_45909595/article/details/136333711