CSS选择器十二种方法

news2024/11/16 2:21:01

相信大家对元素应该是不陌生的，当我们页面中，我们想要布局，给元素添加样式的时候，我们应该怎么获取到指定元素呢？
优先级：ID 选择器 > 类选择器 > 标签选择器 > 通配符

1.元素选择器

通过标签名可直接选取到元素
例如：div{}，p{}，ul{}等等

2.类选择器

通过class类选取到元素，可以选取到多个元素，只要给想要添加这种类名的元素添加上class类，就可以不用反复写相关的样式
例如：.className 记住要添加点号(.)

3.id选择器

通过id选取到元素，id是独特的，就跟我们的身份证一样，一人一个，不能重复
例如：#idName
记住以#开头

4.通配符选择器

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

<!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
使用逗号隔开，通常用于有相同样式的情况

<!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.交集选择器

交集，相交的元素

<!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{ }

<!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{ }

<!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{ }
选取到的是下一个兄弟

<!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{ }
不过也是从下一级开始

<!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选取到第一个元素

<!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选取到最后一个元素

<!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 选中奇数位得到元素

<!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种)

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

<!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>

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1277146.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

lv11 嵌入式开发 中断控制器14

lv11 嵌入式开发 中断控制器14

目录 1 中断控制器 ​编辑 2 Exynos4412下的中断控制器 2.1 概述 2.2 特征 ​编辑 2.3 中断状态 2.4 中断类型 2.5 中断控制器GIC中断表 3 中断控制器寄存器详解 3.1 ICDDCR&#xff08;Interrupt Controller Distributor Control Register&#xff09; 3.2 ICDISER…
阅读更多...
备战春招——12.1 算法

备战春招——12.1 算法

动态规划 动态规划的核心思想就是 本次只由上一次决定。 爬楼梯 第3阶由&#xff08;第1节2&#xff09;和&#xff08;第二节1&#xff09;&#xff0c;不要想着往下迭代&#xff0c;不然那是个无穷底。所以f(x)f(x-1)f(x-2) (x>2)。所以就是当前只与上个操作相关。 cla…
阅读更多...
docker安装卸载使用全教程

docker安装卸载使用全教程

docker安装卸载使用全教程 1.确定你是Centos7及以上版本 cat /etc/redhat-release2.yum安装gcc相关依赖 yum install -y gcc Yum install -y gcc-c3.安装需要的软件包 sudo yum install -y yum-utils4.设置stable镜像仓库 这里设置的是国内阿里云的镜像库&#xff0c;国外的…
阅读更多...
【计算机网络笔记】PPP协议

【计算机网络笔记】PPP协议

系列文章目录 什么是计算机网络&#xff1f; 什么是网络协议&#xff1f; 计算机网络的结构 数据交换之电路交换 数据交换之报文交换和分组交换 分组交换 vs 电路交换 计算机网络性能&#xff08;1&#xff09;——速率、带宽、延迟 计算机网络性能&#xff08;2&#xff09;…
阅读更多...
vue3中如何实现事件总线eventBus

vue3中如何实现事件总线eventBus

使用插件 由于vue3中 “$ on”&#xff0c;$ off 和 $ once 实例方法已被移除&#xff0c;组件实例不再实现事件触发接口 所以我们可以使用官方推荐的这个第三方库实现同样的效果 mitt https://github.com/developit/mitt 安装 pnpm install mitt -S挂载全局写法 main.ts 初始…
阅读更多...
[全球首款]开源智能串口屏方案发布

[全球首款]开源智能串口屏方案发布

基于 AWTK 和 AWTK-MVVM 实现的串口屏方案。 界面修改数据&#xff0c;自动通知 MCU。 MCU 修改数据&#xff0c;自动更新界面。 1. 主要特色&#xff1a; 1.1 开发 强大的界面设计器 AWStudio。基于 AWTK 实现强大的 GUI 功能&#xff08;多窗口、输入法、动画和各种控件&am…
阅读更多...
数据算法之层次聚类——(待完善)

数据算法之层次聚类——(待完善)

1.数据挖掘入门笔记——层次聚类 ( 浮光掠影) 2.聚类算法&#xff1a;Hierarchical Clustering层次聚类 3.一文读懂层次聚类&#xff08;Python代码&#xff09; 4.层次聚类 5.聚类分析&#xff08;三&#xff09; 层次聚类及matlab程序 5.聚类算法之层次聚类&#xff08…
阅读更多...
Linux文件系统 -- inode和block

Linux文件系统 -- inode和block

目录 重要参数目录项fsck软连接&#xff0c;硬链接 重要参数 dumpe2fs /dev/sda1|more查看ext4文件元数据&#xff08;描述文件系统的数据&#xff09;&#xff0c;xfs_info查看xfs文件系统 superblock&#xff1a;超级块&#xff0c;记录此file system的整体信息&#xff0c…
阅读更多...
SSM实战项目，基于Spring+SpringMVC+mybatis实现的人事管理系统源码+数据库+使用说明

SSM实战项目，基于Spring+SpringMVC+mybatis实现的人事管理系统源码+数据库+使用说明

SSM实战项目&#xff1a;人事管理系统&#xff08;蓝色版&#xff09; 一、员工管理系统项目说明&#xff1a; 该项目主要是完成SpringSpringMVCmybatis的完整整合&#xff0c;功能实现比较单一&#xff0c;就是一个完成增删改查的小项目&#xff01; 完整代码下载地址SSM实…
阅读更多...
游戏网站的技术 SEO：提示和最佳实践

游戏网站的技术 SEO：提示和最佳实践

您是否希望提高游戏网站上的自然搜索可见性和用户参与度&#xff1f;如果是这样&#xff0c;实施技术SEO最佳实践是必不可少的。在这篇博文中&#xff0c;我们将提供使用技术 SEO 优化游戏网站的技巧和最佳实践&#xff0c;并讨论为什么它是搜索引擎优化 &#xff08;SEO&#…
阅读更多...
熬夜会秃头——beta冲刺Day2

熬夜会秃头——beta冲刺Day2

这个作业属于哪个课程2301-计算机学院-软件工程社区-CSDN社区云这个作业要求在哪里团队作业—beta冲刺事后诸葛亮-CSDN社区这个作业的目标记录beta冲刺Day2团队名称熬夜会秃头团队置顶集合随笔链接熬夜会秃头——Beta冲刺置顶随笔-CSDN社区 目录 一、团队成员会议总结 1、成员…
阅读更多...
【高效开发工具系列】驼峰下划线互转

【高效开发工具系列】驼峰下划线互转

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…
阅读更多...
centos7 yum安装redis

centos7 yum安装redis

1.安装epel源 yum install epel-release -y 2.安装 参数-y是遇到yes/no时 自动yes yum install redis -y 3.查看redis安装的位置 whereis redis 4.打开配置文件 vim /etc/redis.config 5.修改密码 在打开的文件中输入 /requirepass 后按下确认键&#xff0c;(找下一个关…
阅读更多...
常见的攻击防护

常见的攻击防护

只做模拟机器使用&#xff0c;不使用真实机器 目录 一、 DHCP饿死和防护应对措施.................................. 1 1&#xff0c; 实验拓扑&#xff1a;...................................................... 2 2&#xff0c; 实验配置............................…
阅读更多...
Web网页安全策略的研究及其实现方案

Web网页安全策略的研究及其实现方案

摘 要 越来越多的人使用电脑来接触互联网&#xff0c;事实上&#xff0c;使用Web技术的实现基于网络的不断完善和发展的交流网站&#xff0c;人们可以利用计算机网络技术&#xff0c;方便得到想要的任何信息。计算机网络的发展&#xff0c;也促进了相关产业的发展&#xff0c;…
阅读更多...
C++11【下】

C++11【下】

欢迎来到Cefler的博客&#x1f601; &#x1f54c;博客主页&#xff1a;那个传说中的man的主页 &#x1f3e0;个人专栏&#xff1a;题目解析 &#x1f30e;推荐文章&#xff1a;题目大解析&#xff08;3&#xff09; 目录 &#x1f449;&#x1f3fb; 新的类功能类成员变量初始…
阅读更多...
【pytorch】从yolo的make_grid理解torch.meshgrid、torch.stack

【pytorch】从yolo的make_grid理解torch.meshgrid、torch.stack

文章目录 简述1、torch.meshgrid 创建行列坐标2、torch.stack 结合行列坐标3、通过view函数扩展维度 简述 yolo检测 make_grid创建网格代码如下&#xff0c;那么什么是torch.meshgrid? def _make_grid(nx20, ny20):yv, xv torch.meshgrid([torch.arange(ny), torch.arange(…
阅读更多...
三 STM32F4使用Sys_Tick 实现微秒定时器和延时

三 STM32F4使用Sys_Tick 实现微秒定时器和延时

更多细节参考这篇 1. 什么是时钟以及作用 1.1 什么是时钟 时钟是由电路产生的周期性的脉冲信号&#xff0c;相当于单片机的心脏 1.2 时钟对于STM32的作用 指令同步&#xff1a;cpu和内核外设使用时钟信号来进行指令同步数据传输控制&#xff1a; 时钟信号控制数据在内部总…
阅读更多...
CSS新手入门笔记整理：CSS图片样式

CSS新手入门笔记整理：CSS图片样式

图片大小 语法 width:像素值; height:像素值; 图片边框&#xff1a;border 语法 边框&#xff1a;宽度值 样式值 颜色值&#xff1b; border:1px solid red; 图片对齐 水平对齐&#xff1a;text-align 语法 text-align:取值; 属性值 说明 left 左对齐(默认值) cent…
阅读更多...
【Java Web学习笔记】 1 - HTML入门

【Java Web学习笔记】 1 - HTML入门

项目代码 https://github.com/yinhai1114/JavaWeb_LearningCode/tree/main/html 零、网页的组成 HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息&#xff0c;可以包含文字、图片视频等。 CSS样式是表现。就像网页的外衣。比如&#xff0c;标题字体、…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023