• 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
  • 相关阅读:
    Android与H5交互 -- 点击H5跳转到 Android原生 页面
    音视频编解码技术学习笔记
    线程的概述
    C#:实现堆排序算法(附完整源码)
    图形渲染技术-目标变换
    MATLAB与Excel的数据交互
    别再乱写git commit了
    计算机组成原理中的诸如4k*8位,8K*8位之类的是什么意思
    AI在日常生活中有哪些应用?
    什么是数字孪生智慧城市应用场景
  • 原文地址:https://blog.csdn.net/qq_45909595/article/details/136333711