文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

css学习笔记，持续记录。

.}; 选择指定的所有标签，指定id，指定类的所有标签； 3. 类选择器选择有特定 class 属性的 HTML 元素，如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。...， :lang() 选择带有lang属性元素 :not() CSS3排除某类元素 :root CSS3选择根元素 :first-child 第一个元素 :last-child CSS3最后一个子元素 :...only-child CSS3仅有的一个子元素 :last-of-type 最后一个指定选择器的子元素 :nth-child() CSS3第n个子元素 :nth-last-child() CSS3倒数第...n个子元素 :first-of-type CSS3第一个同级兄弟元素 :last-of-type CSS3最后一个同级兄弟元素 :only-of-type CSS3唯一的一个同级兄弟元素 :nth-of-type...转义符  它叫不换行空格，全称No-Break Space，它是最常见和我们使用最多的空格，大多数的人可能只接触了 ，它是按下space键产生的空格。

2.6K60

148道 CSS 与 JavaScript 基础面试题

如果按堆栈视角，::after 生成的内容会在 ::before 生成的内容之上。 4. 伪类与伪元素的区别 css 引入伪类和伪元素概念是为了格式化文档树以外的信息。...也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。 伪类用于当已有的元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。...选择器的特殊性值分为四个等级，如下： 标签内选择符x,0,0,0 ID选择符0,x,0,0 class选择符/属性选择符/伪类选择符 0,0,x,0 元素和伪元素选择符0,0,0,x 计算方法： 每个等级的初始值为...elem:nth-child(n) 选中父元素下的第n个子元素，并且这个子元素的标签名为elem，n可以接受具体的数值，也可以接受函数。...以下6个属性设置在容器上： flex-direction属性决定主轴的方向（即项目的排列方向）。 flex-wrap属性定义，如果一条轴线排不下，如何换行。

1.1K20
您找到你想要的搜索结果了吗？
是的
没有找到

CSS 实用手册

伪类选择器，匹配元素不同状态的、 语法:伪类{ }、a:伪类{ }、#d1:伪类{ } ①....结构伪类 通过元素之间的结构关系来匹配元素 A. :first-child 获取属于其父元素中的 首个子元素 a. td:first-child 获取属于每个 tr 中的第一个 td b....#tbl td:first-child 获取 id 为 tbl 表格中每个 tr 中的第一个 td B. :last-child 获取属于其父元素中的最后一个子元素 C....在父元素的第一个或最后一个子元素位置处，增加一个空 table 用内容生成解决外边距的代码如下: 选择器:before{ content:""； display:table...主轴为交叉轴，起点在容器的底端 ②. flex-wrap 当一条轴线(一行)排列不下时，子元素将如何换行 A. nowrap 默认值，不换行,窗口大小改变不换行 B. wrap 换行，第一行在上方,窗口大小改变会换行

2.7K10

《算法竞赛进阶指南》0x12 队列

Container 为用于存储元素的底层容器类型。如果不指定，则默认使用 std::deque 作为底层容器。 STL 中的 queue 容器提供了一众成员函数以供调用。...O(m\log m) 但本题的 m 范围是 7 \times 10^6 不能 Ac 考虑如何使得单次操作时间复杂度从 O(\log m) 优化成 O(1) 将动态维护的序列分成三个子序列...，新产生的两类数也分别随时间单调递减 因此可以维护三个单调队列分别维护 x,l,r 每轮比较三个队列的队首元素，弹出队首元素，按照要求分成两个新数字放到 l, r 的队尾 最终统计时，不要忘记加上偏移量...对所有的数处理完成之后，达达将这些队列按一定的顺序连接起来后就可以得到一个非降的序列。 请你求出最少需要多少个双端序列。 输入格式 第一行输入整数 N ，代表整数的个数。...下标最大值小于最后一个元素的下标，按下标降序接在后面，整体呈 \ 形 下标最大值大于最后一个元素的下标，按下标升序接在后面，整体呈 \/ 形 如果当前处于上升趋势 下标最小值大于最后一个元素的下标

60640

前端基础篇css

匹配.box下所有子元素a 2.E>F (子代选择器) 匹配E元素下第一级子元素F eg: .box>a{color:red;} 匹配.box下第一级子元素a 3.E+F 相邻兄弟选择器 匹配E元素后面紧邻的那个...:active 鼠标按下时的状态 5.E:focus 光标聚焦到input框时的状态 四、结构性伪类选择器 1....:first-child 匹配每个父元素下第一个子元素 eg: .box a:first-child{color:red;} 匹配.box下第一个子元素a(此时，a必须是.box下的第一个子元素) eg...: .box :first-child{color:red;} 匹配.box下每个父元素下的第一个子元素 注： :first-child 《=》 :nth-child(1) 都是匹配父元素下的第一个子元素...:first-of-type 匹配父元素下指定类型的第一个子元素 eg: .uls li:first-of-type{background:pink;} 匹配.uls下li这种类型的第一个子元素 注：

1.7K30

CSS_Flex 那些鲜为人知的内幕

默认布局模式是流式布局，但我们可以通过更改父容器上的display属性来选择使用Flexbox： display:block display:flex 当我们将 display 设置为 flex 时，我们创建了一个...它允许我们设置元素在主轴方向上的假设大小，无论这是水平还是垂直。 下图集中，每个子元素都被赋予了flex-basis: 50px，但可以调整第一个子元素的flex-basis。...>> 两个项目都会收缩，但它们会「按比例收缩」。第一个子元素始终是第二个子元素宽度的 2 倍。 flex-basis和width设置了元素的假设大小。...flex-shrink属性让我们决定如何处理这个亏空。 与flex-grow类似，它是一个比例。「默认情况下，两个子元素的flex-shrink都是 1，因此每个子元素消化亏空的一半」。...它们各自放弃 50px，它们的实际大小从 250px 缩小到 200px。 现在，假设我们将第一个子元素提高到flex-shrink: 3： 我们总的亏空是 100px。

19810

web前端面试中10个关于css高频面试题,你都会吗?

E[att$="val"] 属性att的值以"val"结尾的元素 E[att*="val"] 属性att的值包含"val"字符串的元素 结构伪类选择器 选择器 含义描述 E:root 匹配文档的根元素...，对于HTML文档，就是HTML元素 E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1 E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个编号为1 E...E:last-child 匹配父元素的最后一个子元素，等同于:nth-last-child(1) E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type...只适用于高度固定的布局 5....兼容性区别 @import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

2.8K20

【 前端相关 网页样式 】总结CSS3中“伪类”与“伪元素”

直译过来就是：css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。...虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。 伪元素用于创建一些不在文档树中的元素，并为其添加样式。...实际上，伪元素使用单冒号还是双冒号很难说得清谁对谁错，你可以按照个人的喜好来选择某一种写法。 4.伪类与伪元素的具体用法 这一章以含义解析和例子的方式列出大部分的伪类和伪元素的具体用法。...结构化 1 :not 一个否定伪类，用于匹配不符合参数选择器的元素。...该伪元素只支持双冒号的形式。

2.9K70

盘点Java集合（容器）概览，Collection和Map在开发中谁用的最多？

每个集合元素都是一个引用变量，实际内容都存放在堆内或方法区里面，但是基本数据类型是在栈内存上分配空间的，栈上的数据随时会被收回。如何解决？可以通过包装类，把基本数据类型转化为对象类型，存放引用。...容器的分类 Java 中的集合主要有大量派生接口：Collection、Map Collection: 英文释义收集，集合，用在储存单一元素的容器； Map: 英文释义地图，映射，非常贴切，所谓地图输入一个地点...【注】：本文中所涉及到继承派生关系都是部分的，只挑重点，没列举全部，毕竟搞完太多了（手动笑哭） Collection 先看第一个派生接口 Collection，它下面又继承了很多子接口，主要为Set、List...List List 的特点是存取有序，可以存放重复的元素，可以用下标对元素进行操作，同样，我们还是选择其中一个子类 ArrayList 来验证一下。...，后面会按个的学习按个的梳理滴，毕竟这一块内容有非常多的考点，至少得更新个十几篇博文才能讲个大概，继续保持耐心，继续保持学习，一起冲！！！

5800

CSS 基础系列：伪类和伪元素

虽然它和普通的 CSS 类相似，可以为已有的元素添加样式，但是它只有处于 DOM 树无法描述的状态下才能为元素添加样式，所以将其称为伪类。...选择器 示例 示例说明 :first-child p:first-child 选择符合的p元素，该p元素必须是其父元素的第一个子元素 :first-of-type p:first-of-type 选择符合的...目前，:fullscreen 需要添加前缀才能使用。 ！！注意，伪类的名称不区分大小写。...比如有段代码： 伪类和伪元素-3.png p:first-child: 匹配到的是p元素,因为p元素是div的第一个子元素； h1:first-child: 匹配不到任何元素，因为在这里h1是div的第二个子元素...，而不是第一个； span:first-child: 匹配不到任何元素，因为在这里两个span元素都不是div的第一个子元素； :first-child: 匹配到的是p元素,因为在这里div的第一个子元素就是

1.5K10

Pseudo elements伪元素与Pseudo classes伪类

常见的伪元素 ::after ::after用于描述处于css渲染层的一个伪元素，相当于选中元素的最后一个子元素，但这个元素与DOM节点无关，位于选择的元素之后，伪元素的内容用content属性描述。...::before 与after相对应，相当于被选中元素的第一个子元素。 ::selection 将用户选择的内容作为伪元素。 ::first-letter 选中第一个字符作为伪元素。...常见的伪类 伪元素与伪类的区别 伪元素将元素的某些部分作为元素选中（但不选中真正的元素），而伪类对应选择的元素的特殊状态（选择真正的元素）。...w3c的定义是，伪类用于向某些选择器添加特殊的效果（选择器已选中元素），伪元素用于将特殊效果添加到选择器（通过伪元素才能确定选中元素）。...:first-of-type 选择一组兄弟元素中的第一个指定类型的元素（可以不是第一个元素）。

83520

经典布局：如何定义子控件在父容器中的排版位置？

但与基本控件元素不同，布局类的Widget并不会直接呈现视觉内容，而是作为承载其他子Widget的容器。...这些布局类的Widget，内部都会包含一个或多个子控件，并且都提供了摆放子控件的不同布局方式，可以实现子控件的对齐、嵌套、层叠和缩放等。...多子Widget布局：Row、Column和Expanded 对于拥有多个子Widget的布局类容器而言，其布局行为无非就是两种规则的抽象：水平方向上应该如何布局、垂直方向上应该如何布局。...如同Android的LinearLayout、前端的Flex布局一样，Flutter中也有类似的概念，即将子Widget按行水平排列的Row，按列垂直排列的Column，以及负责分配这些子Widget在布局方向中剩余空间的...需要注意的是，Positioned控件只能在Stack中使用，在其他容器中使用会报错。 总结 Flutter的布局容器强大而丰富，可以将小型、单用途的基本视觉元素快速封装成控件。

4.5K30

OEA 中 WPF 树型表格虚拟化设计方案

那么，要解决上述的问题，只有同时实现表格的行、列虚拟化，才能有效地减少表格的可视元素，从而提高系统性能。...需要的总大小是多少，这样才能正确地显示滚动条。..._itemMap.Next 就是第一个块，也可以理解为起点或者终点。 UnrealizedItemBlock 与 RealizedItemBlock 类都继承自 ItemBlock。...那么，在这样层次要求下，要如何实现只使用一个滚动条的虚拟化呢？还好，WPF 自带的 DataGrid 也带有行列虚拟化的功能，我们可以先看一下 DataGrid 是如何实现的。...TreeGrid 的虚拟化     根据之前的分析，我们已经知道表格 DataGrid 实现虚拟化都需要哪些元素，元素之间是如何交互的。

2.7K70

《游戏引擎架构》阅读笔记 第二部分第5章

当引擎启动时，必须依次配置及初始化每个子系统。各子系统间的相互依赖关系，隐含地定义了每个子系统所需的启动次序。例如子系统B依赖子系统A，那么在启动B之前，必须先启动A。...池分配器（pool allocator)是此类分配模式的完美选择。 池分配器的工作方式如下。首先，池分配器会预分配一大块内存，其大小刚好是分配元素的倍数。...（P208 1） 二叉查找树(binary search tree，BST):二叉查找树中的每个节点最多含两个子节点。由于节点按预先定义的方式排列，任何时候都可以按该排列方式遍历整棵树。...容器操作：插入、移除、顺序访问/迭代、随机访问、查找、排序。 迭代器：迭代器是一种细小的类，它“知道”如何高效地访问某类容器中的元素。...迭代器像是数组索引或指针—每次它都会指向容器中某个元素，可以移至下一个元素，并能用某方式表示是否已访问容器中所有元素。

89020

前端常见技术点 - CSS DOM 布局（43问）

两个冒号和一个冒号的作用其实一致的，只是在 CSS3 中为了区分伪类选择器和伪元素选择器，在语义上更清晰明了； 伪类选择器：:hover :link :active :target :not(s) :focus...（伪类的效果可以通过添加一个实际的类来达到） 伪元素选择器：::first-letter ::first-line ::before ::after ::selection （伪元素的效果是需要通过添加一个实际的元素才能达到的...17、常见的移动端开发问题 应该有很多，这里只列出笔者遇到过的一部分： 若父容器设置了 transform 属性，则其内部子元素的 position:fixed; 属性会失效； 18、对 line-height...当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-to、padding-bottom、margin-top、margin-bottom...等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。

1.5K30

57道常被问的CSS面试题及答案汇总，帮你查漏补缺

important 比内联优先级高 4、CSS优先级算法如何计算？ 元素选择符：1 class选择符：10 id选择符：100 元素标签：1000 !...important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性 同一级别：后写的会覆盖先写的 5、CSS3新增伪类有那些?...选择属于其父元素的唯一子元素 p:nth-child(2) 选择属于其父元素的第二个子元素 :enabled :disabled 表单控件的禁用状态。...等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。...解释一下这2个伪元素的作用 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。 ::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。

2.4K31

57道CSS常问面试题及答案汇总

important 比内联优先级高 4、CSS优先级算法如何计算？ 元素选择符：1 class选择符：10 id选择符：100 元素标签：1000 !...important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性 同一级别：后写的会覆盖先写的 5、CSS3新增伪类有那些?...选择属于其父元素的唯一子元素 p:nth-child(2) 选择属于其父元素的第二个子元素 :enabled :disabled 表单控件的禁用状态。...等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。...解释一下这2个伪元素的作用 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。 ::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。

2K10
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券