CSS简单的选择器

标签选择器

与网页元素同名的选择器。常用于与设置网页默认效果,或者统一常用元素的基本样式。

p{
	font-size:10px;
}

类选择器

可以为网页对象定义不同的样式,实现不同元素拥有相同的样式,相同元素的不同对象拥有不同的样式。以一个点(.)前缀开头,然后跟随一个自定义类名。

<p class='font_12'>12</p>
<p>13</p>
<p>14</p>
.font_12{font-size:18px}

与标签选择器组合限定类选择器的使用范围

<div class="mi">李子奇</div>
		<p class="mi">嫦娥应悔偷灵药,碧海青天夜夜心。”这是唐代诗人李商隐《嫦娥》诗中的两句。嫦娥奔月的故事,早在我国现代就遍及地流传着。</p>
p.mi{
	font-size: 21px;
}

ID选择器

指标签在HTML文档中的唯一编号。只能定义一个对象的样式,以#号作为前缀,然后自定义一个ID名。

<p id="mili">相传嫦娥是天帝的侄女。她长得漂亮,天帝很喜欢她,她要什么,天帝就给她什么。她在天宫中过着优裕的生活。</p>
#mili{
	color: red;
}

通配选择器

用来定义所有元素都需要的相同样式。

*{margin:0;
padding:0;}

复合选择器

子选择器

父元素所包含的子元素,使用>表示

<body>
<div class="mi">李子奇</div>
<p class="mi">嫦娥应悔偷灵药,碧海青天夜夜心。”这是唐代诗人李商隐《嫦娥》诗中的两句。嫦娥奔月的故事,早在我国现代就遍及地流传着。</p>
</body>
body>p{
	width: 100px;
	height: 20px;
	background-color: aqua;
}

相邻选择器

通过相邻的兄弟元素来互相控制,就是指定一个元素相邻的下一个元素的样式。用+表示。

<body>
<div class="mi">李子奇</div>
<p class="mi">嫦娥应悔偷灵药,碧海青天夜夜心。”这是唐代诗人李商隐《嫦娥》诗中的两句。嫦娥奔月的故事,早在我国现代就遍及地流传着。</p>
</body>
div+p{
	width: 100px;
	height: 20px;
	background-color: aqua;
}

包含选择器

通过空格标识符来表示包含框对象的选择器,而后面的选择器表示被包含的选择器。

<p class="mi">嫦娥应悔偷<span>灵药</span>,碧海青天夜夜心。”这是唐代诗人李商隐《嫦娥》诗中的两句。嫦娥奔月的故事,早在我国现代就遍及地流传着。</p>
.mi span{
	background-color: red;
}

多层选择器嵌套

CSS可以使用选择器嵌套来实现对HTML结构中纵深元素的控制。

<body>
<p class="mi">嫦娥应悔偷<span>灵药</span>,碧海青天夜夜心。”这是唐代诗人李商隐《嫦娥》诗中的两句。嫦娥奔月的故事,早在我国现代就遍及地流传着。</p>
</body>
body p span{
	background-color: blue;
}

属性选择器

属性选择器就是利用网页标签包含的属性及其属性值来定义特定对象或一定范围元素的样式。属性选择器一般是一个元素后面紧跟中括号,中括号内市是属性或属性表达式。
1.匹配属性名选择器

	<body>
		<div class="mi">李子奇</div>
		<p class="mi">嫦娥应悔偷<span>灵药</span>,碧海青天夜夜心。”这是唐代诗人李商隐《嫦娥》诗中的两句。嫦娥奔月的故事,早在我国现代就遍及地流传着。</p>
  <p id="mili">相传嫦娥是天帝的侄女。她长得漂亮,天帝很喜欢她,她要什么,天帝就给她什么。她在天宫中过着优裕的生活。</p>
  </body>
p[class]{
}

2.匹配属性值选择器

	<p id="mili">相传嫦娥是天帝的侄女。她长得漂亮,天帝很喜欢她,她要什么,天帝就给她什么。她在天宫中过着优裕的生活。</p>
  <p id="liyi">后羿是天帝手下的一员大将,练就一身好武艺,射箭的技能很高,百步之外,百发百中。</p>
p[id="liyi"]{

}

3.模糊匹配属性值选择器
[|=]:连字符匹配,以连字符为分隔符,匹配属性值中局部字符串
[~=]:空白符匹配,以空白符为分隔符,匹配属性值中局部字符串
[^=]:前缀匹配,匹配属性值中的起始字符
[$=]:后缀匹配,匹配属性值中的结束字符
[*=]:字符串匹配,匹配属性值存在的指定字符

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

单分支:if语句

示例&#xff1a; /*** brief how about if? show you here.* author wenxuanpei* email 15873152445163.com(query for any question here)*/ #define _CRT_SECURE_NO_WARNINGS//support c-library in Microsoft-Visual-Studio #include <stdio.h>#define if_state…

学习笔记------约束的管理

此篇记录FPGA的静态时序分析&#xff0c;在学习FPGA的过程中&#xff0c;越发觉得对于时序约束只是懂了个皮毛。现在记录一下自己的学习过程。 本文摘自《VIVADO从此开始》高亚军 为什么要进行约束&#xff1f;约束的目的是什么&#xff1f; 简单来说&#xff0c;就是需要在…

Unity(MVC思想)

MVC 一下演示使用MVC和不使用MVC的做法区别。 前两个没有使用MVC 主面板逻辑&#xff1a; mainPanel是该脚本名字 每个场景中不一定存在该面板&#xff0c;单纯的显隐需要去手动挂载过于麻烦。 所以自己读取创建面板出来(每个场景仅创建一次)&#xff0c;存下该面板&#xf…

OpenHarmony网络请求库-httpclient

简介 HTTP是现代应用程序通过网络交换数据和媒体的的主要方式。httpclient是OpenHarmony 里一个高效执行的HTTP客户端&#xff0c;使用它可使您的内容加载更快&#xff0c;并节省您的流量。httpclient以人们耳熟能详的OKHTTP为基础&#xff0c;整合android-async-http&#xf…

FPGA核心板在声呐系统中的应用

前言 声纳系统使用声脉冲来探测、识别和跟踪水下物体。一个完整的声纳系统是由一个控制和显示部件、一个发射器电路、一个接收器电路和同时能作为发射装置&#xff08;扬声器&#xff09;和探测装置&#xff08;高灵敏度麦克风&#xff09;的传感器组成。 声纳系统图 技术挑战…

list基础知识

list 1.list 的定义和结构 list 是双向链表&#xff0c;是C的容器模板&#xff0c;其接收两个参数&#xff0c;即 list(a,b) 其中 a 表示指定容器中存储的数据类型&#xff0c;b 表示用于分配器内存的分配器类型&#xff0c;默认为 list <int>; list 的特点&#xff1a;…

鸿蒙开发岗突增!它和前端开发到底有哪些区别和联系?

2024年1 月 18 日&#xff0c;鸿蒙 Next 预览版面向开发者正式开放申请。至此&#xff0c;鸿蒙原生应用版图已成型&#xff0c;这个中国自主研发的操作系统&#xff0c;正式走上了独立之路。 有许多的公司都陆续地加入了鸿蒙原生应用开发的队列&#xff0c;从年初宣布的200个应…

MySQL高负载排查方法最佳实践(15/16)

高负载排查方法 CPU占用率过高问题排查 使用mpstat查看cpu使用情况。 # mpstat 是一款 CPU 性能指标实时展示工具 # 能展示每个 CPU 核的资源视情况&#xff0c;同时还能将资源使用情况进行汇总展示 # 如果CPU0 的 %idle 已经为 0 &#xff0c;说明此核已经非常繁忙# 打印所…

京西商城——前端项目的创建以及前后端联调

创建VUE项目 在jingxi_shop_project文件夹中再创建一个 frontend 文件夹用来存放前端项目 /jingxi_shop_project/backend/jingxi_shop_project....../frontend/jingxi_shop_web......首先要安装 node.js 和 VUE cli&#xff0c;进入到项目目录内创建项目 vue create jingxi_…

【JavaEE多线程】Thread类及其常见方法(上)

系列文章目录 &#x1f308;座右铭&#x1f308;&#xff1a;人的一生这么长、你凭什么用短短的几年去衡量自己的一生&#xff01; &#x1f495;个人主页:清灵白羽 漾情天殇_计算机底层原理,深度解析C,自顶向下看Java-CSDN博客 ❤️相关文章❤️&#xff1a;清灵白羽 漾情天…

类和对象(中)(构造函数、析构函数和拷贝构造函数)

1.类的六个默认成员函数 任何类在什么都不写时&#xff0c;编译器会自动生成以下6个默认成员函数。 //空类 class Date{}; 默认成员函数&#xff1a;用户没有显示实现&#xff0c;编译器会自动生成的成员函数称为默认成员函数 2.构造函数 构造函数 是一个 特殊的成员函数&a…

接口自动化入门: Http请求的域名与IP地址概念!

在进行接口自动化测试时&#xff0c;经常需要与服务器进行通信&#xff0c;这就涉及到了使用Http协议发送请求。在发送请求时&#xff0c;我们需要指定目标服务器的域名或者IP地址。下面将从0到1详细介绍域名与IP地址的概念及其在接口自动化测试中的应用。 本文从5个方面来书写…

3D可视化技术:研发基地的科技新篇章

在科技日新月异的今天&#xff0c;我们生活在一个充满无限可能性的时代。而在这个时代中&#xff0c;3D可视化技术正以其独特的魅力&#xff0c;引领着科技领域的新一轮变革。 3D可视化技术通过三维图像的方式&#xff0c;将现实世界或虚拟世界中的物体、场景等以立体、逼真的形…

改进下记录学习的小网站

Strong改进 结束&#xff1a;2024-4-14 打算投入&#xff1a;10h 实际消耗&#xff1a;12h 3m 学习总是不在状态。 我的时间花得很零散&#xff0c;也有点茫然。所以想尝试一下集中式地、一块一块地花&#xff0c;比如投入30个小时&#xff0c;去干一件事&#xff0c;这样就可…

npm怎么迁移到pnpm

下载的vue3模板用到了pnpm&#xff0c;就安装了一下 但是安装之后使用pnpm install 就发现包全被移动到ignored文件夹下面了,还报错 PS G:\Projects\gitProeject\TS_front> pnpm installWARN  Moving commitlint/config-conventional that was installed by a different …

继电器会不会被淘汰?

继电器作为一种电控制器件&#xff0c;其基本功能是在输入量达到一定条件时&#xff0c;使电气输出电路中的被控量发生预定的阶跃变化。 尽管现代电子技术发展迅速&#xff0c;新型产品不断涌现&#xff0c;但继电器因其独特的优势在许多应用领域仍然不可替代。 技术优势&#…

git 删除本地分支 删除远程仓库中的分支

语法&#xff1a; 删除本地分支 git branch -D <分支名>删除远程分支 git push <remote名称> <分支名> --delete 示例&#xff1a; 删除本地分支 git branch -D feature/test_listview删除远程分支 git push origin feature/test_listview --delete 两个…

FebHost:谁可以注册.CA加拿大域名?

在加拿大&#xff0c;互联网域名的注册管理遵循一套独特的规则。特别是对于代表加拿大身份的顶级域名“.ca”&#xff0c;其申请和注册过程涉及一些严格的条件。这些条件确保了只有符合特定标准的个人或实体才能获得这一具有国家象征意义的网络地址。 首先&#xff0c;想要注册…

实战1-批量爬取百度图片(上)

任务需求&#xff1a;输入关键字下载100个图片保存到本地&#xff0c;每个关键字单独存放一个文件夹&#xff08;GUI版&#xff09; 任务描述&#xff1a;当输入关键字时会爬取100个与关键词有关的图片到本地每个关键词单独保存到一个文件夹中&#xff0c;比如说我输入黑客下载…

Arduino源代码(ino)在Proteus中调试总结

一、前言 基于BluePill Plus开发板&#xff08;该板是毕设网红板&#xff09; BluePill Plus / WeAct Studio 微行工作室 出品 BluePill-Plus/README-zh.md at master WeActStudio/BluePill-Plus GitHub 首页-WeAct Studio-淘宝网 (taobao.com) 在Proteus中对应的例子是&…