CSS选择器

小哼快跑

已于 2024-01-20 13:58:58 修改

阅读量1k

点赞数 24

分类专栏： Java Web专栏文章标签： css 前端选择器

于 2024-01-20 13:55:48 首次发布

本文链接：https://blog.csdn.net/weixin_45754463/article/details/135714761

版权

Java Web专栏专栏收录该内容

20 篇文章 0 订阅

订阅专栏

文章目录

- 选择器

选择器

概述：用来选择 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;
}
```