CSS常用选择器(通配符选择器,标签选择器,类选择器,id选择器……),你知道了多少?

目录

CSS常用选择器

一、什么是选择器

二、通配符选择器

基本语法格式:

三、标签选择器

基本语法格式:

四、类选择器

基本语法格式:

五、id选择器

基本语法格式:

六、类选择器还是 ID 选择器?

区别 1:只能在文档中使用一次

区别 2:不能使用 ID 词列表

区别 3:ID 能包含更多含义


CSS常用选择器

css常用的选择器有很多种,如通配符选择器、标签选择器、类选择器等

CSS选择器的作用是从HTML页面中找出特定的某类元素,而常用的CSS选择器有如下几类,一起来看看吧!

一、什么是选择器

每一条css样式声明由两部分组成,如下:

选择器{样式;
}

在css中{}之前的部分就是"选择器","选择器"指明了{}中的”样式“的作用对象,也就是说该”样式“作用与网页中的哪些元素。

二、通配符选择器

通配符选择器常用 ‘*’ 号表示,它是所有选择器里作用范围最广的,能匹配页面中所有的元素。

基本语法格式:

*{ 属性1:属性值1;属性2:属性值2;}

例子
使用该选择器定义样式,清除所有HTML标记的默认边距。

*{
margin:0;       /*定义外边距*/
padding:0;     /*定义内边距*/
}

三、标签选择器

标签选择器是指用HTML标记名称作为选择器,按标记名称分类,为页面中某一类标签指定统一的CSS样式。

基本语法格式:

标签名{ 属性1:属性值1;属性2:属性值2;}

所有的HTML标记名都可以作为标签选择器,例如a、body、p、h1等等。用标签选择器定义的样式对页面中该类型的所有标签都有效。

例子
使用p选择器定义HTML页面中所有段落的样式。

p{ font-size: 12px; color: #666; font-family:"微软雅黑"; }

标签选择器最大的优势是能快速为页面中同类型的标签统一样式,同时这也是它的缺点,不能设计差异化样式。

四、类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。

该选择器可以单独使用,也可以与其他元素结合使用。

类选择器使用**‘.’**(英文点号)进行标识,后面紧跟类名。

基本语法格式:

 . 类名{ 属性1:属性值1;属性2:属性值2;}

该语法中,类名即为HTML元素的class属性值,大多数HTML元素都可以定义class属性。

例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style type="text/css">
.red{color: red;}
.green{color:green;}
.font22{font-size:22px;}
p{ text-decoration:underline; font- family:"微软雅黑"; }
</style>
</head>
<body>
<h2 class="red">二级标题文本</h2>
<p class-"green font22">段落文本内容</p>
<p class="red font22">段落二文本内容</p>
<p>段落三文本内容</p>
</body>
</html>

类选择器最大的优点是可以为元素对象定义单独或相同的样式,而且多个标记可以使用同一个类名,可以实现为不同类型的标记指定相同的样式。同时,一个HTML元素也可以应用多个class类,设置多个样式,此时多个类名之间需要用空格隔开,如上述代码中的前两个<p>标记。

注意:类名的第一个字符不能使用数字,并且严格区分大小写。一般采用小写的英文字符。

五、id选择器

ID 选择器允许以一种独立于文档元素的方式来指定样式;在某些方面,ID 选择器类似于类选择器,不过也有一些重要差别。

基本语法格式:

#id名 { 属性1:属性值1;属性2:属性值2;}

例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style type="text/css">
#red{color: red;}
#green{color:green;}
#font22{font-size:22px;}
p{ text-decoration:underline; font- family:"微软雅黑"; }
</style>
</head>
<body>
<h2 id="red">二级标题文本</h2>
<p id-"green font22">段落文本内容</p>
<p id="red font22">段落二文本内容</p>
<p>段落三文本内容</p>
</body>
</html>

id选择器跟类选择器最大的区别是id选择器只能在文档中使用一次,而类选择器可重复使用。

六、类选择器还是 ID 选择器?

在类选择器这一章中我们曾讲解过,可以为任意多个元素指定类。前一章中类名 important 被应用到 p 和 h1 元素,而且它还可以应用到更多元素。

区别 1:只能在文档中使用一次

与类不同,在一个 HTML 文档中,ID 选择器会使用一次,而且仅一次。

区别 2:不能使用 ID 词列表

不同于类选择器,ID 选择器不能结合使用,因为 ID 属性不允许有以空格分隔的词列表。

区别 3:ID 能包含更多含义

类似于类,可以独立于元素来选择 ID。有些情况下,您知道文档中会出现某个特定 ID 值,但是并不知道它会出现在哪个元素上,所以您想声明独立的 ID 选择器。例如,您可能知道在一个给定的文档中会有一个 ID 值为 mostImportant 的元素。您不知道这个最重要的东西是一个段落、一个短语、一个列表项还是一个小节标题。您只知道每个文档都会有这么一个最重要的内容,它可能在任何元素中,而且只能出现一个。在这种情况下,可以编写如下规则:

#mostImportant {color:red; background:yellow;}

 这个规则会与以下各个元素匹配(这些元素不能在同一个文档中同时出现,因为它们都有相同的 ID 值):

<h1 id="mostImportant">This is important!</h1>
<em id="mostImportant">This is important!</em>
<ul id="mostImportant">This is important!</ul>

多多转发、点赞、评论、谢谢大家,让更多人受益!!!

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

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

相关文章

芯片设计后端遇到的各种文件类型和文件后缀

芯片设计后端遇到的各种文件类型和文件后缀 文件类型 描述 文件后缀 netlist网表文件 verilog文件格式&#xff0c;记录了芯片里各个instance的逻辑连接关系 .v (for Verilog netlists) Lib&#xff0c;liberty timing file 记录了cell的timing信息及一定power信息。有的…

Python自动化测试:API接口自动化——requests、webSocket

接口自动化测试1 一、requests二、简单示例1.导入/引入库2.请求与响应示例1>简单访问百度主页-GET请求2>简单的登录请求-POST请求3>保存cookies至头信息headers4>其他接口请求时携带headers 三、webSocketwebSocket连接与数据收发示例 本文介绍了借助Python的reque…

leetcode-重复的子字符串

459. 重复的子字符串 题解&#xff1a; 首先&#xff0c;我们需要找到字符串s的所有子串。然后&#xff0c;我们需要检查这些子串是否可以通过重复多次构成原字符串s。如果找到了这样的子串&#xff0c;返回True&#xff0c;否则返回False。 class Solution:def repeatedSub…

什么是同源策略?如何检测跨站点 WebSocket 劫持漏洞?post 表单跳转跨域问题、Ajax跨域请求、浏览器特性和安全策略、WebSocket 协议连接

什么是同源策略?如何检测跨站点 WebSocket 劫持漏洞?post 表单跳转跨域问题、Ajax跨域请求、浏览器特性和安全策略、WebSocket 协议连接。 同源策略(Same Origin Policy)是一种浏览器安全机制,用于保护用户的信息和数据安全。它限制了来自不同源(协议、域名、端口)的网页…

华为手环 8:返校季新宠,助力高效学习与健康生活

随着春节假期的结束&#xff0c;学生们也纷纷踏上了返校的旅途。新的学期&#xff0c;新的气象&#xff0c;让华为手环8为你的带来全新的智能生活体验。它不仅仅是一款风格多变的时尚手环&#xff0c;还拥有了智能消息提醒、100多种运动模式和睡眠监测等强大功能&#xff0c;让…

计算机设计大赛 深度学习疲劳驾驶检测 opencv python

文章目录 0 前言1 课题背景2 实现目标3 当前市面上疲劳驾驶检测的方法4 相关数据集5 基于头部姿态的驾驶疲劳检测5.1 如何确定疲劳状态5.2 算法步骤5.3 打瞌睡判断 6 基于CNN与SVM的疲劳检测方法6.1 网络结构6.2 疲劳图像分类训练6.3 训练结果 7 最后 0 前言 &#x1f525; 优…

基于springboot实现粮食仓库管理系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现粮食仓库管理系统演示 摘要 粮食作为人类生活的重要物质来源&#xff0c;在粮食流通过程中对于粮食仓库的管理不容忽视&#xff0c;随着我国粮食生产能力的提升以粮食存储管理的不断革新&#xff0c;粮食产量的增加为粮食仓储管理带来了挑战也带来了机遇&am…

蜂窝物联:物联网大数据云平台功能模块简介

蜂窝云平台可远程获取现场环境&#xff08;如温室大棚、稻田&#xff09;的空气温湿度、土壤水分温度、二氧化碳浓度、光照强度及视频图像&#xff0c;通过数据模型分析&#xff0c;可以自动控制湿帘、风机、喷淋滴灌、内外遮阳、顶窗侧窗、加温补光、增氧机等设备&#xff1b;…

Java零基础-包机制

哈喽&#xff0c;各位小伙伴们&#xff0c;你们好呀&#xff0c;我是喵手。 今天我要给大家分享一些自己日常学习到的一些知识点&#xff0c;并以文字的形式跟大家一起交流&#xff0c;互相学习&#xff0c;一个人虽可以走的更快&#xff0c;但一群人可以走的更远。 我是一名后…

实践课项目化

程序设计实践 项目内容&#xff1a; 这是一门物联网工程专业的必修课程&#xff0c;基于大学计算机基础和C编程课程&#xff0c;要求使用C语言设计和实现一个小型信息管理系统。课程提供两个小项目供学生选择&#xff0c;学生分组完成其中一个项目&#xff0c;每组5人。 成果…

MySQL面试题-锁(答案版)

锁 1、MySQL 有哪些锁&#xff1f; &#xff08;1&#xff09;全局锁 加了全局锁之后&#xff0c;整个数据库就处于只读状态了&#xff0c;这时其他线程执行以下操作&#xff0c;都会被阻塞&#xff1a; 对数据的增删改操作&#xff0c;比如 insert、delete、update等语句&…

C# 异步操作汇总

在C#中&#xff0c;异步操作&#xff08;Asynchronous Operations&#xff09;可以提高程序的性能和响应能力。通常情况下&#xff0c;程序会等待某个操作完成之后才会继续执行下一个操作&#xff0c;这会导致程序的运行速度变慢。而异步操作可以让程序在等待某个操作完成的同时…

【深度学习笔记】计算机视觉——R-CNN

区域卷积神经网络&#xff08;R-CNN&#xff09;系列 sec_rcnn 除了 sec_ssd中描述的单发多框检测之外&#xff0c; 区域卷积神经网络&#xff08;region-based CNN或regions with CNN features&#xff0c;R-CNN&#xff09; Girshick.Donahue.Darrell.ea.2014也是将深度模型…

Bagels系列|python小程序随手记

来自《The Big Book of Small Python Projects》 import randomNUM_DIGITS 3 MAX_GUESSES 10 def main():print(Bagels, a deductive logic game. I am thinking of a {}-digit number with no repeated digits. Try to guess what it is. Here are some clues: When I sa…

知识图谱辅助的个性化推荐系统

知识图谱辅助的个性化推荐系统 将从下面4个方面展开&#xff1a; 推荐系统的基础知识知识图谱辅助的推荐方法介绍基于embedding的知识图谱推荐方法混合型知识图谱推荐方法 推荐系统的基础知识 1、什么是推荐系统 在当前互联网时代&#xff0c;推荐系统是所有面向用户的互联…

【深度学习笔记】计算机视觉——多尺度目标检测

多尺度目标检测 在 sec_anchor中&#xff0c;我们以输入图像的每个像素为中心&#xff0c;生成了多个锚框。 基本而言&#xff0c;这些锚框代表了图像不同区域的样本。 然而&#xff0c;如果为每个像素都生成的锚框&#xff0c;我们最终可能会得到太多需要计算的锚框。 想象一…

速盾cdn:快速高防cdn加速

速盾CDN&#xff08;Sudun CDN&#xff09;是一种快速高防CDN加速服务&#xff0c;CDN&#xff08;内容分发网络&#xff09;是一种通过在全球各地部署服务器节点来加速网站内容传输的技术&#xff0c;可以提高网站的访问速度和稳定性。 传统的网络架构通常会面临一些问题&…

SQL教学: MySQL高级数据操作--深入理解DML语句的技巧与策略

欢迎回到我们的SQL-DML语句教学系列。在之前的文章中&#xff0c;我们已经介绍了DDL语句的基础知识&#xff0c;以及DML语句的基本操作和进阶用法。今天&#xff0c;我们将进一步深入探讨DML语句的高级用法&#xff0c;包括合并查询、索引使用、锁机制以及性能优化等方面的内容…

【PHP】PHP实现与硬件串口交互,向硬件设备发送指令数据(下)

目录 一、前言 二、 效果图 三、安装PHP扩展 四、添加模拟串口 五、PHP发送数据给硬件 PHP代码 前端代码 一、前言 上篇文章写到PHP怎么与硬件串口交互之实时接收硬件发送的数据&#xff0c;这里同样是以天平为例&#xff0c;介绍怎么向硬件设备发送数据&#xff0c; 需…

python常见面试题汇总

在Python面试中&#xff0c;常见的面试问题可以覆盖基础语法、面向对象编程、数据处理和分析&#xff0c;以及特定库的掌握。以下是你可能在面试中遇到的一些典型问题和相应的答案。 基础语法问题&#xff1a; 解释Python中的列表和元组之间的主要区别是什么&#xff1f; 列表是…