flex属性 是 flex-grow、flex-shrink、flex-basis三个属性的缩写。推荐使用此简写属性，而不是单独写这三个属性。...答案一：避免过度约束避免后代选择符避免链式选择符使用紧凑的语法避免不必要的命名空间避免不必要的重复最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么避免！...important，可以选择其他选择器尽可能的精简规则，你可以合并不同类里的重复规则答案二：加载性能：① CSS 压缩：将写好的CSS 进行打包压缩，可以减少很多的体积。...将CSS代码放在标签内部；内联样式，将CSS样式直接定义在HTML元素内部；移动端的布局用过媒体查询吗？通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适应相应的设备的显示。...等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。
本篇将给大家讲解CSS选择器，以及一起实战练习，牢记基础语法知识。...2.百度百科看CSS选择器 要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。 HTML页面中的元素就是通过CSS选择器进行控制的。...3.CSS选择器常用类型 常用的大CSS选择器： # 1.元素选择器：又称为标签选择器，根据标签名来固定样式作用范围。...F12分析文章简介CSS选择器 从上面可以看到，文章的简介内容放在了：class为entry的div的第二子类(blockquote标签)，他(blockquote)的第一个子类(p标签)中,所以我们推导出图上的...F12分析文章类别CSS选择器 从上面可以看出文章类型分为两部分：前面+后面，前面类型(实践项目)：在class为entry-meta-hide-on-mobile的p标签的后代中的第一个a标签中，后面类型
关于层级选择器。 $("parent > child") 选择所有指定“parent”元素中指定的“child”的直接子项元素。 parent :任何有效的选择器。...child: 用来筛选子元素的选择器 $(function(){ $("ul.myul > li").css("border","2px solid red"); //将ul带有.myul...prev 任何有效的选择器 next 用于筛选跟在“prev”后面的选择器 $(function(){ $("label + input").css("border","2px solid...它们具有相同的父元素。 prev 任何有效的选择器 siblings 一个选择器用来过滤第一个选择器之后的兄弟选择器。...$(function(){ $("#prev ~ div").css("border","2px solid red"); // 将prev 选择器 后面的兄弟div 标签加上边框})
--> 2)导入外部样式表 在HTML网页使用@import导入外部样式导入样式必须放在标签中而标签必须放在标签中 ...标签属于XHTML范畴中而@import是css2.1中特有的 2.使用，的链接css客户端浏览网页时先将css网页加载到网页中，在进行编译显示，所以这种情况下显示出的网页与用户预期的一样即使网速再慢也是一样的效果...">hhhh 注意:id选择器只能使用一次，也就是说在同一页面同一个id属性只能设置一次；而类选择器可以在页面使用多次 3)选择器的优先级 id选择器>class类选择器>标签选择器... 4）E:first-of-type 选择父级元素具有指定类型的第一个E元素 5）E:last-of-type 选择父级元素具有指定类型的最后一个E元素 6）E F:nth-of-type...(n) 选择父元素内具有指定类型的第n个F元素 注：E F：nth-child（n）和 E F:nth-of-type(n)使用时记住以下关键点： 1）E F：nth-child（n）在父级里从第一个元素开始查找
大家好，又见面了，我是你们的朋友全栈君。 这篇文章主要用于存储CSS以及CSS3的选择器部分知识，以便日后查阅及记忆. 该内容分为两部分，第一部分为css选择器的一些基本知识。...第二部分为CSS3新增加的选择器。 在开始之前，先简单介绍一下选择器，选择器的作用就是定位我们想要样式化的网页HTML元素。选择器可以分为以下几种类型。...1、简单选择器，通过元素类型，class或id匹配一个或多个元素。 2、属性选择器，通过属性/属性值 匹配一个或多个元素。 3、伪类，匹配处于确定状态的一个或多个元素。...（例如每个段落的第一个字，或者某个元素之前生成的内容） 5、组合器，这里不仅仅是选择器本身，还有以有效的方式组合两个或者更多的选择器用于非常特定的选择的方法。 6、多用选择器，这些也不是单独的选择器。...这个思路是将以逗号分隔开的多个选择器放在一个CSS规则下面， 以将一组声明应用于由这些选择器选择的所有元素。 那么下面就具体的选择器来一一做一定的解释，有不足的地方还希望不吝赐教。嘿嘿。
外部样式表 将 CSS 保存在一个独立的扩展名为 .css 的文件中，并在 HTML 的 里使用 元素中引用它，这种方法可以说是最好的，因为你可以使用一个样式表来设置多个文档的样式...css" rel="stylesheet" href="css/nms.css"> 2.选择器 选择器，顾名思义，就是将 css 代码选择到 HTML 文档中具体的元素对象...p 元素的后代元素中的 span 元素，因此第一个 span 元素就不符合规则，而第二个 span 则会被匹配到。...因此被选择器匹配到的元素，都是直接将 CSS 样式作用到整个元素上，也就是作用到整个文本内容上。...在 CSS 中也是可以使用一些内置的方法功能。 伪类选择器 当不是通过 HTML 文档中元素的一些基本性质，比如 id，class，标签名，属性这些基本特征来匹配这些元素时，就可以称作伪类选择器。
语义化好处： 了解每个标签和属性的含义 思考什么标签最适合描述这个内容 不使用可视化工具生成 1.4 src 和 href 的区别 src 指向的内容会嵌入到文档当前标签所在的位置，而 href 是用于建立这个这个标签与外部资源之间的关系...CSS: 用来定义页面元素的样式(如文字的大小、颜色) 2.1 使用 css 的三种形式 外链 选择器 css 选择器 选择器的特异度：选择器的特异度高的会覆盖特异度低的样式 nav a { color: red; } a { color: pink; } /*结果会是红色*/.../p/7dadcc458410 2.6 块级元素与行级元素的区别 块级 行级 不和其他盒子并列摆放 可以和其他行级盒子一起放到一行 适应所有的盒模型属性 盒模型中的 width、height 不适用...2.9 Grid 布局 display: grid 使元素生成一个块级的 Grid 容器 使用 grid-template 相关属性将容器划分为网格 设置每一个子项占哪些行/列 暂时只是初略了解，之后还是得正式学
有时候，预处理程序用于硬编码每个可能的场景，比如 :checked 的长字符串和相邻兄弟选择器。 在本文中，我将介绍使用纯CSS 制作的四子连珠游戏的关键思想。...为了让演示好看一些，我使用 radial-gradient()，而不是在游戏板（the board）或者圆盘（the discs）上贴一张图片。...可惜没有选择前一个的兄弟选择器，这不是 CSS 选择器的工作方式。我不得不拒绝这个想法。 实际上，一个 checkbox 本身可以有三个状态，可以使用 indeterminate 状态。...还有一种方式就是使用 nth 选择器。尽管我喜欢使用偶数和奇数这样的关键词，但我还是走进了死胡同。:nth-child 选择器 “统计”父类中的子元素，包括所有类型，类、伪类等等。...如果改变的是字符的数量，而不是字符本身，那么由此产生的宽度变化就是可控的。在 CSS 计数器中使用罗马数字并不少见。
优先级逐级减小 一般而言，不太建议使用内联样式 # CSS 如何工作 DOM 树 + CSS => 渲染树（最终展示的页面效果） # CSS 简单使用 # 选择器 通配选择器 标签选择器...与 A 同级，则选中 B img + p # 选择器组 当多个选择器使用相同样式时，可以用 , 将多个选择器隔开 例如： h1, h2, h3, h4 { color: red; } a...字体族类型如下： font-family 使用建议： 字体列表最后写上通用字体族 英文字体放在中文字体前面 使用 web-fonts： @font-face { font-family...常用 visible、hidden、scroll 三种值，分别代表显示溢出内容、隐藏溢出内容、对溢出内容增加滚动条 # 块级 & 行级 块级盒子 行级盒子 在常规流中不和其他盒子并列摆放 和其他行级盒子一起放在一行或拆开成多行...(BFC) 不是每一个新的块级盒子都会创建一个新的 BFC，只有某些容器会创建一个 BFC： 根元素 浮动、绝对定位、inline-block Flex 子项和 Grid 子项 overflow 值不是
只有一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。 这篇文章在一定程度上鼓励你在构建UI时使用更简单的CSS和更少的 JS。...:first-of-type | 选择指定类型的第一个子元素 :first-of-type表示一组兄弟元素中其类型的第一个元素。....innerDiv p:first-of-type { color: orangered; } 上面表示将 .innerDiv 内的第一个元素为 p 的颜色设置为橘色。...它基本上和 :nth-of-type 一样，只是它从结尾处反序计数，而不是从开头处。...为了可以正确地渲染链接元素的样式，:link伪类选择器应当放在其他伪类选择器的前面，并且遵循LVHA的先后顺序，即：:link — :visited — :hover — :active。
第1章 CSS和文档 1.1 WEB的衰落（为了表现增加很多标记元素如font等，这些阻碍了页面的结构化） 1.2 CSS作救星（95年W3C发布正在进行的CSS计划） CSS特点：丰富的样式；易于使用和维护...--link标记（外部样式表），link必须放在head内，rel“关系”（relation），media样式应用的媒体类型（大部分类型不被支持）--> css">...--行内样式表，不推荐，因为不利于内容和表现的分离--> 第2章 选择器 2.1 基本规则 CSS的核心特性是向文档中的一组元素类型应用某些规则；每个规则由选择器和声明块组成 ?...;} 2.3 类选择器和ID选择器 多类选择器：通过将多个类选择器连接在一起，仅可选择同时包含这些类的元素（类名顺序不限） .warning.urgent{background:red;}/*注意中间不含空格...:red;} /*选择子元素，即只选择h2的子元素（而不是后代元素）strong元素*/ h3+p{color:red;} /*选择相邻元素，即选择h3紧接的p元素，且两者有相同父元素*/ 2.6 伪类和伪元素
（dom对象,不是zepto对象） $("div").get(); //所有div对象组成的一个数组 该方法与eq方法的区别在于，eq返回的是zepto对象，而get返回的是dom对象，$()...(“link”));//返回集合中有子项为#link的对象 ?...首先，filter方法会将返回值为true的子项装入一个集合。...否则通过当前对象来调用find方法并将selector传入，并调用size方法获取count（filter会自动将返回值转换为bool类型）。 parent: 获取对象集合所有的直接父节点。...可以传入一个参数，作为选择器筛选； 参数只能是一个选择器字符串； 返回的集合不会出现重复的元素； 如果想取出元素的直接父节点，使用parent； 如果想取出第一个符合筛选条件的父节点，使用closest
— CSS 权威指南：Eric Meyer、Estelle Weyl 这篇文章鼓励构造 UI 时使用更多纯 CSS 和更少的 JS。...通过 ::selection 伪元素选择器，我们可以将样式应用于高亮区域。...这个伪类选择器应用于根元素，多用于存储全局 CSS 自定义属性。 5、:empty | 仅当元素为空时触发 这个伪类选择器将选中没有任何子项的元素。该元素必须为空。...这个规则将应用于第一个和第二个 div，因为他们是真为空，而第三个 div 包含空格。 6、:only-child | 选择仅有的子元素 匹配父元素中没有任何兄弟元素的子元素。...9、:nth-of-type() | 选择特定类型的子元素 这个选择器将从指定的父元素的孩子列表中选择某种类型的子元素。
p:first-letter 选择每一个p元素的第一个字母 ::first-line 首行选择器 p:first-line 选择每一个p元素的第一行 ---- CSS1版本有我们最常使用的经典选择器...，不会覆盖产生冲突 也很好记“绿化LVHuA” #CSS2选择器# 选择器 类型 示例 说明 * 通配选择器 * 选择所有元素 ele>ele 直接子元素选择器 div>p 选择父级是div元素的p元素...#CSS3选择器# 敲这么多终于到关键地方了 CSS3增加了很多强大的选择器，以伪劣选择器为主 CSS1和CSS2版本的选择器加起来都没它多 我们一起来看一下 选择器 类别 示例 说明 ele...invalid 非法元素选择器 :invalid 选择输入值非法的元素 ##属性选择器## [attr^=val]，[attr=val]，[attr*=val] 这三个属性选择器放在一起记 也很好记，...div> div:first-child{ background-color: red; } 使用first-child我们发现页面没有变化 这是因为div并不是body元素的第一个子元素
（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！） （注2：更多内容请查看我的目录。） 1. 选择器简介 大家都参加过学校运动会开幕式吧，或者看过电视节目中的开幕式。...我们可以给他一个唯一识别的id，就像你入学时学校分配给你的学号，或者你的身份证号，这些是唯一的，只属于你的号码。所以找到某个元素，可以使用id选择器。...其实html就是这么干的，每一类元素都有自己的标签，就是元素名或者标签名，如果你想操作的这一类元素不是已经拥有某个标签名的元素，你也可以为他们专门定义一个类名。这就是我们的元素选择器和类选择器。...也可以是公式，也可以是关键字(even、odd) 示例： p:first-child 代表的并不是的第一个子元素，而是元素是某元素的第一个子元素 p > i:first-child...) 匹配语言为"en"的 2.4.2 伪元素选择器 效果就像专门创造一个虚拟的元素并选中，每个选择器只能有一个伪元素且必须放在最后。
这篇文章主要用于存储CSS以及CSS3的选择器部分知识，以便日后查阅及记忆. 该内容分为两部分，第一部分为css选择器的一些基本知识。第二部分为CSS3新增加的选择器。...在开始之前，先简单介绍一下选择器，选择器的作用就是定位我们想要样式化的网页HTML元素。选择器可以分为以下几种类型。 1、简单选择器，通过元素类型，class或id匹配一个或多个元素。...（例如每个段落的第一个字，或者某个元素之前生成的内容） 5、组合器，这里不仅仅是选择器本身，还有以有效的方式组合两个或者更多的选择器用于非常特定的选择的方法。 6、多用选择器，这些也不是单独的选择器。...这个思路是将以逗号分隔开的多个选择器放在一个CSS规则下面， 以将一组声明应用于由这些选择器选择的所有元素。 那么下面就具体的选择器来一一做一定的解释，有不足的地方还希望不吝赐教。嘿嘿。...*{ padding:0; margin:0; } /*个人建议，请不要在你的CSS代码中出现通配符，通配符（*）是一种效率极低甚至会有在大型网站中使用导致页面渲染变慢的可能。
一般样式都是放在 head 之间的。 如果样式放在底部。 他会加载标签， 然后渲染样式。 如果加载慢的话， 你会看到他会跳舞。 21、介绍一下标准的CSS的盒子模型？...而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。...（2）当你需要在较大分辨率下得到固定宽度时，使用max-width而不是width，因为它可以适应较小的分辨率，而无需使用媒体查询。...（6）在使用多行文本时，指定 column-width （ 列宽 ）而不是指定 column-count（ 列数 ），这样它就可以在较小的屏幕上自动显示为单例布局。...一个好的类名应该是描述他是什么而不是像什么避免 !important，可以选择其他选择器尽可能的精简规则，你可以合并不同类里的重复规则 51、用纯CSS创建一个三角形的原理是什么？
CSS 的玩法可与 SKetch 或者 Photoshop 的玩法不一样。 在本文中，我将向你展示如何以统筹全局的思维实现 CSS 布局，根治布局难产的顽疾。...元素的默认样式 是什么决定了元素的样式？为什么有的元素独占一行，而有的元素能共处一行？ ? 这要归因于元素的默认样式，这其中就有我们要探讨的第一个 CSS 知识点：行内元素和块级元素。...有些情况你甚至会同时使用二者 —— 例如 Grid 布局排布整体页面，而 Flexbox 布局调控页面中的一个表单。...我们用类选择器锁定了所有类名为 tweet 的元素。当然目前只有一个这样的元素，但如果有十个，那它们将都会是 Flex 容器了。 CSS 中以 . 开头的选择器代表类选择器。为什么是 .？我可不知道。...margin 和 padding 那…… 为什么用 margin 而不用 padding？为什么要设置在头像右侧，而不是文字内容左侧呢？
在上两篇文章里，《这30个CSS选择器，你必需熟记（上）》和 《这30个CSS选择器，你必需熟记（中）》这两篇文章里，我们一起学习了前20个，本篇文章我们一起学习剩下的10个选择器。...21、 X::pseudoElement 伪元素选择器 我们可以使用伪元素（用::表示）来定义某些片段元素，比如第一行或第一个字母。要记住的是这只能用于块状（block）元素。...X:nth-of-type(n)：选择每第n个某种元素选择器 有时候你可能有这样的需求，想通过元素类型type进行选择，而不是子元素 child，你可以考虑 X:nth-of-type(n)，假设有5个无序列表...我们通常用这个选择器来选择该类型的第一个元素，为了更好的理解这个例子，我们来看如下结构的HTML代码： My paragraph here....浏览器兼容性 IE9+ Firefox 3.5+ Chrome Safari Opera 小节 到这里，我们终于学完了30个CSS选择器，是不是轻松许多，感谢大家的阅读，熟记这30个选择最好的办法就是经常的使用
在上两篇文章里，《这30个CSS选择器，你必需熟记（上）》和 《这30个CSS选择器，你必需熟记（中）》这两篇文章里，我们一起学习了前20个，本篇文章我们一起学习剩下的10个选择器。...X:nth-of-type(n)：选择每第n个某种元素选择器 有时候你可能有这样的需求，想通过元素类型type进行选择，而不是子元素 child，你可以考虑 X:nth-of-type(n)，假设有5个无序列表...Item 示例效果如下： 浏览器兼容性 IE9+ Firefox 3.5+ Chrome Safari Opera 30：X:first-of-type：选择该类型的第一个元素选择器...我们通常用这个选择器来选择该类型的第一个元素，为了更好的理解这个例子，我们来看如下结构的HTML代码： My paragraph here....浏览器兼容性 IE9+ Firefox 3.5+ Chrome Safari Opera 小节 到这里，我们终于学完了常用的30个CSS选择器，是不是轻松许多，感谢大家的阅读，熟记这30个选择最好的办法就是经常的使用
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
云直播
对象存储
实时音视频
