我们先认识CSS中的三个选择器，分别是元素选择器、类选择器和ID选择器，这三个选择器其中之一的元素选择器刚刚咱们已经使用过了，使用元素选择器可以对同类元素的样式进行修改，想要具体到某个元素修改其样式咱们可以通过类选择器以及...1_bit：当然可以的，这个只是个名称，但是在元素选择器中则不能这样做，因为元素选择器是直接使用的标签名，在类选择器中是使用样式名，所以是可以更改的。...2.3 多个类样式的使用 1_bit：在使用类选择器时，咱们可以同时调动两个类样式对一个标签进行修饰。 小媛：还可以这样吗？...1_bit：我可以给你举一个例子，例如有一个列表，这些列表里面有一些连接，这些链接部分没有失效的则有 href 属性，失效的则没有，那么这个时候就需要你给这些没有失效的连接标红醒目，那就很好的用到了属性选择器...3.7 相邻元素选择器 1_bit：接下来咱们了解一下相邻元素选择器，这个选择器顾名思义，选择响铃的元素；编写方法很简单，例如咱们需要使标题 h1 后最近的元素改变样式，就可以编写样式成。
如果设置了一个 .button 类的按钮，则可以在任何 元素上选择是否使用 .button 类。...但是有两种方法可以编写简洁的 CSS，而不需要额外的 class！ 方法 1：使用 mixin 第一种方式，如果使用 Sass 或任何其他预处理器，则 使用mixin来封装 需要重用的 所有代码。...即将分享的第二种方法是使用普通的 CSS，所以你也可以使用它！ 方法 2：使用 CSS 属性选择器 第二种方法 使用CSS属性选择 器执行稍微更复杂的选择。...不幸的是，这也意味着选择器也是针对 BEM 元素，这就是为什么引入第二部分的原因。...如果你使用 BEM 元素，则可以使用优先级为 10 而不是 20 的的选择器来为 .form__row 提供样式。
2.1 CSS 选择器 首先，为了让大家对于选择器有一个总的概念。我将 CSS 选择器分为：独立选择器和组合选择器。 独立选择器是指有着明确定义的独立的选择器。组合选择器是独立选择器的各种组合。...伪类选择器 :pseudo-class 页面中的元素会有一些特殊的状态，如超链接的状态和表单元素的状态，我们可以通过伪类选择器来选择。...书中有很多没有提到的新伪类选择器，大家感兴趣的话可以参考之前同事写的另一篇文章盘点 CSS*Selectors_Level4*中新增的选择器[7]。大家也可以参考一下MDN 的文档[8]。...使用同一的规范来编写 CSS 会帮助我们简化选择器，降低特殊性。 最后，在大的网站中，每个元素所应用的规则会有很多，其特殊性也比较复杂。...当我们预想中的样式没有生效时，可以借助浏览器来查看元素（如 Chrome 中右键“检查元素”），可以看到元素匹配的所有 CSS 选择器及规则，包括浏览器默认样式以及下面要说的继承样式。
我找到编写这段代码的同事询问：“为什么需要定义一个isFocus状态呢？” 他看了代码良久，有些疑惑地解释说：“这是为了追踪输入框的聚焦状态，从而在聚焦时改变背景色。” “这个状态还有其他用途吗？”...我追问。 “没有，就这个作用。有问题吗？”他回答。 我继续探询：“不使用isFocus状态，我们还能达到同样的效果吗？” 他思考了一会儿：“如果不添加类名来标识输入框的聚焦状态，我们怎么区分呢？”...我提出了另一种方案：“我们能不能仅用CSS来实现这个效果？” 他迟疑了一下：“但是CSS怎么能识别输入框是否聚焦呢？” 我提醒他：“你有没有试过使用伪类选择器？” “伪类？我通常只用类选择器。”...我解释道：“我们可以使用:focus伪类来实现这个效果。你可以先回去继续你的工作。” 四、审查他另外的代码 我继续审查了这位同事的其他代码，发现他对CSS的理解似乎并不深入。...示例 假设我们想为一个列表中的第一个项目添加特殊样式，我们可以使用子选择器和伪类选择器的组合来实现这一点： ul > li:first-child { color: red; } 这个示例展示了如何使用组合选择器来精确选择并样式化特定的元素
: red; } .css-mistake { color: green; } 默认情况下，标题文本的颜色将为“绿色”，因为类选择器具有比元素（标签）选择器更高的CSS特异性选择器。...important ，您可以覆盖该样式CSS规则（从而使元素（标签）选择器覆盖类选择器）。通过这种方式，标题文本的颜色将为红色，优先于类选择器设置的绿色。 h1 { color: red !...您还可以将其用于测试和调试样式表。如果某个样式不起作用，您可以应用 !important 来强制应用所需的样式，覆盖任何冲突的样式。这种方法可以帮助您快速定位代码中的问题所在。...CSS中有许多选择器方法，包括标签（元素）、类、ID和伪元素。知道何时使用选择器以及何时不使用选择器非常重要。此外，您还必须了解CSS选择器的工作原理。...为元素选择器选择最具体的选择器。 使用选择器组合器来选取具有相同样式的元素。 经常学习代码重构（您将能够发现复杂的选择器）。 使用CSS模块来组织代码结构。 避免使用后代选择器。
程序中,不管是页面元素的选择、内置的功能函数,都是美元符号“”来起 始的。...}); script> 键值对key:value写法 案例：百度换肤实现 4.1.7. jQuery操作类 1)添加类 - 添加一个类 addClass(class)给某个元素添加一个 CSS 类...$('div').addClass('myClass1'); 代码: 注意:类名没有”点” -添加多个类 addClass(class1 class2 class3...)给某个元素添加多个 CSS...)删除某个元素的一个 CSS 类 $('div').removeClass('myClass1'); -删除多个类 removeClass(class1 class2 class3…)删除某个元素的多个...">br/> a>我没有hrefa> div> body> html> 4.1.8.6.筛选(过滤)选择器 4.1.8.7.父子兄弟选择 案例:百度风云排行榜 4.1.8.8
:is()你是否曾经写过下方这样冗余的CSS选择器:.active a,.active button,.active label { color: steelblue;}其实上面这段代码可以这样写：.....section, .aside, .nav) h2 { color: steelblue;}但是 :is() 不仅对父选择器和子选择器有用，它也可以选择多个相邻的选择器，比如:button:is(:...例如，你知道下面的 CSS 代码中的按钮是什么颜色吗?...:has()一个相关但非常不同的伪类是:has()。:has() 允许选择包含匹配选择器(或选择器集)的子元素的父元素。...但我认为在某个时间点上，它们确实是处理任何重要CSS的强制要求，而现在情况不再如此了。最后一个惊喜我想说的是，CSS的未来仍然是光明的。CSS 工作组正积极致力于直接向CSS中添加嵌套选择器。
:is() 你是否曾经写过下方这样冗余的CSS选择器: .active a, .active button, .active label { color: steelblue; } 其实上面这段代码可以这样写...： :is(.section, .aside, .nav) h2 { color: steelblue; } 但是 :is() 不仅对父选择器和子选择器有用，它也可以选择多个相邻的选择器，比如: button...例如，你知道下面的 CSS 代码中的按钮是什么颜色吗?...:has() 一个相关但非常不同的伪类是:has()。:has() 允许选择包含匹配选择器(或选择器集)的子元素的父元素。...但我认为在某个时间点上，它们确实是处理任何重要CSS的强制要求，而现在情况不再如此了。 最后一个惊喜 我想说的是，CSS的未来仍然是光明的。CSS 工作组正积极致力于直接向CSS中添加嵌套选择器。
选择器： :invalid 与 :valid 判断有效性的伪类选择器（:valid和:invalid）匹配有效或无效，或元素。...:valid伪类选择器表示值通过验证的，这告诉用户他们的输入是有效的。 :invalid伪类选择器表示值不通过通过验证的，这告诉用户他们的输入是无效的。...实现逻辑 有了上面的几个 属性以及 css 选择器的伪类说明，那么这个纯CSS实现表单验证的功能就变得简单多了。...清空输入状态 清空输入状态 也比较简单，可以直接用伪类选择器 :empty 来判断，只要内容为空，则隐藏错误信息，所以我们有： input[required]:empty + span {...总结 一个完整的 纯CSS表单功能 就这么完成了，DEMO地址在这： https://codepen.io/krischan77/pen/WmVKYr 也可以点击 『阅读原文』 来查看 由于实际项目的复杂度
当你改变一个特定元素的样式, 你需要改变的很有可能不仅仅是CSS（因为大多是类都是公共的），而且还会添加新的类。...这种方法使得编写和维护代码都更加容易，并且吸引了很多开发者。 3、Atomic CSS ? 使用Atomic CSS，为每一个可重用的属性创建一个单独的类。...让我们看一个例子: Button 这样一个类的链并不简单，所以让我通过属性来组织这些值。...使用一个鲜为人知，作为class属性的选择器"~ =" (IE7+)：该选择器选择属性值包含指定单词的元素，用空格分隔。...这些方法中没有一条绝对的规则——你可以从开始使用一套方案来创建你自己的东西， 或者从头开始创建一条新的方法。 感谢阅读！ 本文完〜
基本选择器： 标签选择器：针对一类标签 ID选择器：针对某一个特定的标签使用 类选择器：针对你想要的所有标签使用 通用选择器（通配符）：针对所有的标签都适用（不建议使用） 下面来分别讲一讲。...比如页面上有一个id为pp的p，一个id为pp的div，是非法的！ 一个标签可以被多个css选择器选择： 比如，我们可以同时让标签选择器和id选择器作用于同一个标签。...实际上，css有着非常严格的计算公式，能够处理冲突. 一个标签可以被多个css选择器选择，共同作用，这就是“层叠式”的第一层含义 3、类选择器：规定用圆点.来定义 、针对你想要的所有标签使用。...active：点击某个标签没有松鼠标时 CSS允许对于元素的不同状态，定义不同的样式信息。...（长按状态）：点击某个标签没有松鼠标时 举个例子： css"> /* 伪类选择器：动态伪类*/ input:focus/*让input文本框获取焦点时
但是奈何那会没有成型的工具，更没有现在高质量的组件库，从此解放了我们的代码编写，真正做到了开箱即用，它不香吗？...之前我们编写结构代码的时候一般会选择使用div与类名/ID名的方式来命名一个模块，所谓DIV+CSS开发模式就是这样由来。那么这种方式可否可行呢？...关于view.css其实就是一个更高层次的编写，属于一个页面的样式文件。 选择器使用 选择器可对某一个节点进行样式编写，有同学可能会说，我能把我的节点样式应用成功就好，还需要关心它怎么使用吗？...所以第一个问题就是我们一定要避免选择器的嵌套过深，因为很耗费性能。假如可以使用ID匹配到唯一的元素就不用使用其他的选择器了。...id/class：id选择器一般使用在全局唯一的元素节点上面，如果确定元素节点唯一的情况下我们就可以使用，但是假如元素节点不唯一，那么就推荐使用class。
它们允许开发者根据元素的属性、位置和关系来选择和样式化HTML元素。 一个较新的CSS选择器/伪类被称为 :has ，它允许您选择每个具有与您提供给 :has() 函数的选择器匹配的子元素的元素。...它在CSS中是一个重要的解决方案，不仅仅是一个简单的“父级”选择器。 使用 :has() 选择器，您可以将样式应用于父元素或祖先HTML元素。...它是一个强大的CSS工具，您可以用于以下目的： 为子元素的父元素设置样式：如果一个 元素包含一个 元素，你可以使用 :has() 选择器来为它设置样式。...根据内容选择元素：您可以使用 :has() 选择器来选择所有包含具有 "important" 类的子元素的 元素。 :has() 选择器可以与任何有效的CSS选择器一起使用，包括其他伪类。...当我们不悬停在位置和员工上时，您会注意到根本没有任何下拉菜单的指示。如果我们为此使用修饰类，我们将不得不手动进入HTML文件并编写代码。然而，我们可以通过 :has 伪类来实现这一点。
审查 CSS 在开发者工具的“元素”面板中，你可以查看选定元素的所有 CSS 样式。点击某个元素后，右侧的样式面板会列出该元素应用的所有 CSS 规则及其来源。...ID 选择器：优先级高于类选择器和元素选择器（如 #header）。 类选择器：优先级高于元素选择器（如 .menu）。 元素选择器：优先级最低（如 div）。 ...这些方法论提供了一种有结构的方式来编写和组织 CSS。虽然它们可能会生成比你单独为每个选择器制定规则时多出一些冗余代码，但从长远来看，它们能让你的代码更加有序。...比如，你可能会创建一个名为 comment 的类来定义评论组件的样式，然后又创建一个名为 list-item 的类来定义列表项的样式。...在 BEM 中，一个“块”指的是独立的组件，比如按钮、菜单或徽标。一个“元素”则是属于某个块的子组件，例如列表项或标题。修饰符用于标识块或元素的不同状态或变体，从而改变它们的样式或行为。
还记得HTML中我们所提到的class和id吗，这里就派上用场了，选择器呢就是通过class、id、标签名称等方法来获取到元素，声明呢就是给元素设置自己想要的样子，烟熏妆还是甜美妆，画眼影还是涂口红自己说了算...是不是很有意思呢～～下面让们具体看看详细的语法吧～ 要想使用，我们要先知道怎样创建CSS，共有三种创建CSS的方式：外部样式表、内部样式表和内联样式表： （1）外部样式表：比较适合用在某个样式可以同时应用于好多个页面时...；class选择器.tutu{};伪类选择器：:hover；等等。...那么优先级顺序就是这样滴： 通用选择器 元素选择器 = 元素选择器1 类选择器 = 属性选择器 = 类选择器10 选择器100 一个捣蛋分子：!...大家应该也看到了上面的选择器后面有个数字，这代表的是权重，选择器是可以叠加的，比如#tutu .tutu p{}这个时候我们就要通过计算权值来确定谁的优先级高了，权值越大优先级越高，想这个权重就是100
在上一节我们讲解过，尽量不要单独使用元素选择器来定义元素样式，但是如上所述，配合class选择器组成一个层级选择器，这样就可以更便捷、高效第使用元素选择器了。...1 .info1,.info2{ 2 color:red; 3 } 伪类选择器 此前我们学习的所有选择器都是静态的定义某些元素的样式，通过伪类选择器，我们还可以为元素添加一定的行为，这里讲解最常用的伪类选择器...在css3版本之前，伪类选择器和伪元素选择器都是一个冒号，css3的语法中，为了让伪类选择器和伪元素选择器有所区分，在伪元素选择器前又增加了一个冒号，编程了两个冒号。...虽然css还有很多很多选择器我们并没有讲解，但是目前学习的选择器基本可以应付95%以上的开发工作了，在学习的过程中，建议大家先熟悉这些选择器并灵活运用，日后的工作中如果遇到需要其他选择器才能应付的需求，...二、选择器权重 class选择器与id选择器权重对比 到目前为止我们已经可以熟练掌握css选择器了，但是考虑一个问题，如果两个不同的选择器都找到了同一个元素，并且设置不同的样式，那么这个元素的样式应该被哪个选择器所指定呢
也许我们要创建并遵循某个排序规则，但这样实在太复杂了。另一种做法是允许模板设计者和开发者使用任意一种具体的排序，但这样一来，为了找到要修改的目标类名。我们就不得不水平扫视甚至是滚动查看代码。...我并没有对 Tailwind 的优点避而不谈，其提供的部分工具类一定有更多用处亟待探索。但谈及语法的时候，我还是希望标记语言（HTML） 和样式规则可以进行明确的分离。我想，这是一个主观的看法。...PurgeCSS 会分析你的内容和 css 文件，首先它将 css 文件中使用的选择器与内容文件中的选择器进行匹配，然后它会从 css 中删除未使用的选择器，从而生成更小的 css 文件。...替代品 在阅读了 Tailwind 的文档并上手开发了几天之后，我忍不住在想：作者并没有意识到我们中的大多数人已经在日常开发中使用其它工具来简化样式编写了。...这种事态真的乐观吗？我不太确定。 后序 Tailwind 很流行，它的吸引力和追捧者与日俱增。我能理解这其中的原因，毕竟使用它真的可以让我们受益匪浅。
事实是，就像其他任何语言一样，CSS可能会影响或破坏你的设计。这是CSS的10条最佳实践技巧，可以帮助你从样式中获得最大的收益。 1.你真的需要一个框架吗？ 首先，确定你是否真的需要使用CSS框架。...这是我可以推荐的一些流行的CSS方法。 BEM BEM（块，元素，修饰符）是最流行的CSS方法之一。它是命名约定的集合，可用于轻松制作可重复使用的组件。...我们可以使用它们来更改元素的外观，行为或状态。例如，要使用隐藏标记，我们可以说.block--hidden。 ITCSS 倒三角CSS通过将不同的图层引入不同的特性来帮助你更好地组织文件。...有时很难发现冗余，特别是当两个选择器中的重复规则未遵循相同顺序时。但是，如果你的类仅在一个或两个规则中有所不同，则最好外包这些规则并将它们用作额外的类。...压缩删除注释和空白，你的捆绑软件就可以快速的获取数据。 如果还没有，请在服务器端也启用压缩。 进一步减少CSS 和标记大小的另一种好方法是混淆类名。
基础概念选择器要在 HTML 元素中设置 CSS 样式，你需要在元素中设置 "id" 和 "class" 选择器，CSS 中 id 选择器以 # 来定义class 选择器用于描述一组元素的样式，class...class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点"."...CSS 属性选择器就是指可以根据元素的属性以及属性值来选择元素。...伪类CSS 伪类是用来添加一些选择器的特殊效果。由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。...;}，如a.red:visited {color:#FF0000;} :first-child可以使用 :first-child 伪类来选择元素的第一个子元素在下面的例子中，选择器匹配所有作为元素的第一个子元素的
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
