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.mzph.cn/pingmian/193.shtml

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

相关文章

Root mapping definition has unsupported parameters: [all : {analyzer=ik_max_wor

你们好&#xff0c;我是金金金。 场景 我正在使用Springboot整合elasticsearch&#xff0c;在创建索引(分词器) 运行报错&#xff0c;如下 排查 排查之前我先贴一下代码 import org.elasticsearch.action.admin.indices.create.CreateIndexRequest; // 注意这个包SpringBootTe…

文字转语音工具:GPT-SoVITS

诸神缄默不语-个人CSDN博文目录 OpenAI官方的TTS模型我在这篇博文中给出了使用教程&#xff1a;ChatGPT 3.5 API的调用不全指南&#xff08;持续更新ing…&#xff09; - 知乎 但是OpenAI的TTS对中文支持不好&#xff0c;有一种老外说中文的美&#xff0c;所以本文介绍另一个…

windows@允许挂载http链接@挂载局域网http链接

文章目录 资源管理器挂载网络驱动器&#x1f47a;允许http链接映射为磁盘驱动器&#x1f60a;可选更改:文件大小限制 刷新使配置生效重启webclient服务 基本操作执行映射取消映射 资源管理器挂载网络驱动器&#x1f47a; 对于共享文件夹(smb)协议(\\server\sharefolder)类型的…

自己的事情自己做:使用 Python Turtle 绘制 Python Logo

以下代码中&#xff0c;将向你展示一个有趣的程序&#xff0c;如何使用 Python Turtle 中绘制 Python Logo。Python 翻译成汉语是蟒蛇的意思&#xff0c;Python 的 Logo 也是两条缠绕在一起的蟒蛇。 import turtlepen turtle.Turtle() turtle.bgcolor("black") pe…

ins视频批量下载,instagram批量爬取视频信息【爬虫实战课1】

简介 Instagram 是目前最热门的社交媒体平台之一,拥有大量优质的视频内容。但是要逐一下载这些视频往往非常耗时。在这篇文章中,我们将介绍如何使用 Python 编写一个脚本,来实现 Instagram 视频的批量下载和信息爬取。 我们使用selenium获取目标用户的 HTML 源代码,并将其保存…

Python路面车道线识别偏离预警

程序示例精选 Python路面车道线识别偏离预警 如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对《Python路面车道线识别偏离预警》编写代码&#xff0c;代码整洁&#xff0c;规则&#xff0c;易…

AOP动态修改注解值及异步子线程请求头丢失问题

1、动态注入参数&#xff1a;通过AOP注解占位符&#xff0c;匹配目标方法参数&#xff0c;可用于日志记录等场景 AOP 注解动态注入参数 - 简书 2、spel表达式匹配目标方法的参数进行动态入参 自定义注解动态入参绑定_注解参数值动态注入-CSDN博客 3、Java没有提供直接设置线…

Leetcode 225:用队列实现栈

请你仅使用两个队列实现一个后入先出&#xff08;LIFO&#xff09;的栈&#xff0c;并支持普通栈的全部四种操作&#xff08;push、top、pop 和 empty&#xff09;。 实现 MyStack 类&#xff1a; void push(int x) 将元素 x 压入栈顶。int pop() 移除并返回栈顶元素。int to…

tsconfig.json文件常用配置

最近在学ts&#xff0c;因为tsconfig的配置实在太多啦&#xff0c;所以写此文章用作记录&#xff0c;也作分享 作用&#xff1f; tsconfig.jsono是ts编译器的配置文件&#xff0c;ts编译器可以根据它的信息来对代码进行编译 初始化一个tsconfig文件 tsc -init配置参数解释 …

测试 rtpengine 的 sip-source 参数

修改 /etc/rtpengine/rtpengine.conf 文件&#xff0c;增加一行配置&#xff1a; sip-source true # 一般不需要这样配置&#xff0c;本文仅为说明问题 offfer 部分的日志如下&#xff1a; [1713246486.390578] DEBUG: [1-5025192.168.43.126]: [control] Dump for offer from…

HZNUCTF第五届校赛实践赛初赛 Web方向 WriteUp

ezssti 很简单的ssti 源码给了&#xff0c;调用Eval即可执行命令 package mainimport ("fmt""net/http""os/exec""strings""text/template" )type User struct {Id intName stringPasswd string }func (u User) Ev…

Python学习从0开始——项目一day01爬虫

Python学习从0开始——项目一day01爬虫 一、导入代码二、使用的核心库三、功能测试3.1初始代码3.2新建文件3.3代码调试 四、页面元素解析4.1网页4.2修改代码4.3子页面4.4修改代码 一、导入代码 在Inscode新建一个python类型的项目&#xff0c;然后打开终端&#xff0c;粘贴以下…

WINFORM画笔实现画板(如何实现橡皮擦和清空画板功能)

C#内部并没有提供橡皮擦功能所以&#xff0c;只能使用画笔和颜色填充来实现橡皮擦和清空画板功能。 此次小编写了一个简易的画板功能其中包含橡皮擦&#xff0c;清空面板&#xff0c;在窗体运行中修改画笔颜色和像素等功能。 代码如下: using Sunny.UI; using Sunny.UI.Win32…

二叉搜索树(BST)

二叉搜索树是一种特殊的二叉树&#xff0c;它具有以下性质&#xff1a; 任意一个节点的左子树上的所有节点的值都小于该节点的值。任意一个节点的右子树上的所有节点的值都大于该节点的值。任意一个节点的左右子树也都是二叉搜索树。二叉搜索树中不存在重复的值。 二叉搜索树…

《七》布局QLayout类

QLayout简介 QLayout是由具体类 QBoxLayout、QGridLayout、QFormLayout 和 QStackedLayout继承的抽象基类。 对于 QLayout子类或 QMainWindow的用户&#xff0c;很少需要使用 QLayout 提供的基本功能&#xff0c;例如 setSizeConstraint() 或 setMenuBar()。Qt 布局系统提供了…

程序员购车指南

哈喽大家好&#xff0c;我是咸鱼。 爱车可以说是大部分男人的天性&#xff0c;而我对汽车的热情却远不及对手表的钟爱&#xff08;痴迷劳力士&#xff09;。以至于我的朋友掏出车钥匙指着上面的苹果树标志跟我介绍奔驰 AMG 系列的强劲性能和马力时&#xff0c;我只能尽量假装自…

【三维Dvhop定位】基于麻雀搜索算法的多通信半径和跳距加权的三维Dvhop定位算法【Matlab代码#81】

文章目录 【可更换其他算法&#xff0c;获取资源请见文章第6节&#xff1a;资源获取】1. Dvhop定位算法2. 麻雀搜索算法3. 多通信半径和跳距加权策略3.1 多通信半径策略3.2 跳距加权策略 4. 部分代码展示5. 仿真结果展示6. 资源获取 【可更换其他算法&#xff0c;获取资源请见文…

Oracle-TDE数据加密功能

1 Oracle TDE 1.1 TDE介绍 Oracle TDE是数据库层对存储的用户敏感数据进行的静态加密&#xff0c;加密数据满足主流的安全法规&#xff08;如 PCI DSS&#xff09;相关的加密要求&#xff0c;可以防止数据文件被其他非数据库读取方式访问的情况下(如通过工具直接打开读取数据文…

Java程序生成可执行的exe文件 详细图文教程

1.Java编辑器&#xff0c;如&#xff1a;idea、eclipse等&#xff0c;下载地址&#xff1a;IntelliJ IDEA: The Capable & Ergonomic Java IDE by JetBrainshttps://www.jetbrains.com/idea/2.exe4j&#xff0c;下载地址&#xff1a;ej-technologies - Java APM, Java Prof…

ansible-tower连接git实现简单执行playbook

前提&#xff1a;安装好ansible-tower和git&#xff0c;其中git存放ansible得剧本 其中git中得内容为&#xff1a; --- - name: yjxtesthosts: yinremote_user: rootgather_facts: noroles:- testroles/test/tasks/main.yml #文件内容 --- #- name: Perform Test Task # tas…