htmlCSS-----CSS选择器(上)

news2024/11/24 10:29:06

 目录

前言:

1.初级选择器

(1)ID选择器

(2)class选择器

(3)标签选择器

(4)通配选择器


前言:

        CSS选择器是CSS页面处理的重要组成部分,前面讲到CSS的三种写法样式,选择器用到最多的是外部样式,通过外部样式去设置选择器可以更好的去处理页面,提高代码的复用性。在此之前我们需要去创建一个CSS文件(外部样式的写法),下面就一起来看看吧。(上一期链接:html&CSS-----CSS介绍与样式书写_灰勒塔德的博客-CSDN博客)

1.初级选择器

初级选择器包括,ID选择器,类选择器(class),还有标签选择器和通配选择器,下面我就进行一一介绍其相关用法。

(1)ID选择器

ID 选择器用来找到HTML文档中具有指定ID属性的标签,ID 选择器的定义需要用到井号#,后面紧跟ID属性的值。ID选择器的使用方式和类选择器的使用方式是非常像,但是ID选择器的主要作用是结合js用于确定页面上的唯一元素。单个标签不允许拥有多个id名,同页面中不存出现重复的id名(id重名会影响js代码获取标签)。并不是主要用来设置css的。可见ID选择器是唯一性的,只能作用于一个标签,其权重也是最大的。

 示例:

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>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div id="nice">这是一个ID选择器
        <p>hello</p>
        <p id="nic">555</p>
    </div>
</body>
</html>

CSS文件代码: 

#nice{
    color:red;
    font-size: 50px;
}

#nic{
    color: bisque;
}

效果:

 这里可以看出ID选择器是具优先性质的,同样在div的内部,由于一个有定义ID选择器一个没有去ID选择器显示的效果是不一样的。

(2)class选择器

 类选择器可以根据标签的class属性,找到具体的HTML标签。类选择器的定义需要用到一个英文的句号.,后面紧跟 class 属性的值,在CSS写法如下:

.black {
    color: black;
}

 一个标签可以同时有多个类名,类名之间以空格隔开。使用场景:将一些标签相同的样式放在一个类里面,从而节省css代码的书写。类选择器的权重小于ID选择器的权重,但没有唯一性。

 示例:

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>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
   <div class="classsecond" id="nice">你好世界</div>
    <div class="classfirst classsceond">这是一个类选择器</div>
    <p class="classsecond">hello</p>
</body>
</html>

 css 代码:

#nice{
    color:red;
    font-size: 50px;
}

.classfirst{
    font-size: 50px;
    color: brown;
}
.classsecond{
    color:blue
}

效果:

 这里可以看出,如果同时出现了ID选择器和class选择器的时候,会优先作用到ID选择器,如果重新两个class选择器并列的时候,是优先作用于第一个class选择器。

(3)标签选择器

一个完整的 HTML 文档由各式各样的标签组成,而标签选择器可以通过具体的标签名称来匹配文档内所有同名的标签,写法如下:

/* 找到页面当中所有的p标签 */
p {
    color: blue;
}

 标签选择器选择的覆盖面广,通常用来做样式的初始化,其权重小于ID选择器,小于类选择器。

 示例:

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>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
   <a href="https://www.yhdmz2.com/" class="classsecond">点开我开始看动漫</a>
    
</body>
</html>

CSS代码:

a{
    /* 删除下划线 */
    color: brown;
    text-decoration: none;
}
.classsecond{
    color:blue
}

效果:

 可以看出,同样设置了字体颜色,这里是优先使用class选择器里面的资源颜色。

(4)通配选择器

通配符选择器用星号*表示,它不匹配某个特定的HTML元素,而是匹配 HTML文档中的每个元素。我们通常使用通用选择器来清除 HTML元素中默认的内外边距。

        实际上在我们以后做项目的时候,这一类选择器基本上是不会用到的,因为这一类选择器是把整个代码里面的样式都进行统一化,所以其权重也是比以上讲到的三个选择器的权重要小的。写法如下:

/*通配符选择器在开发中不会使用,一般我们页面的标签的样式不会长的都完全一样。在平常的练习去除标签默认的margin和padding*/
* {
    margin: 0;
    padding: 0;
}

 示例:

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>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
   <a href="https://www.yhdmz2.com/" class="classsecond">点开我开始看动漫</a>
   <p class="class">一起看动漫吧!</p>
   <ul>
        <li>东京美食家</li>
        <li>寄生兽</li>
        <li>进击的巨人</li>
        <li>斩赤红之瞳</li>
    </ul>
</body>
</html>

CSS代码:

a{
    /* 删除下划线 */
    color: brown;
    text-decoration: none;
}
.class{
    font-family: 华文行楷;
    color:blue
    
}
*{
    margin: 0;
    padding: 0;
    font-size: 40px;
}

效果:

 

以上是今天的全部内容了,下一期我们接着讲CSS高级选择器,我们下一期再见!

分享一张壁纸:

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

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

相关文章

MMPose关键点检测实战

安装教程 https://github.com/TommyZihao/MMPose_Tutorials/blob/main/2023/0524/%E3%80%90A1%E3%80%91%E5%AE%89%E8%A3%85MMPose.ipynb git clone https://github.com/open-mmlab/mmpose.git -b tutorial2023 -b代表切换到某个分支&#xff0c;保证分支和作者的教程一致 ra…

基于SpringBoot+Thymeleaf+Mybatis+Html校园二手交易平台

基于SpringBootThymeleafMybatisHtml校园二手交易平台 一、系统介绍1、系统主要功能&#xff1a;2、环境配置 二、功能展示1.主页(客户)2.登陆&#xff08;客户&#xff09;3.我的购物车(客户)4.我的订单&#xff08;客户&#xff09;5.主页&#xff08;管理员&#xff09;6.订…

mybatisplus数据权限插件学习初探 动态表名更换插件 防止全表更新与删除插件

文章目录 学习链接 mybatisplus数据权限插件学习初探前言案例建表用户表订单表 环境准备UserUserMapperUserMapper.xmlOrdersOrdersMapperOrdersMapper.xml 配置UserTypeEnumUserContextHolderCustomizeDataPermissionHandlerMybatisPlusConfig 测试测试类bossdeptManagerclerk…

Redis通信协议、过期回收策略

Redis通信协议-RESP协议 Redis是一个CS架构的软件&#xff0c;通信一般分两步&#xff08;不包括pipeline和PubSub&#xff09;&#xff1a; 客户端&#xff08;client&#xff09;向服务端&#xff08;server&#xff09;发送一条命令 服务端解析并执行命令&#xff0c;返回…

二级指针骚操作实现链表虚拟头节点

重点是不用像其他文章里那样&#xff0c;用一个普通节点成员变量当头节点&#xff0c;节省一点空间占用&#xff0c;反正我觉得有点骚。就不详细交代技术背景了&#xff0c;简而言之&#xff0c;就是链表中第一个节点前没有节点了&#xff0c;只有一个指向它的指针&#xff0c;…

强化学习基础篇[3]:DQN、Actor-Critic详解

【强化学习原理+项目专栏】必看系列:单智能体、多智能体算法原理+项目实战、相关技巧(调参、画图等、趣味项目实现、学术应用项目实现 专栏详细介绍:【强化学习原理+项目专栏】必看系列:单智能体、多智能体算法原理+项目实战、相关技巧(调参、画图等、趣味项目实现、学术应…

从实习到秋招成为一名安全工程师,我是怎么做的

前言 借朋友口述总结了安全招聘面试经历分享&#xff0c;希望更多的人看到这篇文&#xff0c;从中得到启发&#xff0c;找到自己心仪的工作。 基本情况 签了字节的三方&#xff0c;秋招终于告一段落。从八月份边实习边准备秋招到现在&#xff0c;经历了许多&#xff0c;这篇帖…

Linux :: 【简单开发篇 :: vim 编辑器:(1)】:: vim 编辑器的基本认识与三种 vim 常用模式 | 使用:打开编辑、退出保存关闭vim

前言&#xff1a;本篇是 Linux 基本操作篇章的内容&#xff01; 笔者使用的环境是基于腾讯云服务器&#xff1a;CentOS 7.6 64bit。 学习集&#xff1a; C 入门到入土&#xff01;&#xff01;&#xff01;学习合集Linux 从命令到网络再到内核&#xff01;学习合集 目录索引&am…

yolov8Pose实战

目录 前言一、yolov8环境搭建二、测试训练模型&#xff0c;评估模型&#xff0c;并导出模型实测检测效果 测试人体姿态估计 前言 YOLO系列层出不穷&#xff0c;从yolov5到现在的yolov8仅仅不到一年的时间。追踪新技术&#xff0c;了解前沿算法&#xff0c;一起来测试下yolov8在…

【密码学复习】第十章 身份鉴别

身份鉴别的定义 定义&#xff1a;身份鉴别&#xff0c;又称为身份识别、身份认证。它是证实客户的真实身份与其所声称的身份是否相符的过程。 口令身份鉴别 固定口令&#xff08;四&#xff09; 注册环节&#xff1a;双因子认证 ① 接收用户提供的口令pw&#xff08;PIN&…

车辆救援道路救援预约汽修托运小程序

道路救援&#xff1a;指汽车道路紧急救援&#xff0c;为故障车主提供包括诸如&#xff1a;拖吊、换水、充电、换胎、送油以及现场小修等服务(Road-Side Service)&#xff1b; 同时也指交通事故道路救援&#xff0c;包括伤员救治、道路疏导等。 随着我国巨大的汽车拥有量&…

1计算机系统概述_1.2计算机系统层次结构

1.2 计算机系统层次结构 计算机系统&#xff08;CO 自命名&#xff09; 1、CO的组成 硬件系统和软件系统共同构成了一个完整的计算机系统 ——硬件&#xff1a;有形的物理设备&#xff0c;是CO中实际物理装置的总称 ——软件&#xff1a;在硬件上运行的程序和相关的数据及文…

SpringCloud:分布式缓存之Redis哨兵

Redis提供了哨兵&#xff08;Sentinel&#xff09;机制来实现主从集群的自动故障恢复。 1.哨兵原理 1.1.集群结构和作用 哨兵的结构如图&#xff1a; 哨兵的作用如下&#xff1a; 监控&#xff1a;Sentinel会不断检查您的master和slave是否按预期工作自动故障恢复&#xff…

人工智能(pytorch)搭建模型9-pytorch搭建一个ELMo模型,实现训练过程

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下人工智能(pytorch)搭建模型9-pytorch搭建一个ELMo模型&#xff0c;实现训练过程&#xff0c;本文将介绍如何使用PyTorch搭建ELMo模型&#xff0c;包括ELMo模型的原理、数据样例、模型训练、损失值和准确率的打印以及…

labelimg闪退解决方法(之前使用过labelimg,但新一次使用,打开文件夹无反应,再次打开闪退的问题)及标注经验

问题描述&#xff1a; 之前使用过labelimg进行好多次的标注&#xff0c;但新一次运行使用&#xff0c;发现打开目录无反应&#xff0c;再次打开闪退的问题&#xff0c;重启电脑并且从新运行labelimg仍然无效。 解决方法&#xff1a; 关闭labelimg&#xff0c;然后删除文件C…

一文纵览Umi‘s Friends生态,GameFi浪潮的变革者

以“P2E”为特性的 GameFi&#xff0c;代表着游戏时代的新盈利模式&#xff0c;它将 NFT 或其他形式的代币化资产作为游戏内容&#xff0c;游戏内资产的寿命会&#xff0c;则随着这些资产继续存在于玩家的钱包中而延长&#xff08;即便游戏关闭&#xff09;&#xff0c;资产的互…

class文件中,常量池、方法表、属性表,异常表等等相关数据解析!小白就跟我一起对照学【class字节码文件分析】

前言&#xff1a;前段时间读《深入java虚拟机》介绍到class文件的时候&#xff0c;由于理论知识较多&#xff0c;人总感觉疲惫不堪&#xff0c;就泛泛阅读了一下。在工作中使用起来知识点知道&#xff0c;但是总是需要查阅各种资料。今天有时间&#xff0c;继续整理常量池后面的…

session与cookie

session是一种会话机制。当客户端发送登录请求时&#xff0c;服务端会生成一个sessionId存储在cookie中返回给客户端&#xff0c;客户端通过响应数据中的set-cookie字段来获取cookie并保存。如果客户端再向同一网站发送请求时&#xff0c;会自动携带cookie&#xff0c;相当于一…

离散数学_十章-图 ( 5 ):连通性 - 下

&#x1f4f7;10.5 图的连通性 4. 有向图的连通性4.1 强连通4.2 弱连通4.3 &#xff08;有向图的&#xff09;强连通分支 5. 通路与同构6. 顶点间通路个数的计算 4. 有向图的连通性 根据是否考虑边的方向&#xff0c;在有向图中有两种连通性概念&#xff1a; 4.1 强连通 强连…

C/C++线程绑核详解

在一些大型的工程或者特殊场景中&#xff0c;我们会听到绑核&#xff0c;绑核分为进程绑核和线程绑核。绑核的最终目的都是为了提高程序和性能或者可靠性。 一&#xff1a;为什么需要绑核 操作系统发展至今&#xff0c;已经能很好的平衡运行在操作系统上层的应用&#xff0c;兼…