html选择器

news2024/11/13 8:40:49

基本选择器

基本选择器 : 标签选择器 , 类选择器 , ID选择器

标签选择器

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 基本选择器</title>
    <!-- 基本选择器 :  标签选择器 -->
    <style>
        span{
            /*自由加属性和各种样式*/
            color: red;/*字体颜色*/
            font-size: 20px;/*字体大小*/
        }
    </style>
</head>
<body>
    <span>hello,world!</span>
</body>
</html>

效果:
在这里插入图片描述
标签选择器是直接用标签然后在大括号里面写值,如上面我写的<span></span>标签

span{
里面写值或样式,根据自己的需要加样式
}

类选择器

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 基本选择器</title>
    <!-- 基本选择器 :  类选择器 -->
    <style>
        .text{
             /*自由加属性和各种样式*/
             color: blue;/*字体颜色*/
            font-size: 20px;/*字体大小*/
        }
    </style>
</head>
<body>
    <span class="text">hello,world!</span>
</body>
</html>

效果:
在这里插入图片描述
使用类选择器的时候如上面我写的一个<span></span>的标签里面加个class="text",

classtext这个名字,名字前面 一定要加点

.text{
里面写值或样式,根据自己的需要加样式
}

ID选择器

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 基本选择器</title>
    <!-- 基本选择器 :  id选择器 -->
    <style>
        #word{
             /*自由加属性和各种样式*/
             color: pink;/*字体颜色*/
            font-size: 20px;/*字体大小*/
        }
    </style>
</head>
<body>
    <span id="word">hello,world!</span>
</body>
</html>

效果:
在这里插入图片描述
如果需要用id选择器如上我写的,<span></span>里面要加 id="你起的名字".我这里写的word,一定要加#号

#word{
里面写值或样式,根据自己的需要加样式
}

基本选择器总结

基本选择器 : 网页选择器核心

  1. 标签选择器: 直接拿标签名作为选择器的名字使用
    作用: 当前网页中所有该标签都有效
  2. ID选择器: 一个网页中指定一个效果只能用一次
    写法: 给标签加 id="值",#值{声明};
  3. 类选择器:指定一个样式可以多次使用
    写法:给标签加class="值", . 值{声明};

高级选择器

高级选择器: 层次选择器 , 伪类选择器 , 属性选择器,交集选择器 , 全集选择器

层次选择器

层次选择器: 标签之间的包含 ,同级关系的表示 a标签包含b标签和c标签: abc的父亲,bc是兄弟
代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>层次选择器</title>
    <style>
        
        .content h1{  /*后代选择器 无论嵌套多少层*/
            color:red;
        }
        .content>h1{   /*子选择器 只访问下一级,只有一层*/
            color: #faa53b;
        }
        h1+h2{ /*相邻兄弟*/
            color: green;
        }
        h1~h2 { /*同兄弟*/
        color: #1f87cc;
        }
 
    </style>
</head>
<body>
    <div class="content">
        <h1>张三</h1>
        <h2>李四</h2>
      <ul>
       <li>王五</li>
        <li>
        赵六
        </li>
       </ul>
       <div>
        <h1>孙七</h1>
    </div>
</div>
</body>
</html>

效果:
在这里插入图片描述

1.后代选择器。
格式: E F { css样式 } (E和F都是选择器)
作用:访问到E下的所有的F元素(无论嵌套多少层)。
符号: 空格。
2.子代选择器。
格式: E>F {css样式 } (E和F都是选择器)
作用:访问到E下的所有的F元素(只访问下一级,只有一层)。
符号: >。

伪类选择器

伪类选择器:直接指定第几个儿子
E F:first-child E 标签里面的第一个F标签,锁定第一个位置
E F:first-of-type E标签里面的第一个F标签,不锁定第一个位置
E F:last-child E 标签里面的最后一个F标签,锁定最后一个位置
E F:last-of-type E标签里面的最后一个F标签,不锁定最后一个位置
E F:nth-child(n) E标签里面的第n个F标签,锁定第n个位置
E F:nth-of-type(n) E标签里面的第n个F标签,不锁定第n个位置,odd:奇数行 even:偶数行

选择器示例示例说明
:first-of-typep:first-of-type选择每个p元素是其父级的第一个p元素
:last-of-typep:last-of-type选择每个p元素是其父级的最后一个p元素
:only-of-typep:only-of-type选择每个p元素是其父级的唯一p元素
:only-childp:only-child选择每个p元素是其父级的唯一子元素
:nth-child(n)p:nth-child(2)选择每个p元素是其父级的第二个子元素
:nth-last-child(n)p:nth-last-child(2)选择每个p元素的是其父级的第二个子元素,从最后一个子项计数
:nth-of-type(n)p:nth-of-type(2)选择每个p元素是其父级的第二个p元素
:nth-last-of-type(n)p:nth-last-of-type(2)选择每个p元素的是其父级的第二个p元素,从最后一个子项计数
:last-childp:last-child选择每个p元素是其父级的最后一个子级。
:first-childp:first-child选择每个p元素是其父级的第一个子级。

属性选择器

以标签的属性和值作为条件
语法:
E[属性=值][...] 具有指定属性且值相等的E标签
E[属性^=值][...] 具有指定属性且以值开头的E标签
E[属性$=值][...] 具有指定属性且以值结尾的E标签
E[属性*=值][...] 具有指定属性且包含值的E标签
代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性选选择器</title>
    <style>
        div[id]{ /*具有id属性的div标签*/
            color: red;
        }
        div[id][name]{ /*具有id和name属性的div标签*/
            color: #21ff56;
        }
        div[name=bb] { /*具有name属性且值的bb的div标签*/
            color: aqua;
        }
        div[name^=bb] { /*具有name属性且值以b开头的div标签*/
            color: #ff2488;
        }
        div[name$=bb] { /*具有name属性且值结尾b的div标签*/
            color: #2044ff;
        }
        div[name*=abc] { /*具有name属性且包含abc的div标签*/
            color: #faa53b;
        }
 
 
    </style>
</head>
<body>
    <div id="ab" name="ad">张三</div>
       <div id="ac">李四</div>
       <div name="bb">王五</div>
       <div name="bc">哈哈哈哈</div>
       <div name="abc">好好好好</div>
</body>
</html>

效果:
在这里插入图片描述

交集选择器

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交集选择器</title>
    <style>
        #a.b{ /*同时具有*/
            color: red;
        }
    </style>
</head>
<body>
     <div id="a" class="b">信息1</div>
     <div id="aa" class="bb">信息2</div>
</body>
</html>

效果:
在这里插入图片描述

并集选择器

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>并集选择器</title>
    <style>
        h1,h2,p,div,a{
            color: red;
        }
        *{  /*所有标签*/
 
        }
      div*{  /*div所有标签*/
 
        }
    </style>
</head>
<body>
     <h1>修复</h1>
     <h2>法鸡</h2>
     <p>分为</p>
     <div>染发</div>
     <a>规范</a>
 
 
</body>
</html>

效果:
在这里插入图片描述
并集选择器,就是把它们和在一起写,要用逗号隔开

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

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

相关文章

小企业软件项目流程六步法

小企业软件项目流程六步法&#xff0c;很有效 软件项目的沟通成本是巨大的 软件生产是非常特殊的一套流程 没有过程控制&#xff0c;最终一定失控或废弃 趣讲大白话&#xff1a;输入垃圾&#xff0c;输出也是垃圾 【趣讲信息科技188期】 **************************** 软件行业…

九、(补充文章四)Arcgis实现深度学习训练样本数据的批量制作——只靠原图+shp如何批量制作样本图片

之前写了一些个深度学习系列文 其中先是单张样本的制作方法 最后通过构造模型批量处理 大大提高了生成样本的速度 四、Arcgis实现深度学习河流训练样本数据的制作(使用软件批量获取样本图片)——对已经获取到的完整面状样本数据进行处理 但是这个方法不仅仅需要shp和原图 还需要…

在不到200行的HTML代码中,实现老板要求为他的孩子绘制一个童话乐园:七彩彩虹、微笑笑脸和魔法树

文章目录 准备工作1.绘制七彩彩虹2.绘制微笑笑脸3.绘制多变的魔法树 结语 欢迎来到童话乐园&#xff01;这里有一些有趣的绘图功能&#xff0c;让你在代码的世界中感受童话般的乐趣。本篇博文将介绍如何使用代码来绘制七彩彩虹、微笑笑脸和魔法树。让我们一起来探索吧&#xff…

vector 练习

目录 一、创建动态二维数组的方法 0x01 C语言法 0x02 C法 二、 杨辉三角 三、电话号码的数字组合 一、创建动态二维数组的方法 0x01 C语言法 int** p (int**)malloc(sizeof(int*) * M);//创建M行的数组,每一行都是一个数组 for(size_t i 0;i < M;i) {p[i] (int*)mal…

Redis主从集群与哨兵集群

一、Redis 哨兵集群原理 Redis 哨兵集群是一种高可用性的解决方案&#xff0c;用于监控 Redis 实例的状态并在实例出现故障时自动进行故障转移。 Redis 哨兵集群由多个哨兵实例组成&#xff0c;每个哨兵实例都运行在独立的服务器上。每个哨兵实例都会周期性地向 Redis 实例发…

Linux内存初始化-启动阶段的内存初始化

本文代码基于ARM64平台, Linux kernel 5.15 在加载kernel 之前&#xff0c; kernel对于系统是有一定要求的&#xff0c;明确规定了boot阶段必须要把MMU关闭&#xff1a; arch/arm64/kernel/head.S/** Kernel startup entry point.* ---------------------------** The require…

路径规划算法:基于松鼠优化的路径规划算法- 附代码

路径规划算法&#xff1a;基于松鼠优化的路径规划算法- 附代码 文章目录 路径规划算法&#xff1a;基于松鼠优化的路径规划算法- 附代码1.算法原理1.1 环境设定1.2 约束条件1.3 适应度函数 2.算法结果3.MATLAB代码4.参考文献 摘要&#xff1a;本文主要介绍利用智能优化算法松鼠…

入门大数据就业前景怎么样?

时势造英雄&#xff0c;对个人而言亦是如此。跟随趋势&#xff0c;找准自己未来发力的赛道&#xff0c;在合适的时间干合适的事&#xff0c;就是抓住自己的未来。 猎聘大数据研究院发布了《2022未来人才就业趋势报告》 从排名来看&#xff0c;2022年1-4月各行业中高端人才平均…

mac m1/m2 安装 ps 2023 插件无法显示扩展界面

碎碎念&#xff1a;一直在踩坑的路上&#xff0c;甚至想休息时间玩一会儿 ps 都能踩坑 问题描述 新的 m2 芯片 mac 安装了色环插件后&#xff0c;在窗口界面中没有找到扩展&#xff0c;且在首选项->增效工具的旧版扩展也是灰色的 题外话&#xff1a;记录一下 mac 的 photo…

2023尚上优选-社区团购 优选电商Spring Cloud Alibaba

尚上优选2023最新企业级微服务架构项目 分布式微服务后端VUE、小程序 尚上优选是真实居住社区内居民团体的一种互联网线上线下购物消费行为&#xff0c;是依托真实社区的一种区域化、小众化、本地化、网络化的团购形式。简而言之&#xff0c;它是依托社区和团长社交关系实现生…

DHCP与DHCPv6讲解

目录 DHCP DHCP端口号 DHCP报文 DHCP工作过程 DHCP租期续租 DHCPv6 DHCPv6端口号 DHCPv6报文 DHCPv6工作原理 DHCP DHCP端口号 DHCP主要有两个端口号&#xff0c;分别是UDP67和UDP68 DHCP客户端向DHCP服务器发送报文时采用68端口号&#xff0c;DHCP服务器向DHCP客户端…

整合开源治理经验,共谋开源社区发展|2023 开放原子全球开源峰会开源社区治理与运营分论坛即将启幕

在数智时代广泛连接、同步演进和网状协作特性的催化下&#xff0c;开源社区正在成为技术应用和行业数字化发展的重要推动力量。开展数字技术开源社区的有效治理&#xff0c;对调和相互冲突的内外部需求、协调相互竞合的参与主体、整合差异化的绩效目标具有重要理论和实践意义。…

ChatGPT 时代,程序员的生存之道

ChatGPT 近期炙手可热&#xff0c;仿佛没有什么问题是它不能解决的。出于对 ChatGPT 的好奇&#xff0c;我们决定探索下它对于前端开发人员来讲&#xff0c;是作为辅助工具多一些&#xff0c;还是主力工具更多一些&#xff1f; 2D 能力测试 我们就挑选一个著名的递归回溯问题—…

自学黑客(网络安全),一般人我劝你还是算了!

网络安全在当今信息社会越来越受到重视&#xff0c;但不同于Java、C/C等后端开发岗位有非常明晰的学习路线&#xff0c;网络安全更多是靠自己摸索&#xff0c;要学的东西又杂又多&#xff0c;难成体系。 这也是为什么我经常劝别人不要入网络安全的坑&#xff0c;因为一般人真坚…

调用腾讯API实现人体关键点分析

目录 1. 作者介绍2. 调用腾讯API实现人体关键点分析2.1 API的简介2.2 腾讯API使用工具2.4 MPII数据集介绍 3. 实验流程与结果3.1调用百度API流程3.2完整代码3.3测试结果 1. 作者介绍 张思怡&#xff0c;女&#xff0c;西安工程大学电子信息学院&#xff0c;2022级研究生&#…

MongoDB简单快速入门

MongoDB简单快速入门 简单介绍应用场景安装与启动基础操作SpringBoot整合MongoDB 简单介绍 MongoDB是一个开源、高性能、无模式的文档型数据库。NoSQL数据库产品中的一种&#xff0c;是最想关系型数据库的非关系型数据库 应用场景 安装与启动 直接将安装的压缩包进行解压&…

unity 3d实现下雨、雾气、萤火虫和火花四溅的粒子效果

文章目录 先看最终效果1. 下雨效果2. 雾气效果3. 萤火虫和火花四溅的效果 3d下雨粒子效果涟漪效果雨滴和涟漪效果结合水花效果雨滴涟漪水花结合问题雾气效果萤火虫火花效果萤火虫和火花效果结合 先看最终效果 1. 下雨效果 2. 雾气效果 3. 萤火虫和火花四溅的效果 3d下雨粒子效…

【C/C++】基础知识之string字符串

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞 关注支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; &#x1f525;c系列专栏&#xff1a;C/C零基础到精通 &#x1f525; 给大…

整数规划在数学建模中的应用及MATLAB实现

2023年9月数学建模国赛期间提供ABCDE题思路加Matlab代码,专栏链接(赛前一个月恢复源码199,欢迎大家订阅):http://t.csdn.cn/Um9Zd 目录 整数规划基本概念 整数规划原理 MATLAB实现 1. 使用intlinprog求解整数规划问题 数学建模案例&#xff1a;设备选购优化 问题建模 MA…

时间序列预测 | Matlab基于鲸鱼算法优化随机森林(WOA-RF)与随机森林(RF)的时间序列预测对比

文章目录 效果一览文章概述部分源码参考资料效果一览 文章概述 时间序列预测 | Matlab基于鲸鱼算法优化随机森林(WOA-RF)与随机森林(RF)的时间序列预测对比 评价指标包括:MAE、RMSE和R2等,代码质量极高,方便学习和替换数据。要求2018版本及以上。 部分源码 %---------------…