【CSS】常见的选择器

news2024/12/22 19:52:08

1.标签选择器

语法

标签 {
}

作用

标签选择器用于选择某种标签

比如

选择p标签,并设置背景颜色

p { 
	background-color:yellow;
}

例子

选择div标签,并将其字体大小设置为100px,字体设置为"微软雅黑",文字颜色设置为rgb(251, 114, 153)

<style>
     div {
         font-size: 100px;
         font-family:"微软雅黑";
         color: rgb(251, 114, 153);
     }
</style>

<div>hello</div>
<div>world</div>

效果

在这里插入图片描述

2.id选择器

语法

#id {
}

作用

为指定id的元素设置样式

比如

id="firstid" 的元素设置样式

#firstid { 
	background-color:yellow;
}

例子:

针对id="test1"id="test2"的两个元素各自设置样式。

<style>
     #test1 {
            font-size: 100px;
            color:cadetblue;
        }
     #test2 {
         font-size: 50px;
         color:rgb(251, 114, 153);
     }
</style>

<span id="test1">biubiubiu</span> <br/>
<span id="test2">bangbang</span>

效果:

在这里插入图片描述

3.类选择器

语法

.classname {

}

作用

为某一类元素设置样式

比如

class="firstclass"的元素设置样式。

.firstclass {
}

例子

<style>
	.type1 {
	           background-color:rgb(251, 114, 153);
	           font-size: 100px;
	           color: white;
	       }
</style>

<div class="type1">2022</div>
<br/>
<div class="type1">2023</div>

效果:

在这里插入图片描述

4.通配符选择器

语法

* {
	
}

作用

选择所有的标签

例子

为所有标签设置文字颜色

<style>
        * {
            color :rgb(251, 114, 153);
        }
</style>

 <div>
     abc
 </div>
 <span>
     def
 </span>

 <p>
     ghijklmn
 </p>

效果:

在这里插入图片描述

5.后代选择器

语法

元素1 元素2 元素3 ........{

}

后代选择器可以一直嵌套。

作用

选择父元素中的子元素

比如

div span {
}
.class1 span {
}
#output_div span {
}

例子

1.选择标签中的子标签

<style>
	div span {
	    font-size: 50px;
	    color: rgb(186, 134, 36);
	}
</style>

<div>
	  <span>
	       今天是星期3
	   </span>
</div>

<div>
	   <span>
	       明天是星期4
	   </span>
</div>

效果:

在这里插入图片描述

2.选择类中的子标签

<style>
	.class1 span {
		  font-size: 30px;
		  color: rgb(26, 191, 220);
	}
</style>

<div class="class1">
   <span>
        周一周一,眼睛咪咪
    </span>
    <br/>
    <span>
        周二周二,肚子很二
    </span>
</div>

效果:

在这里插入图片描述

3.选择一个元素中的子标签

<style>
	#hello_div span{
        background-color: rgb(16, 232, 142);
        font-size: 30px;
        color: white;
    }
</style>

<div id="hello_div">
    <span>
        hello
    </span>
    <span>
        world
    </span>
</div>

效果:

在这里插入图片描述

注意:
后代选择器可以有很多组合,可以一直嵌套,上面举的例子只是套了两层。

可以像下面这样一直嵌套:

div span ol li {

}

6.子选择器

语法

元素1>元素2 {

}

作用

选择儿子标签,不能选择孙子标签

比如

选择div标签中的儿子a标签

div>a {
}

例子

把 “小猫” 改成红色

<style>
        .animal>a {
            color : red;
        }
</style>

<div class="animal">
    <a href="#">小猫</a>
    <ul>
        <li><a href="#">小狗</a></li>
        <li><a href="#">小狗</a></li>
    </ul>
</div>

效果

在这里插入图片描述

7.并集选择器

语法

元素1,元素2 {

}

作用

用于选择多组标签. (集体声明)

比如

选择div 和 span,把文字颜色改为蓝色

div, span {
	color:blue;
}

例子

现有以下代码:

<div>苹果</div>
<h3>香蕉</h3>
<ul>
    <li>鸭梨</li>
    <li>橙子</li>
</ul>

1.将苹果和香蕉设置为粉色

div, h3 {
    color:pink;
}

效果

在这里插入图片描述

2.将苹果鸭梨和橙子设置为蓝色

div, ul>li {
    color:blue;
}

效果

在这里插入图片描述

8.伪类选择器

伪类(pseudo-class)用于定义元素的特殊状态。

语法

selector:pseudo-class {
  property: value;
}

作用

可以为元素处于某种状态时设置样式

比如

设置鼠标悬停在链接时的效果

a : hover {

}

例子

1.当鼠标悬停在链接上时,设置为绿色

<style>
        a:hover {
            color: green;
        }
</style>
	
<a href="https://www.baidu.com">百度</a>

效果

在这里插入图片描述

2.设置输入文本框在被选中时的样式

<style>
        input:focus{
            color: pink;
            background-color: black;
        }
</style>
	
<input type="text">

效果

在这里插入图片描述

全部伪类:

请添加图片描述

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

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

相关文章

怎么学习渗透测试?路线是什么

我知道很多人肯定觉得&#xff0c;报班什么的太贵了&#xff0c;但是人家贵有贵的道理 owap讲来讲去&#xff0c;还是那个样&#xff0c;但是有人给你解答问题是两个概念&#xff0c;有时候一个虚拟机都能卡死你很久&#xff0c;我就随便说说&#xff0c;我给你们想的学习路线…

2023网络安全工程师面试题汇总(附答案)

又到了毕业季&#xff0c;大四的漂亮学姐即将下架&#xff0c;大一的小学妹还在来的路上&#xff0c;每逢这时候我心中总是有些小惆怅和小激动…… 作为学长&#xff0c;还是要给这些马上要初出茅庐的学弟学妹们&#xff0c;说说走出校园、走向职场要注意哪些方面。 走出校园后…

基于XC7Z100的PCIe采集卡(GMSL FMC采集卡)

GMSL 图像采集卡 特性 ● PCIe Gen2.0 X8 总线&#xff1b; ● 支持V4L2调用&#xff1b; ● 1路CAN接口&#xff1b; ● 6路/12路 GMSL1/2摄像头输入&#xff0c;最高可达8MP&#xff1b; ● 2路可定义相机同步触发输入/输出&#xff1b; 优势 ● 采用PCIe主卡与FMC子…

服务器是什么?它是用来干什么的?

作者&#xff1a;Insist-- 个人主页&#xff1a;insist--个人主页 作者会持续更新网络知识和python基础知识&#xff0c;期待你的关注 目录 一、服务器是什么&#xff1f; 二、服务器的作用 1、提高访问速度 2、提高安全性 三、云服务器与物理服务器 1、云服务器 云服务…

[架构之路-210]- 人人都是产品经理 - 互联网产品需求分析思路和方法笔记

目录 前言&#xff1a; 一、产品需求分析思路和方法--产品需求 1、产品需求的内涵 ①什么是产品&#xff1f; ②什么是需求&#xff1f; ③需求的产品的关系 ④案例分析&#xff1a; ⑤理解需求的误区 2、需求的分类及层次、规律、拆解用户需求 ①需求分类 ②需求层…

算法刷题-链表-设计链表

设计链表 707.设计链表思路代码其他语言版本 听说这道题目把链表常见的五个操作都覆盖了&#xff1f; 707.设计链表 力扣题目链接 题意&#xff1a; 在链表类中实现这些功能&#xff1a; get(index)&#xff1a;获取链表中第 index 个节点的值。如果索引无效&#xff0c;则…

MySQL数据库,从入门到精通:第二篇——MySQL关系型数据库与非关系型数据库的比较

MySQL数据库&#xff0c;从入门到精通&#xff1a;第二篇——MySQL关系型数据库与非关系型数据库的比较 1. RDBMS 与 非RDBMS1.1 关系型数据库(RDBMS)1.1.1 实质1.1.2 优势1.2 非关系型数据库(非RDBMS)1.2.1 介绍1.2.2 有哪些非关系型数据库1.2.3 NoSQL的演变1.3 小结 2. 关系型…

SQL开源替代品,诞生了

发明 SQL 的初衷之一显然是为了降低人们实施数据查询计算的难度。SQL 中用了不少类英语的词汇和语法&#xff0c;这是希望非技术人员也能掌握。确实&#xff0c;简单的 SQL 可以当作英语阅读&#xff0c;即使没有程序设计经验的人也能运用。 然而&#xff0c;面对稍稍复杂的查…

Python+QT停车场车牌识别计费管理系统-升级版

程序示例精选 PythonQT停车场车牌识别计费管理系统-升级版 如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对<<PythonQT停车场车牌识别计费管理系统-升级版>>编写代码&#xff0c;代…

RabbitMQ入门案例之Direct模式

前言 RabbitMQ的Direct模式是一种可以根据指定路由key&#xff0c;Exchang将消息发送到具有该路由key下的Queue下进行存储。也就类似于将数据写进指定数据库表中。这个路由Key可以类比为SQL语句中的&#xff1a;where routeKey … 官方文档地址&#xff1a;https://www.rabbi…

DragGAN部署全流程

写在前面 看了DragGAN 官方&#xff0c;并没有找到软件&#xff0c;或者程序&#xff0c;github上也没有程序&#xff0c;如果大佬们能找到&#xff0c;可以评论通知下。不过也有技术大佬已经提前开发出来了&#xff0c;我们抢先体验下。 这里本地部署了 DragGAN。经历了报错&…

【LeetCode】HOT 100(5)

题单介绍&#xff1a; 精选 100 道力扣&#xff08;LeetCode&#xff09;上最热门的题目&#xff0c;适合初识算法与数据结构的新手和想要在短时间内高效提升的人&#xff0c;熟练掌握这 100 道题&#xff0c;你就已经具备了在代码世界通行的基本能力。 目录 题单介绍&#…

CTFShow-WEB入门篇--命令执行详细Wp

WEB入门篇--命令执行详细Wp 命令执行&#xff1a;Web29&#xff1a;Web30&#xff1a;Web31&#xff1a;web32&#xff1a;web33&#xff1a;web34&#xff1a;web35&#xff1a;web36&#xff1a;web37&#xff1a;web38&#xff1a; CTFShow 平台&#xff1a;https://ctf.sho…

【Kubernetes资源篇】Service四层代理入门实战详解

文章目录 一、Service四层代理概念、原理1、Service四层代理概念2、Service工作原理3、Service原理解读4、Service四种类型 二、Service四层代理三种类型案例1、创建ClusterIP类型Service2、创建NodePort类型Service3、创建ExternalName类型Service 三、拓展1、Service域名解析…

Nvidia AGX Orin MAX9296 GMSL 载板设计要点

因为项目的需求&#xff0c;我们设计了Nvidia AGX Orin MAX9296 GMSL 载板(绿板&#xff09;&#xff0c;项目完成&#xff0c;总结以下。需要参考原理图的&#xff0c;可以微我&#xff0c;索取。共同交流。 Jetson AGX Orin建立在NVIDIA Ampere架构之上&#xff0c;全新Jets…

AUTOSAR-BSW EEPROM模块解读

参考文件 AUTOSAR_SWS_EEPROMDriver&#xff08;4.3.0&#xff09; AUTOSAR_SWS_BSWGeneral&#xff08;4.3.0&#xff09; EEPROM Module 文件结构 如上图所示 EEPROM Module应该主要包含Eep.c,Eep.h,Eep_Cfg.c,Eep_MemMmap.h,Eep_Lcfg.c和Eep_PBcfg.c文件&#xff0c;如果使…

图像分类模型嵌入flask中开发PythonWeb项目

图像分类模型嵌入flask中开发PythonWeb项目 图像分类是一种常见的计算机视觉任务&#xff0c;它的目的是将输入的图像分配到预定义的类别中&#xff0c;如猫、狗、花等。图像分类模型是一种基于深度学习的模型&#xff0c;它可以利用大量的图像数据来学习图像的特征和类别之间…

华为OD机试之找终点

找终点 题目描述 给定一个正整数数组&#xff0c;设为nums&#xff0c;最大为100个成员&#xff0c;求从第一个成员开始&#xff0c;正好走到数组最后一个成员&#xff0c;所使用的最少步骤数。 要求&#xff1a; 第一步必须从第一元素开始&#xff0c;且1<第一步的步长<…

100天精通Golang(基础入门篇)——第3天:Go语言的执行原理及常用命令、编码规范和常用工具

&#x1f337; 博主 libin9iOak带您 Go to Golang Language.✨ &#x1f984; 个人主页——libin9iOak的博客&#x1f390; &#x1f433; 《面试题大全》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &#x1f30a; 《I…

java进阶—线程间通信(通俗易懂等待唤醒机制)

今天我们来看一看&#xff0c;线程之间的通信&#xff0c;也就是我们所说的等待唤醒机制 先来看三个关键方法: wait(); 当线程执行这个方法&#xff0c;它就会进入阻塞状态&#xff0c;并且释放同步监视器 notify(); 英文翻译 唤醒&#xff0c;就是说会唤醒wait的线程&…