CSS选择器十二种方法

相信大家对元素应该是不陌生的,当我们页面中,我们想要布局,给元素添加样式的时候,我们应该怎么获取到指定元素呢?

优先级:ID 选择器 > 类选择器 > 标签选择器 > 通配符

1.元素选择器

通过标签名可直接选取到元素

例如:div{},p{},ul{}等等

2.类选择器

通过class类选取到元素,可以选取到多个元素,只要给想要添加这种类名的元素添加上class类,就可以不用反复写相关的样式

例如:.className 记住要添加点号(.)

3.id选择器

通过id选取到元素,id是独特的,就跟我们的身份证一样,一人一个,不能重复

例如:#idName
记住以#开头

4.通配符选择器

直接以***基本选择器代码总结:开头,通常用于清除默认样式,比如网页的内外边距
元素选择器~通配符选择器代码总结:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器总结</title>
    <style>
        /* 第一种,元素选择器 */
        /* div {
            color: red;
        } */
        /* ................. */
        /* 第二种,类选择器 */
        /* .box {
            color: red;
        } */
        /* ................ */
        /* 第三种,id选择器 */
        /* #box {
            color: red;
        } */
        /* ............ */
        /* 第四种,通配符选择器 */
        /* * {
            margin: 0;
            padding: 0;
        } */
    </style>
</head>
<body>
    <!-- 第一种元素选择器 -->
    <!-- <div>元素选择器</div> -->
    <!-- .................. -->
    <!-- 第二种类选择器 -->
    <!-- <div class="box">类选择器</div>
    <div class="box">类选择器</div> -->
    <!-- 第三种id选择器 -->
    <!-- <div id="box">id选择器</div> -->
</body>
</html>

5.并集选择器

并集选择器,顾名思义,就是并在一起

例如:.box,.box1

使用逗号隔开,通常用于有相同样式的情况

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box,.box1 {
            color: red;
        }
    </style>
</head>
<body>
    <div class="box">我是需要并集选择器</div>
    <div class="box1">我也需要并集选择器</div>
</body>
</html>

6.交集选择器

交集,相交的元素

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div.box {
            color: red;
        }
    </style>
</head>
<body>
    <div class="box">交集选择器</div>
</body>
</html>

7.后代选择器

后代选择器我们需要用空格隔开,选取到全部的后代

例如:div span{ }

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box span {
            color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>我是儿子</span>
        <div>
            <span>我是孙子</span>
            <div>
                <span>我是重孙</span>
            </div>
        </div>
    </div>
</body>
</html>

8.子代选择器

选取到父级元素的子元素,是亲儿子,不包括后代

例如:div>span{ }

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box span {
            color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>子代选择器</span>
        <span>子代选择器</span>
        <span>子代选择器</span>
    </div>
</body>
</html>

9.相邻兄弟选择器

使用+号

例如:div+div{ }

选取到的是下一个兄弟

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box+div{
            color: red;
        }
    </style>
</head>
<body>
    <div>我是你上一级兄弟</div>
    <div class="box">我是你哥</div>
    <div>我是你亲兄弟</div>
</body>
</html>

10.全部兄弟选择器

使用~可以选取到全部兄弟

例如:div~div{ }

不过也是从下一级开始

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box~div{
            color: red;
        }
    </style>
</head>
<body>
    <div>我是你上一级兄弟</div>
    <div class="box">我是你哥</div>
    <div>我是你亲兄弟</div>
    <div>我也是你亲兄弟</div>
</body>
</html>

11.伪类选择器(常用的3种)

1.:first-child选取到第一个元素

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box:first-child {
            color: red;
        }
    </style>
</head>
<body>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</body>
</html>


2.:last-child选取到最后一个元素

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box span:last-child {
            color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>


3.:nth-child(n)

选择第n个元素,从1开始

even或2n 选中偶数位的元素

odd或2n+1 选中奇数位得到元素

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box span:nth-child(1) {
            color: red;
        }
        .box span:nth-child(2n+2) {
            color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</body>
</html>

十二、属性选择器(介绍4种)

可以通过元素属性选取到属性

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        input[name=inp]{
            border: 10px solid #000;
        }
        /* 选取到以i开头的元素 */
        input[name^=i]{
            border: 10px solid red;
        }
        /* 选取以p结尾的元素 */
        input[name$=p]{
            border: 10px solid pink;
        }
        /* 选取含有n的元素 */
        input[name*=n]{
            border: 10px solid hotpink;
        }
    </style>
</head>
<body>
    <input type="text" name="inp">
    <input type="text" name="inp">
    <input type="text" name="inp">
</body>
</html>

感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!

相关推荐
栈老师不回家几秒前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙6 分钟前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠10 分钟前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds30 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
吕彬-前端1 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱1 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai2 小时前
uniapp
前端·javascript·vue.js·uni-app
bysking3 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓3 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4113 小时前
无网络安装ionic和运行
前端·npm