基本选择器包括:
作用:可以选中所有的HTML元素。
语法:
* {
属性名:属性值;
}
举例:
* {
/* 选中所有元素 */
color: orange;
font-size: 40px;
}
备注:目前来看通配选择器貌似有点鸡肋,但后面清除样式时,会对我们有很大帮助。
作用:为页面中某种元素统一设置样式。
语法:
标签名 {
属性名:属性值;
}
举例:
/* 选中所有h1元素 */
h1 {
color: chocolate;
font-size: 40px;
}
/* 选中所有p元素 */
p {
color: blue;
font-size: 60px;
}
备注:元素选择器无法实现差异化设置,例如上面的代码中,所有的p元素效果都一样。
作用:根据元素的class值,来选中某些元素。
class翻译过来有:种类、类别的含义,所以class值,又称类名。
语法:
.类名 {
属性名:属性值;
}
举例:
/* 选中页面中所有类名为speak的元素 */
.speak {
color: red;
}
/* 选中页面中所有类名为answer的元素 */
.answer {
color: green;
}
注意点:
元素的class属性值不带点(.),但CSS的类选择器要带(.)。
class值,是我们自定义的,按照标准:不要使用纯数字、不要使用中文、尽量使用英文与数字的组合,若有多个单词组成,使用-做连接,例如:left-menu,且命名要有意义,做到“见名知意”。
一个元素不能写多个class属性,下面是错误示例:
<!-- 该写法错误,元素的属性不能重复,后写的会失效 -->
<p class="speak" class="big">你好啊</p>
一个元素的class属性,能写多个值,要用空格隔开,例如:
<!-- 该写法正确,class属性,能写多个值 -->
<p class="speak big">你好啊</p>
作用:根据元素的id属性值,来精准的选中某个元素。
语法:
#id值 {
属性名:属性值;
}
举例:
/* 选中id值为earthy的那个元素 */
#earthy {
color: red;
font-size: 60px;
}
注意:
基本选择器 | 特点 | 用法 |
---|---|---|
通配选择器 | 选中所有标签,一般用于清楚样式。 | * {color:red} |
元素选择器 | 选中所有同种标签,但是不能差异化选择。 | h1 {color:red} |
类选择器 | 选择所有特定类名(class值)的元素——使用频率很高。 | .say {color:red} |
ID选择器 | 选中特定id值得那个元素(唯一的)。 | #earthy {color:red} |
作用:选中同时符合多个条件的元素。
交集有并且的含义(通俗理解:**既…又…**的意思),例如:年轻且长得帅。
语法:选择器1选择器2选择器3…选择器n{}
举例:
/* 选中:类名为beauty的p元素,这种写法比较常见 */
p.beaty {
color: blue;
}
/* 选中:类名包含rich和beauty的元素 */
.rich.beauty {
color: green;
}
注意:
作用:选中多个选择器对应的元素,又称:分组选择器。
所谓并集就是或者的含义(通俗理解:要么…要么…),例如:给我n+1或者我继续上班。
语法:选择器1,选择器2,选择器3,…选择器n{}
多个选择器通过逗号(,)连接,此处逗号(,)的含义就是:或。
举例:
/* 选中id为peiqi,或者类名为rich,或者类名为beauty的元素 */
#peiqi,
.rich,
.beauty {
font-size: 40px;
background-color: skyblue;
width: 200px;
}
注意:
作用:选中指定元素中,符合要求的后代元素。
语法:选择器1 选择器2 选择器3 … 选择器n {} (先写祖先,再写后代)
选择器之间,用空格隔开,空格可以理解为:”xxx中的“,其实就是后代的意思。
选择器1234…n,可以是我们之前学的任何一种选择器。
举例:
/* 选中ul中的所有li */
ul li {
color: red;
}
/* 选中ul中所有li中的a */
ul li a {
color: red;
}
/* 选中类名为subject元素中的所有li */
.subject li {
color: red;
}
/* 选中类名为subject元素中的所有类名为front-end的li */
.subject li.front-end {
color: blue;
}
注意:
作用:选中指定元素中,符合要求的子元素(儿子元素)。(先写父,再写子)
子代选择器又称:子元素选择器、子选择器。
语法:选择器1>选择器2>选择器3 … 选择器n {}
选择器之间,用>隔开,>可以理解为:”xxx中的子代“,其实就是儿子的意思。
选择器1234…n,可以是我们之前学的任何一种选择器。
举例:
/* div中的子代a元素 */
div>a {
color: red;
}
/* 类名为person的元素中的子代a元素 */
.persons>a {
color: red;
}
注意:
相邻兄弟选择器:
作用:选中指定元素后,符合条件的相邻兄弟元素。
所谓相邻,就是紧挨着他的下一个,简记:睡在我下铺的兄弟。
语法:选择器1+选择器2{}。
示例:
/* 选中div后的相邻的兄弟p元素 */
div+p {
color: red;
}
通用兄弟选择器:
作用:选中指定元素后,符合条件的所有兄弟元素。(简记:睡在我下铺的所有兄弟)
语法:选择器1~选择器2{}。
示例:
/* 选中div后的所有兄弟p元素 */
div~p {
color: red;
}
注意:两种兄弟选择器,选择的是下面的兄弟。
作用:选中属性值符合一定要求的元素。
语法:
举例:
/* 选中具有title属性的元素 */
[title] {
color: red;
}
/* 选中title属性值为atguigu的元素 */
[title="atguigu"] {
color: red;
}
/* 选中title属性值以a开头的元素 */
[title^="a"] {
color: red;
}
/* 选中title属性值以u结尾的元素 */
[title$="u"] {
color: red;
}
/* 选中title属性值包含g的元素 */
[title*="g"] {
color: red;
}
作用:选中特殊状态的元素。
如何理解”伪“?——虚假的,不是真的。
如何理解”伪类“——像类(class),但不是类,是元素的一种特殊状态。
常用的伪类选择器:
:link 超链接未被访问的状态。
:visited 超链接访问过的状态。
:hover 鼠标悬停在元素上的状态。
:avtive 元素激活的状态。
什么是激活?——按下鼠标不松开。
注意点:遵循LVHA的顺序,即:link、visited、hover、active。
:focus 获取焦点的元素。
表单类元素才能使用:focus伪类。
当用户:点击元素、触摸元素、或通过键盘的"tab"键等方式选择元素时,就是获得焦点。
常用的:
关于n的值:
- 0或不写:什么都选不中——几乎不用。
- n:选中所有子元素——几乎不用。
- 1~正无穷的整数:选中对应序号的子元素。
- 2n或even:选中序号为偶数的子元素。
- 2n+1或odd:选中序号为奇数的子元素。
- -n+3:选中的是前三个。
了解即可:
:not(选择器) 排除满足括号中条件的元素。
:target 选中锚点指向的元素。
:lang() 根据指定的语言选择元素(本质是看lang属性的值)。
通过不同的选择器,选中相同的元素,并且为相同的样式名设置不同的值时,就发生了样式的冲突。
到底应用哪个样式,此时就需要看优先级了。
简单描述:
行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器。
详细描述:
计算方式:每个选择器,都可计算出一组权重,格式为:(a,b,c)
- a:ID选择器的个数。
- b:类、伪类、属性选择器的个数。
- c:元素、伪元素选择器的个数。
例如:
选择器 权重 ul>li (0,0,2) div ul>li p a span (0,0,6) #atguigu .slogan (1,1,0) #atguigu .slogan a (1,1,1) #atguigu .slogan a:hover (1,2,1)
比较规则:按照从左到右的顺序,依次比较大小,当前位胜出后,后面的不再对比,例如:
- (1,0,0)>(0,2,2)
- (1,1,0)>(1,0,3)
- (1,1,3)>(1,1,2)
特殊规则:
文章浏览阅读4.4k次。1.7-savingPNG介绍代码详情函数详解savePNGFile()源码savePNGFile()源码提示savePNGFile()推荐用法处理结果代码链接介绍PCL提供了将点云的值保存到PNG图像文件的可能性。这只能用有有序的云来完成,因为结果图像的行和列将与云中的行和列完全对应。例如,如果您从类似Kinect或Xtion的传感器中获取了点云,则可以使用它来检索与该云匹配的640x480 RGB图像。代码详情#include <pcl / io / pcd_io.h>#incl_pcl::io:savepng
文章浏览阅读936次。吸引妹子的关键点不在于喝什么咖啡,主要在于竖立哪种男性人设。能把人设在几分钟内快速固定下来,也就不愁吸引对口的妹子了。我有几个备选方案,仅供参考。1. 运动型男生左手单手俯卧撑,右手在键盘上敲代码。你雄壮的腰腹肌肉群活灵活现,简直就是移动的春药。2.幽默男生花 20 块找一个托(最好是老同学 or 同事)坐你对面。每当你侃侃而谈,他便满面涨红、放声大笑、不能自已。他笑的越弱_咖啡厅写代码
文章浏览阅读1.2w次,点赞5次,收藏5次。今天 (应该是昨天了,昨晚太晚了没发出去)下午参加了腾讯WXG的面委会面试。前面在牛客上搜索了面委会相关的面经普遍反映面委会较难,因为都是微信的核心大佬,问的问题也会比较深。昨晚还蛮紧张的,晚上都没睡好。面试使用的是腾讯会议,时间到了面试官准时进入会议。照例是简单的自我介绍,然后是几个常见的基础问题:例如数据库索引,什么时候索引会失效、设计模式等。这部分比较普通,问的也不是很多,不再赘述。现在回想下,大部分还是简历上写的技能点。接下来面试官让打开项目的代码,对着代码讲解思路。我笔记本上没有这部分代码,所_腾讯面委会面试是什么
文章浏览阅读382次,点赞3次,收藏4次。AI绘画自动生成器是一种利用人工智能技术,特别是深度学习算法,来自动创建视觉艺术作品的软件工具。这些工具通常基于神经网络模型,如生成对抗网络(GANs),通过学习大量的图像数据来生成新的图像。AI绘画自动生成器作为艺术与科技结合的产物,正在开启艺术创作的新篇章。它们不仅为艺术家和设计师提供了新的工具,也为普通用户提供了探索艺术的机会。随着技术的不断进步,我们可以预见,AI绘画自动生成器将在未来的创意产业中发挥越来越重要的作用。
文章浏览阅读1.6w次,点赞3次,收藏13次。老规矩,二话不说直接上代码:package com.poinne17.test;import org.apache.commons.collections.CollectionUtils;import org.junit.Test;import java.util.*;/** * @author:Pionner17 * @date: 2017/9/3 22:41 * @em_list找到重复的元素
文章浏览阅读1k次。一、zip和unzip 一般情况下,windows中的压缩包都是rar或者zip格式,对应的压缩软件为winzip和winrar。winzip是免费的,winrar是收费的。rar比zip压缩率更高,即同样的文件压缩完后体积更小,同时因为国内盗版,以及winrar安装后,右击默认压缩为rar的原因,导致国内的rar的使用率远超zip。 放眼全世界,zip的使用率反而远超rar,在ubuntu中,zip是默认安装的,免费使用,而rar需要额外安装,并且收费。故在linux中一般情况下,我们使用zip格_winzip收费
文章浏览阅读1.7k次。理解为ListView 的三种形式吧ListView 默认构造但是这种方式创建的列表存在一个问题:对于那些长列表或者需要较昂贵渲染开销的子组件,即使还没有出现在屏幕中但仍然会被ListView所创建,这将是一项较大的开销,使用不当可能引起性能问题甚至卡顿直接返回的是每一行的Widget,相当于ios的row。行高按Widget(cell)高设置ListView.build 就和io..._flutter listview.separated和listview.builder
文章浏览阅读1.4k次,点赞4次,收藏14次。废话不多说直接上干货1.js运行机制JavaScript单线程,任务需要排队执行同步任务进入主线程排队,异步任务进入事件队列排队等待被推入主线程执行定时器的延迟时间为0并不是立刻执行,只是代表相比于其他定时器更早的被执行以宏任务和微任务进一步理解js执行机制整段代码作为宏任务开始执行,执行过程中宏任务和微任务进入相应的队列中整段代码执行结束,看微任务队列中是否有任务等待执行,如果有则执行所有的微任务,直到微任务队列中的任务执行完毕,如果没有则继续执行新的宏任务执行新的宏任务,凡是在..._前端面试
文章浏览阅读1k次。(3)若没有查到,则将请求发给根域DNS服务器,并依序从根域查找顶级域,由顶级查找二级域,二级域查找三级,直至找到要解析的地址或名字,即向客户机所在网络的DNS服务器发出应答信息,DNS服务器收到应答后现在缓存中存储,然后,将解析结果发给客户机。(3)若没有查到,则将请求发给根域DNS服务器,并依序从根域查找顶级域,由顶级查找二级域,二级域查找三级,直至找到要解析的地址或名字,即向客户机所在网络的DNS服务器发出应答信息,DNS服务器收到应答后现在缓存中存储,然后,将解析结果发给客户机。_linux
文章浏览阅读7.9k次,点赞26次,收藏66次。HTML DOM——文档元素的操作1、通过id获取文档元素任务描述相关知识什么是DOM文档元素节点树通过id获取文档元素代码文件2、通过类名获取文档元素任务描述相关知识通过类名获取文档元素代码文件3、通过标签名获取文档元素任务描述相关知识通过标签名获取文档元素获取标签内部的子元素代码文件4、html5中获取元素的方法一任务描述相关知识css选择器querySelector的用法代码文件5、html5中获取元素的方法二任务描述相关知识querySelectorAll的用法代码文件6、节点树上的操作任务描述相关_javascript学习手册十三:html dom——文档元素的操作(一)
文章浏览阅读132次。《LeetCode学习》172. 阶乘后的零(java篇)_java 给定一个整数n,返回n!结果尾数中零的数量
文章浏览阅读426次。请注意,本文将要给大家分享的并不是开启公众号的安全操作风险提醒,而是当公众号粉丝给公众号发消息的时候,公众号的管理员和运营者如何能在手机上立即收到消息通知,以及在手机上回复粉丝消息。第一步:授权1、在微信中点击右上角+,然后选择“添加朋友”,然后选择“公众号”,然后输入“微小助”并关注该公众号。2、进入微小助公众号,然后点击底部菜单【新增授权】,如下图所示:3、然后会打开一个温馨提示页面。请一定要..._php微信公众号服务提示