li strong {font-style: italic;font-weight: normal;}） id选择器（id） 类选择器（class） 属性选择器（用DOM的属性进行声明） 后代选择器（使用空格间隔...因为每一个直接作用于元素的CSS规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。...important 什么是CSS Hack 由于不同厂商的浏览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等）， 对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果...我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本编写特定的CSS样式， 我们把这个针对不同的浏览器/不同版本写相应的CSS的过程，叫做CSS Hack。...Sass、LESS、Stylus是什么 Sass、LESS、Stylus均是CSS预处理器。
为了解决这种以及其他情况，sass提供了一个特殊结 构&。 2.1 父选择器的标识符&; 最常见的一种情况是当你为链接之类的元素写：hover这种伪类时，你并不希望以后代选择器的方式连接。...blue; &:hover { color: red } } 2.2 群组选择器的嵌套 在使用css编写样式代码的时候,会遇到这样的场景....尤其在当嵌套级别达到两层甚至三层以上时，与普通的css编写方式相比，只写一遍群组选择器大大减少了工作量。 3....需要注意的是，在使用@at-root指令时，如果在括号内放置了其他内容（如变量、函数等），那么这些内容可能会引起选择器的语法错误。...需要注意的是，变量（如上面的$radius）可以在mixin内部使用，也可以在调用mixin时传递。此外，mixin还支持默认参数和可变参数，能够更加灵活地应对不同情况。
li） 6.后代选择器（li a） 7.通配符选择器（ * ） 8.属性选择器（a[rel = "external"]） 9.伪类选择器（a:hover, li:nth-child...inline box 的 padding box (除 margin, border 外的区域) 的最小矩形； 2、否则,则由这个祖先元素的 padding box 构成。...，但是应该避免这种情况出现 请解释一下为什么会出现浮动和什么时候需要清除浮动？...清除浮动的方式 移动端的布局用过媒体查询吗？ 使用 CSS 预处理器吗？喜欢那个？ SASS (SASS、LESS没有本质区别，只因为团队前端都是用的SASS) CSS优化、提高性能的方法有哪些？...- 预处理器例如：LESS、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性，还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率
CSS 预处理程序通常会增加一些纯CSS中不存在的特性，比如 mixin、嵌套选择器、继承选择器。同时也给了我们以结构化的方式来编写样式。...和 SCSS 编写样式的不同。...后代样式规则适用于 SCSS，例如： .container{ .left-area{ ... } } 这意味着，具有class = "left-area" 的container类的所有后代都将受到规则的影响...css 中“>”是 css3 中特有的选择器，A > B 表示选择 A 元素的所有子B元素，与A B不同的是，A B 选择所有后代元素，为A > B只选择一代。...父选择器(&) 如果我们想通过添加一个类来修改一个类，我们可以使用父选择器，它主要用于添加辅助样式改变元素样式的情况，这也会起到修饰符的作用，& 在 scss中表示自身的意思。
祖先（向上遍历） 2. 后代（向下遍历） 3. 同胞（水平遍历） 4. 过滤 四、jQuery AJAX 0. 原理 1. 加载 2. Get/Post 3....后代（向下遍历） children() - 返回被选元素的所有直接子元素。 find() - 返回被选元素的后代元素，一路向下直到最后一个后代。...AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。 0. 原理 XMLHttpRequest 用于在后台与服务器交换数据（老版本使用 ActiveX 对象）。...这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 方法 描述 open(method, url, async) 规定请求的类型、URL 以及是否异步处理请求。.../x-www-form-urlencoded"); xmlhttp.send(); Async不同情况的逻辑函数位置： onreadystatechange() // Async = true //
目录 CSS快速入门 简介 语法结构 如何注释 引入方式 选择器 简介 选择器列表 选择器的优先级 基本选择器 标签选择器 类选择器 id选择器 通用选择器（不重要） 组合选择器 后代选择器 儿子选择器...(pycharm) 引入方式 1.style内部直接编写css代码,平时学习、练习的时候推荐使用 2.link标签引入外部css文件,正式工作、实际生产环境推荐使用 选择器 简介 CSS选择器是CSS...div的后代 p是div的儿子也是div后代 是span的父亲 div是p的父亲是span的爷爷 也可以说是他们的祖先 */ 后代选择器 特征符号是空格 /*查找div内部所有的后代span*/ div...典型的应用场景是用来匹配语言简写代码（如 zh-CN，zh-TW 可以用 zh 作为 value）。...，那么使用分组和嵌套可以减少代码的冗余； 匹配标签之间用逗号隔开，标签与标签是或的关系； 并列写可以标签和标签、标签和选择器、意思就是可以多个相同选择器或多个不同选择器都可以并列使用； /*并列的情况
CSS 的工作方式是选择一个 HTML 元素（如一个段落），选择一个要更改的属性（如颜色），并应用一个特定的值（如红色）： p {color: red;} “"样式" 一词可能具有欺骗性。...层级选择器 选择器中的空格定义祖先/后代关系。假设我们希望标题中的链接为红色： header a { color: red; } 可以读作："选择 header 标签内所有的 a 元素"。...伪类选择器 HTML 元素可以具有不同的状态。最常见的情况是当您将鼠标悬停在链接上时。当此类事件发生时，CSS 中可能会应用不同的样式。...考虑到我们要更改整个页面，我们可以选择所有 HTML 元素的祖先 body 标签： body{ color: grey;} 所有子元素和后代元素都将从其共同祖先继承该值。...因为 #introduction{ color: red;} ID 选择器具有更高的优先级。 如何避免冲突 在编写CSS时，很容易编写有冲突的规则，比如多次应用同一属性。
2、内部样式表： 将样式编写到head中的style标签里面，然后通过css的选择器来选中元素并为其设置各种样式，可以同时为多个标签设置样式，并且修改时只需要修改一处即可全部应用。 ...3、外部样式表：（最佳） 可以将css样式编写到一个外部的css文件中，然后通过link标签来引入外部的css文件。 ...语法： #id属性值{} 3、类选择器： 作用：class是一个标签的属性，它和id类似，不同的是class可以重复使用，可以通过class属性来为元素分组。...祖先元素：直接或间接包含后代元素的元素叫做祖先元素，一个元素的父元素也是它的祖先元素。 后代元素：直接或简介被祖先元素包含的元素，子元素也是后代元素。 兄弟元素：拥有相同父元素的元素。...语法：父元素 > 子元素 2、后代元素选择器：选中指定元素内的指定后代元素 语法： 祖先 后代 3、兄弟元素选择器：选择下一个兄弟 语法： 选择紧挨的一个兄弟
样式编写到一个外部的CSS文件中，然后通过link标签来引入外部的CSS文件，外部样式表需要通过link标签进行引入，意味着只要想使用这些样式的网页都可以对其进行引用，使样式可以在不同页面之间进行复用，...祖先元素：直接或间接包含后代元素的元素叫做祖先元素，一个元素的父元素也是它的祖先元素。...后代元素：直接或间接被祖先元素包含的元素叫做后代元素，子元素也是后 代元素。...--CSS：--> div.box > span{ color: orange; } 1.2.3.2 后代选择器 后代元素选择器: 作用：选中指定元素内的指定后代元素 语法：祖先 后代 选择器和伪元素选择器，如div p，权值为0001。 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。 继承的样式没有权值。
避免这种情况出现的最好方法就是不要在 css 规则中使用后代选择器（比如 .foo .bar）去继承 css 规则。...如果你这么做，同时被继承的 css 规则有通过后代选择器修饰的样式，生成 css 中的选择器的数量很快就会失控。...值得一提的是，只要你想，你完全可以放心地继承有后代选择器修饰规则的选择器，不管后代选择器多长，但有一个前提就是，不要用后代选择器去继承。...文档 运算 sass 具有运算的特性，可以对数值型的 Value（如：数字、颜色、变量等）进行加减乘除四则运算。...最基本部分,你可以轻松地使用 sass 编写清晰、无冗余、语义化的 css 。
伪元素是添加到选择器的关键字，它允许一种样式，即所选元素的特定部分。CSS用于在HTML标记中应用样式，它允许在不影响实际文档的情况下对文档进行额外标记。...上下文选择器，严格来讲，叫后代组合式选择器，就是一组以空格分隔的标签名。用于选择作为指定祖先元素后代的标签。只要有标签在它的层次结构“上游”存在这么一个祖先，那么就会选中该标签。...问题 20：如何在CSS中定义一个伪类?它们是用来干什么的 CSS伪类是用来添加一些选择器的特殊效果。...在复杂情况下，可以使用选择器和分组方法来应用样式。 无需额外下载。 嵌入式样式表的缺点： 无法控制多个文档。 问题 23：列出使用的各种媒体类型。 不同的介质不区分大小写，因此它们具有不同的属性。...该指令告诉浏览器如何在HTML页面上渲染特定元素。 它由一个选择器和一个遵循规则集的声明块组成。 选择器可以附加到其他选择器，以通过规则集进行标识。 问题 26：什么是 CSS 框架？
上下文选择器，严格来讲，叫后代组合式选择器，就是一组以空格分隔的标签名。用于选择作为指定祖先元素后代的标签。只要有标签在它的层次结构“上游”存在这么一个祖先，那么就会选中该标签。...问题 20：如何在CSS中定义一个伪类?它们是用来干什么的 CSS伪类是用来添加一些选择器的特殊效果。...在复杂情况下，可以使用选择器和分组方法来应用样式。 无需额外下载。 嵌入式样式表的缺点： 无法控制多个文档。 问题 23：列出使用的各种媒体类型。 不同的介质不区分大小写，因此它们具有不同的属性。...当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等； （2）如果规则拥有ID选择器作为其关键选择器，则不要为规则增加标签。...（5）尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过 三层，更多的使用类来关联每一个标签元素。
软件工程1班来说，效果如下图： 一个元素的class可以写多个值，用空格隔开，如：软件工程...语法： #id值 { 属性名；属性值; } 总结 CSS复合选择器 复合选择器建立在基本选择器之上，由多个基础选择器，通过不同的方式组合而成。...语法：祖先选择器 后代选择器 { } （先写祖先，再写后代） 选择器之间，用空格隔开 举例： /* 选中ul中的所有li */ ul li { color...li.front-end { color: blue; } 注意： 后代选择器，最终选择的是后代，不选中祖先。...[属性名] 选中具有某个属性的元素。 2. [属性名=“值”] 选中包含某个属性，且属性值等于指定值的元素。 3. [属性名^=“值”] 选中包含某个属性，且属性值以指定的值开头的元素。 4.
你需要使用 CSS 预处理器（如 Sass、Less 或 PostCSS）进行构建步骤，以便将嵌套代码转换为常规的全选择器语法。...image.png CSS原生嵌套规则 你可以将任何选择器嵌套到另一个选择器中，但必须以符号开头，如&，....(在Sass中也会出现同样的情况）。...在Sass中不是这种情况，最终会编译成这样： .grandparent .parent .child {} 上面的HTML没有样式化，因为元素的类没有遵循严格的grandparent、parent和child...最后，Sass使用字符串替换，所以像下面这样的声明是有效的，可以匹配任何具有outer-space类的元素： .outer { &-space { color: black; } } 而原生CSS
（1）id选择器（ # myid） （2）类选择器（.myclassname） （3）标签选择器（div, h1, p） （4）相邻选择器（h1 + p） （5）子选择器（ul > li） （6）后代选择器...，但是应该避免这种情况出现 19、请解释一下为什么需要清除浮动？...SASS (SASS、LESS没有本质区别，只因为团队前端都是用的SASS) 24、CSS优化、提高性能的方法有哪些？ 关键选择器（key selector）。...样式系统从关键选择器开始匹配，然后左移查找规则选择器的祖先元素。 只要选择器的子树一直在工作，样式系统就会持续左移，直到和规则匹配，或者是因为不匹配而放弃该规则。 ...- 预处理器例如：LESS、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性， 还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率
color:blue; }}这一类是最常见的这个一类是我们日常所常见的&的高级用法作为内层选择器表示对父选择器的引用父选择器运算符 & 的作用，就是让当前的选择器和父级选择器，按照特定的规则进行连接。...如：.demo-title { .demo & { font-size: 20px; }}输出.demo .demo-title { font-size: 20px;}借代父选择器简单的a ...，而不是仅仅重复最近的祖先选择器。...如：p, a, ul, li { border-top: 2px dotted #366; & + & { border-top: 0; }}述列表中有 4 个选择器，列表中所有选择器的所有可能的排列...同样的块在应用不同的修饰符之后，会有不同的外观 */.block--modifier {}通过 bem 的命名方式，可以让我们的 css 代码层次结构清晰，通过严格的命名也可以解决命名冲突的问题，但也不能完全避免
;display:-ms-flexbox;display:flex; ，使得样式文件属性值的冗余情况更为严重。...因此需要注意在编写仅类选择器 CssRule 的 ClassName 时，不能依赖类选择器先后顺序来定优先级，可通过兄弟选择器来将优先级提的更高，从而不受先后顺序影响，如下代码示例。...本方案解决了样式冲突问题，编写样式代码时可以不再用父子选择器的方式来进行样式作用域隔离，减少了祖先选择器的冗余。...因此项目中使用父子选择器这种方式来隔离作用域，会导致大量的祖先选择器冗余。...本方案要求以仅类选择器的方式为主，少量场景使用其他选择器为辅的方式进行编写样式代码。
最近的:has()选择器允许您对父元素和其他祖先应用样式，本文将向您展示如何在Web应用程序开发中使用它。 在CSS的世界中，选择器是驱动我们在网页上看到的美丽且响应式设计的工作的马。...它们允许开发者根据元素的属性、位置和关系来选择和样式化HTML元素。 一个较新的CSS选择器/伪类被称为 :has ，它允许您选择每个具有与您提供给 :has() 函数的选择器匹配的子元素的元素。...它在CSS中是一个重要的解决方案，不仅仅是一个简单的“父级”选择器。 使用 :has() 选择器，您可以将样式应用于父元素或祖先HTML元素。...但在我们深入使用 :has 选择器之前，让我们先来看一下为什么选择器很重要。 项目设置 要开始这个项目，你可以从这个GitHub仓库克隆起始代码。...在本文中，我们探讨了这个强大选择器的功能和潜在用例，它允许我们根据元素的后代来定位目标元素。
用jQuery选择器选择一个对象,会有多种不同的方法可供选择. 1.基本选择器(跟CSS选择器用法一模一样): 名称 用法(示例) 描述 ID选择器...$("ul>li") 使用>号,获取儿子层级的元素,注意:并不会获取孙子层的元素 后代选择器 $("ul li") 使用空格,代表后代选择器,获取ul下的所有的...$("span").parentsUntil("div"); 返回介于 与 元素之间的所有祖先元素(不包含div元素). 2.jQuery遍历-后代 后代是子、孙、曾孙等等...具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop() 注意: 1.1类比attr操作的css操作: jQuery通过...这么做是为了css的编写和维护.
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
云直播
对象存储
腾讯会议
