选择器，不仅仅有类 选择器的表现如标题所说的，它选择文档的某些部分，以便你可以将CSS规则应用于它。...这些选择器是CSS3规范的一部分（你可能听说过它们被称为第3级选择器）具有出色的浏览器支持。 有关可以使用的各种选择器的详细信息，请参阅 MDN 参考。...有些选择器的行为就好像你已经将类应用于文档中的某些内容。 例如p:first-child就像你在第一个p元素中添加了一个类一样，这些被称为 伪类选择器。...层叠与继承紧密相关，继承定义了子元素可以继承父元素的样式属性。 它还与特异性有关，不同的选择器具有不同的特异性，当有几个选择器可以应用于一个元素时，继承可以决定应用哪个规则。...看看下面的例子，我用元素选择器 h1 将 h1 标题设置为橙色。同时，我也使用类选择器设置h1 设置为紫色。 由于类更具体，因此h1是紫色的。
html{ scroll-behavior: smooth; } 02.链接的属性选择器 此选择器的目标是具有以“https”开头的 href 属性的链接。...:not() 伪类 该选择器将样式应用于不具有“特殊”类的列表项。 li:not(.special){ font-stlye: italic; } 05....简化布局的网格 CSS 网格提供了一种以更简单的方式创建布局的强大方法。...多个背景图像 将多个背景图像应用于具有不同属性的元素。...CSS :is() 选择器 使用 :is() 伪类简化复杂的选择器。
一、了解属性选择器 CSS属性选择器提供了一种简单而强大的方法，可以根据特定属性或属性值的存在将样式应用于HTML元素。 可以通过将属性（可选地带有值）放在一对方括号中来创建属性选择器。...也可以在其前面放置一个[元素类型选择器。 二、CSS [attribute]选择器 这是属性选择器的最简单形式，如果给定的属性存在，则将样式规则应用于元素。...还可以通过将属性选择器放置在元素类型选择器之后，将选择范围限制为特定的HTML元素。...该选择器将任何具有class属性的HTML元素匹配，该属性包含以空格分隔的值，其中一个为warning。例如，它具有类值的元素相匹配warning，alert warning等等。 3....CSS [attribute |="value"]选择器 可以使用|=运算符使属性选择器与属性具有以指定的值开头的连字符分隔的值列表的任何元素匹配： 示例 p[lang|=en]
2、多个HTML元素可以包含许多文档，可以在其中创建类。 3、要在复杂情况下对样式进行分组，请使用选择器和分组方法。 Q7、使用CSS的缺点？...将特异性（specificity）视为得分/等级，能够确定最终将哪些样式声明应用于元素。 每个选择器在特异性层次结构中都有其位置。...通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。 三、进阶CSS面试题 Q32、什么是弹性布局？...例如，通过将诸如 postcss-loader之类的内容 与 webpack一起使用，您可以编写可能与将来兼容的CSS，从而使您可以使用CSS变量（而不是Sass变量）之类的东西 Q40、相对，固定，绝对和静态定位的元素有什么区别...对于大型项目（具有多种布局和内容类型的站点，或在同一设计框架下具有多个品牌的站点），使用模块化方法并将CSS拆分为多个文件更为明智。 跨文件拆分CSS可以更轻松地将任务打包给团队。
多重选择器（Multiple selectors）： 这些也不是单独的选择器；这个思路是将以逗号分隔开的多个选择器放在一个CSS规则下面， 以将一组声明应用于由这些选择器选择的所有元素。...同样值得一提的是，文档中的多个元素可以具有相同的类名，而单个元素可以有多个类名(以空格分开多个类名的形式书写)。...属性选择器是一种特殊类型的选择器，它根据元素的属性和属性值来匹配元素。...important） 2 专用性 专用性基本上是衡量选择器的具体程度的一种方法——它能匹配多少元素。如上面所示的示例所示，元素选择器具有很低的专用性。类选择器具有更高的专用性，所以将战胜元素选择器。...ID选择器有甚至更高的专用性, 所以将战胜类选择器. 战胜ID选择器的唯一方法是使用 !important。 选择越唯一越专用！
document.querySelectorAll()[4]返回所有匹配的HTML元素，这些元素位于类数组NodeList[5]中。 伪类选择器根据HTML元素的当前状态来定位它们。...MDN解释：:is()CSS伪类函数将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。这对于以更紧凑的形式编写大型选择器非常有用。 你经常需要在不止一个元素上面应用相同的样式。...比如说，下面的复杂选择器将绿色文本颜色应用于所有、和元素，这些元素是的子元素，其包含类.primary或.secondary，并且不是的第一个子元素...开发者们终于有了一种针对父元素的方法。 难以捉摸的"父选择器"一直是人们请求最多的CSS特性之一，但它给浏览器供应商带来了性能上的麻烦。因此，它已经即将到来了很长时间。...简而言之： 浏览器在页面上绘制元素时将CSS样式应用于该元素。因此，在进一步添加子元素时，整个父元素必须重新绘制。
CSS通过告诉浏览器应该如何设置样式和布局来描述网页的表示。我们可以使用多种方法在具有CSS的多语言页面上将不同的样式应用于不同的语言。... 现在我们已经弄清楚了这一点，下面的技术将假定 lang 属性已经被负责任地实现。 :lang() 伪类选择器 结果发现 :lang() 伪类选择器并不那么出名。...但是，此伪类选择器非常酷，因为即使在元素外部声明了语言，它也可以识别内容的语言。...伪类仍然可以使用，如果我们使用更常见的属性选择器，例如 [lang="zh]，那么这个属性必须在 元素上才能生效。 使用属性选择器 这就引出了我们的下一个技术，使用属性选择器。...这让我们可以选择具有特定属性的元素或具有特定值的属性。 匹配属性选择器的方法有七种，但是我只讨论那些我认为与 lang 属性更相关的方法。
solid #666; } .nav li:last-child { border-right: none; } 这是一种很混乱的方式，它不仅强制浏览器以一种方式渲染，然后又通过特定的选择器来撤销它...然而，最重要的是，我们可以通过使用：not伪类(pseudo-class) 在你想声明的元素上仅仅只使用一种样式： .nav li:not(:last-child) { border-right...8、使用 “OWL选择器” 使用通用选择器（universal selector）* 和相邻的兄弟选择器（adjacent sibling selector）+ 可以提供一个强大的的CSS功能，给紧跟其他元素中的文档流中的所有元素设置统一的规则...12、强制使用属性选择器显示空链接 这对于通过CMS插入的链接特别有用，CMS通常不具有类属性，并帮助您在不影响级联的情况下对其进行特定样式设置。...CSS级别来自于CSS变量，它允许您声明一组公共属性值，这些值可以通过样式表中任何位置的关键字重用。
solid #666; }.nav li:last-child { border-right: none; } 这是一种很混乱的方式，它不仅强制浏览器以一种方式渲染，然后又通过特定的选择器来撤销它...然而，最重要的是，我们可以通过使用：not伪类(pseudo-class) 在你想声明的元素上仅仅只使用一种样式： .nav li:not(:last-child) { border-right...); } 8、使用 “OWL选择器” 使用通用选择器（universal selector）* 和相邻的兄弟选择器（adjacent sibling selector）+ 可以提供一个强大的的CSS...、强制使用属性选择器显示空链接 这对于通过CMS插入的链接特别有用，CMS通常不具有类属性，并帮助您在不影响级联的情况下对其进行特定样式设置。...级别来自于CSS变量，它允许您声明一组公共属性值，这些值可以通过样式表中任何位置的关键字重用。
: red; } .css-mistake { color: green; } 默认情况下，标题文本的颜色将为“绿色”，因为类选择器具有比元素（标签）选择器更高的CSS特异性选择器。...但是使用 !important ，您可以覆盖该样式CSS规则（从而使元素（标签）选择器覆盖类选择器）。通过这种方式，标题文本的颜色将为红色，优先于类选择器设置的绿色。...CSS中有许多选择器方法，包括标签（元素）、类、ID和伪元素。知道何时使用选择器以及何时不使用选择器非常重要。此外，您还必须了解CSS选择器的工作原理。...标签选择器：这些选择器使用标签名称（例如：div, p ）来定位特定的HTML元素。它们具有最低的特异性，因为它们也会导致广泛的样式，即将样式应用于所有具有指定标签的HTML元素。...类选择器：这些选择器更具体，不像标签选择器那样，因为它们使用应用于HTML元素的类属性。例如：（ .container ），（ .header ）。
当用户打印页面时，您可以提供不同的样式信息，以便于打印出来的页面更易于阅读。 总之，在HTML中，您使用标记语言来描述文档的内容而不是它的样式。您可以使用CSS来指定它的样式而不是它的内容。...ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。 可以使用类选择器词列表方法为一个元素同时设置多个样式。...我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。...red; } 5.1.4 － 通配符选择器 通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色...继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。
Angular应用程序使用标准CSS进行样式化。 这意味着您可以将所有关于CSS样式表，选择器，规则和媒体查询的知识直接应用于Angular应用程序。...您可以在每个组件的上下文中使用最有意义的CSS类名称和选择器。 类名和选择器是组件本地的，不会与应用程序中其他地方使用的类和选择器相冲突。 应用程序中其他位置的样式更改不会影响组件的样式。...通过在:host之后的括号中包含另一个选择器使用函数形式有条件地应用宿主样式 下一个示例再次定位主机元素，但仅限于它还具有activeCSS类。...例如，一个CSS主题类可以应用于文档元素，并且你想改变你的组件看起来如何基于这个。 使用:host-context()伪类选择器，它的作用就像:host()的函数形式一样。...以下示例仅在某个祖先元素具有CSS类theme-light的情况下，才会将background-color样式应用于组件内的所有元素。
多年来，CSS 开发者一直希望能够根据元素内容来选择元素。虽然 CSS 提供了许多基于特征选择元素的选择器，但直到最近才有了根据元素内容选择元素的方法。 幸运的是，:has() 的引入改变了这一点。...这个新功能是一个“颠覆者”，因为它允许你根据元素内容选择元素。 在本文中，我们将深入探讨其中一个最受期待的 CSS 特性：:has 伪类。事实证明，它远不仅仅是一个“父选择器”。...它应用于我们想应用规则的元素上，并将其传递给应该包含的元素的选择器： /* 这里我们选择任何包含 `h1` 的具有 `post` 类的元素 */ .post:has(h1) { background-color...例如，要选择具有 hr 元素作为直接子元素的 div 元素，可以使用选择器 div:has(>hr)。 我们可以使用 相邻兄弟组合器 + 来选择紧跟在另一个元素后面的元素。...结论 :has 伪类是 CSS 选择器工具中的一个强大补充。它允许你根据元素内容选择元素，从而简化了许多情况，使你的代码更易于维护。通过使用组合器，你可以进一步细化选择并实现更高级的效果。
它们允许开发者根据元素的属性、位置和关系来选择和样式化HTML元素。 一个较新的CSS选择器/伪类被称为 :has ，它允许您选择每个具有与您提供给 :has() 函数的选择器匹配的子元素的元素。...它在CSS中是一个重要的解决方案，不仅仅是一个简单的“父级”选择器。 使用 :has() 选择器，您可以将样式应用于父元素或祖先HTML元素。...何时使用:has选择器 :has() 选择器是一种CSS伪类，允许您选择包含特定子元素的元素。...根据内容选择元素：您可以使用 :has() 选择器来选择所有包含具有 "important" 类的子元素的 元素。 :has() 选择器可以与任何有效的CSS选择器一起使用，包括其他伪类。...既然我们已经到了教程的结尾，希望你对 CSS 选择器/伪类有所了解。 结论 CSS :has 选择器提供了一种创新的方法来解决网页开发中的复杂样式挑战。
标签选择器 标签选择题其实就是HTML代码中的标签，如等 类选择器 类选择器在CSS样式中是最常用到的。...语法：.类选择器名称{CSS样式代码;} 注意： 1、英文圆点开头 2、其中类选择器名称可以任意起名 使用方法： 第一步：使用合适的标签把要修饰的内容标记起来，如 类选择器</span...可以使用类选择器词列表方法为一个元素同时设置多个样式，但id选择器不可以。 子选择器 加入大于符号（>）用于选择指定标签元素的第一代元素。...通用选择器 通用选择器是功能最强大的选择器，它使用一个(*)号指定，它的作用是匹配HTML中所有标签元素，如下面代码使用HTML中任意标签元素字体全部设置为红色： * { clolr:red; } 伪类选择器...继承是一种规则，它允许样式不仅仅是用于某个特定HTML标签元素，而且应用于其后代，如某种颜色应用于p标签。
让我们深入了解CSS是如何发展至今的（或者直接滚动到最后一节，展望未来…）。 CSS选择器——样式的不断演变之路 CSS选择器就像标签游戏中的精确指令。它是一条规则，用于识别需要样式化的HTML元素。...还记得旧的HTML标签，比如font和center吗？我们使用它们是因为我们必须这样做，而不是因为我们想这样做。然后，就像90年代漫画书中的超级英雄一样，CSS出现了，它带来了选择器的力量。...它指的是将不同的样式表结合起来，并解决适用于同一元素的不同CSS规则之间的冲突。 这里的特异性概念发挥了关键作用。ID选择器的特异性高于类选择器，类选择器的特异性高于类型选择器。...根据后代元素来设置样式的一种方法。基本上，你可以根据子元素来应用样式，这意味着它可以作为一种理想的父选择器。然而，你也可以在父元素内部对子元素进行样式设置。...子网格 在Firefox和Safari中得到支持，并在Chrome的标志下使用 子网格是完善网格布局的一部分，可以将网格布局应用于网格项的子元素，从而实现更一致和可维护的布局。
与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。 2、可以使用类选择器词列表方法为一个元素同时设置多个样式。...我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。...继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。...2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。 ID选择器和类选择器的区别： ID选择器只能在文档中使用一次。 可以使用类选择器词列表方法为一个元素同时设置多个样式。...通用选择器 通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素 伪类选择器 a:hover{color:red} 分组选择器 当你想为html中多个标签元素设置同一个样式时
> class和id选择器的区别 相同点：可以应用于任何元素 不同点： ID选择器只能在文档中使用一次。...可以使用类选择器列表方法为一个元素同时设置多个样式 子选择器(>) 用于选择指定标签元素下的第一代子元素。...继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。...Relative与Absolute组合使用 小伙伴们学习了12-6小节的绝对定位的方法：使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位以后，大家有没有想过可不可以相对于其它元素进行定位呢...除了上面讲到的插入table标签，可以使父元素高度确定的多行文本垂直居中之外，本节介绍另外一种实现这种效果的方法。但这种方法兼容性比较差，只是提供大家学习参考。
内容的呈现则由应用于元素上的 CSS 样式控制，它描述了网页的表现与展示效果。 JavaScript 则是负责网页的功能与行为，如与用户的交互。...但这两种相比较于第一种使用全局属性的方式，它们并没有直接在相关联的元素上书写，因此需要有一种机制，来将这些 css 代码关联到需要作用的元素对象上，这个机制就叫：选择器。...选择器 选择器是专门用来将 css 代码关联到指定的 HTML 文档中的元素对象上的，毕竟 css 已经被抽离出 HTML，各自负责各自的职责，但总归需要一种桥梁将两者关联在一起。...; color: #6a90d9; } 作用于所有具有 href 属性的元素，不管有没有使用 组合选择器 <a class="myClass" href="index.<em>html</em>...: gray; color: #6a90d9; } <em>元素</em><em>选择器</em>和 class <em>选择器</em>组合<em>使用</em>，作用于 a <em>元素</em>中有声明 myClass 类型<em>的</em><em>元素</em> 通用<em>选择器</em>
1、使用:not()伪类简化你的CSS :not()伪类允许你将样式应用于所有不匹配指定选择器的元素。这是简化你的CSS并避免手动列出元素或应用类来排除某些元素的好方法。...使用:hover伪类和transition属性是一种轻量级的方法，可以为你的设计添加一些简单的交互效果，提升用户体验，而无需依赖复杂的JavaScript代码或外部库。...通过使用这个选择器，你可以轻松地为你的网站应用全局样式。 使用*选择器可以方便地将样式应用于网页上的所有元素，无需逐个指定每个元素的选择器。...使用:first-child和:last-child伪类，你可以直接选择并样式化父元素的第一个和最后一个子元素，而无需为它们添加额外的类或选择器。...通过使用CSS变量，你可以在整个样式表中定义和使用变量，将值存储为变量后，可以在需要的地方重用这些值。
领取专属 10元无门槛券
手把手带您无忧上云
