CSS选择器

发布时间:2024年01月20日

选择器

  • 概述:用来选择 HTML 元素并且为其添加样式的一种机制,可以根据标签名、类名、ID、属性>等来选择元素,并为其设置样式。

  • 格式

    选择器{
        属性名1:属性值1;
        ...
        属性名n:属性值n
    }
    

    每一对属性需要使用 “:” 隔开,最后一对属性可以不加 “:”

基础选择器

ID选择器
  • 概述:选择具体的 id 属性值的元素,建议在 一个 html 页面中 id 值唯一

  • 语法

    # id属性值{
        属性:属性值;
    }
    
  • 示例代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>ID选择器</title>
        <style>
            #in{
                background: aquamarine;
            }
        </style>
    </head>
    <body>
        <input type="text" id="in">
    </body>
    </html>
    
元素选择器
  • 概述:选择具有相同标签名称的元素

  • 语法

    标签名称{
        属性:属性值;
    }
    
  • 示例代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>元素选择器</title>
        <style>
            p{
                color: red;
            }
        </style>
    </head>
    <body>
        <p>你好,世界!</p>
        <label for="user">用户名:</label>
        <input type="text" id="user">
    </body>
    </html>
    
类选择器
  • 概述:选择具有相同的 class 属性值的元素

  • 语法

    .class属性值{
        属性:属性值;
    }
    
  • 示例代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>类选择器</title>
        <style>
            .button{
                color: red;
            }
        </style>
    </head>
    <body>
        <p>你好,世界!</p>
        <label for="user">用户名:</label>
        <input type="text" id="user">
        <input type="button" value="提交" class="button">
    </body>
    </html>
    

    注意:优先级排序(从低到高):元素选择器、类选择器、id选择器


扩展选择器

选择所有元素
  • 语法

    *{
        属性:属性值;
    }
    
  • 示例代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>选择所有元素选择器</title>
        <style>
            *{
                color: red;
            }
        </style>
    </head>
    <body>
        <p>你好,世界!</p>
        <label for="user">用户名:</label>
        <input type="text" id="user">
        <input type="button" value="提交" class="button">
    </body>
    </html>
    
并集选择器
  • 语法

    选择器1,选择器2{
        属性:属性值;
    }
    
  • 示例代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>并集选择器</title>
        <style>
            /*class值为button和标签为p的字体设置为红色*/
            .button,p{
                color: red;
            }
        </style>
    </head>
    <body>
        <p>你好,世界!</p>
        <label for="user">用户名:</label>
        <input type="text" id="user">
        <input type="button" value="提交" class="button">
    </body>
    </html>
    
后代选择器
  • 作用:找到选择器1元素下面的选择器2元素

  • 语法

    选择器1 选择器2{
        属性:属性值;
    }
    
  • 示例代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>后代选择器</title>
        <style>
            /*选择table标签下的 tr 标签*/
            table tr{
                background: yellowgreen;
            }
        </style>
    </head>
    <body>
        <table border="1" align="center">
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
            </tr>
            <tr>
                <td>java</td>
                <td>python</td>
                <td>c</td>
            </tr>
        </table>
    </body>
    </html>
    
子选择器
  • 作用:找到选择器1下的子选择器2

  • 语法

    选择器1>选择器2{
        属性:属性值;
    }
    
  • 示例代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>子选择器</title>
        <style>
            /*选择p标签的子标签a*/
            p>a{
                color: yellowgreen;
            }
        </style>
    </head>
    <body>
        <p>
            你好!
            <a href="http://www.baidu.com">百度</a>
            <input type="text" id="user">
        </p>
    </body>
    </html>
    
属性选择器
  • 作用:选择元素名称,属性名=属性值的元素

  • 语法

    元素名称[属性名='属性值']{
        属性:属性值;
    }
    
  • 示例代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>属性选择器</title>
        <style>
            input[type='text']{
                color: yellowgreen;
            }
        </style>
    </head>
    <body>
        <p>
            你好!
            <a href="http://www.baidu.com">百度</a>
            <input type="text" id="user" placeholder="请输入用户名">
        </p>
    </body>
    </html>
    
伪类选择器
  • 作用:选择处于特定状态的元素或者特定位置的元素。

  • 语法

    元素:状态{
        属性:属性值;
    }
    
常见的伪类选择器
  • 种类::hover、:active、:focus、:first-child、:last-child、:nth-child等

  • 案例一:要为鼠标悬停在元素上时改变其样式,可以使用 :hover 伪类选择器

    a:hover{
    	color:red;
    }
    
  • 案例二:要为元素被点击时改变其样式,可以使用 :active 伪类选择器

    button:active{
        background-color:#f00;
    }
    
  • 案例三:要为获得焦点的元素改变其样式,可以使用 :focus 伪类选择器

    input:focus{
        border:2px solid blue;
    }
    
  • 案例四:要选择第一个子元素,可以使用 :first-child 伪类选择器

    li:first-child{
        font-weight:bold;
    }
    
  • 案例五:要选择最后一个元素,可以使用 :last-child 伪类选择器

    li:last-child{
        color:#f00;
    }
    
  • 案例六:要选择特定位置的子元素,可以使用 :nth-child 伪类选择器

    li:nth-child(odd) {
      background-color: #f2f2f2;
    }
    
文章来源:https://blog.csdn.net/weixin_45754463/article/details/135714761
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。