文章目录 一、CSS 选择器作用 二、CSS 选择器分类 三、标签选择器 1、简介 2、代码示例 四、类选择器 1、简介 2、类名规范 3、代码示例 4、div 与 span 标签 ① span...标签 ② div 标签 5、多类名选择器 一、CSS 选择器作用 ---- CSS 作用 : 以下面的代码为例 , 先通过 选择器 h3 将 HTML 中的 h3 标签类型选择出来 , 然后为这些标签设置...style 样式 ; h3 { color: blue; font-size:20px; } CSS 选择器 作用 : 在 HTML 文件 中 选择 符合特定规则的 标签 ; 二、CSS...1、简介 CSS 类选择器 可以 将 页面中的 某几个 标签选择出来 , 使用 " .类名 " 识别标签 ; CSS 类选择器 使用方式如下 : 首先 , 在标签中的 class 属性中设置类名 ;...font-size:20px; } CSS 类选择器 优点 : 可以选择指定的若干标签 ; 2、类名规范 类名规范 : 多个单词组成的类名 , 推荐使用 - 隔开 ; 不要使用 纯数字 ,
1.伪类选择器和伪元素选择器 伪类选择器是用来向某些选择器来添加效果。...:visited :hover :active （6）用户行为伪类选择器 :focus 伪元素选择器则是用来将特殊的效果添加在选择器上。...：伪类不修改DOM容，通过一些特定的选择器根据特定的状态，特定条件来修改元素的样；而伪元素可能改变DOM结构，创造了虚拟的DOM 伪类选择器只是相当于给标签加上了个名字，让我们能够找到精准的位置，而伪元素选择器修改了他原本的结构...2.注意 可通过使用css伪类实现点击元素变色的效果，两个伪类是:active, :focus :active :active选择器用于选择活动链接。...当在一个链接上点击时，它就会成为活动的（激活的），:active选择器适用于所有元素，不仅限于链接a元素 :focus :focus 选择器用于选取获得焦点的元素。
在CSS的探索之旅中，伪类和伪元素无疑为我们的样式设计增添了无限可能。它们不仅能够帮助我们精确地定位文档中的元素，还能实现丰富的交互反馈和视觉效果。...本文旨在深入浅出地探讨CSS伪类与伪元素的核心概念、常见问题、易错点及其规避策略，并通过实例代码加深理解。...基本概念 伪类（Pseudo-classes） 伪类用于表示元素的特定状态，如用户交互（hover、active）、链接状态（link、visited）等。...实践技巧 利用:not()排除特定元素：伪类:not()可以帮助我们更精准地选择元素，排除不必要的样式应用。...掌握它们的关键在于理解其背后的逻辑与应用场景，以及不断实践以避免常见的陷阱。希望本文能成为你探索CSS高级选择器路上的一盏明灯。
要精确地选择特定的元素或元素组来应用样式，可以使用 CSS 选择器。以下是一些常用的 CSS 选择器： 元素选择器：通过元素名称选择元素。例如，使用 p 选择所有 元素。...p { color: blue; } 类选择器：通过类名选择元素。可以在 HTML 元素中使用 class 属性来指定类名，然后在 CSS 中使用 .类名 来选择元素。...例如，使用 .blue-text 选择所有具有类名为 “blue-text” 的元素。 .blue-text { color: blue; } ID 选择器：通过元素的 ID 属性选择元素。...可以在 HTML 元素中使用 id 属性来指定唯一的 ID，然后在 CSS 中使用 #ID 来选择元素。例如，使用 #header 选择具有 ID 为 “header” 的元素。...a:hover { text-decoration: underline; } 这些是一些常用的 CSS 选择器，通过结合使用它们，可以精确地选择特定的元素或元素组来应用样式。
document.querySelectorAll()[4]返回所有匹配的HTML元素，这些元素位于类数组NodeList[5]中。 伪类选择器根据HTML元素的当前状态来定位它们。...或video元素 浏览器最近又收到了三个伪类选择器… :is伪类选择器 注意：这最初被指定为:matches()和:any()，但:is()已经成为CSS标准。...MDN解释：:is()CSS伪类函数将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。这对于以更紧凑的形式编写大型选择器非常有用。 你经常需要在不止一个元素上面应用相同的样式。...:is()选择器与article p具有相同的优先级，但它在样式表的后面，所以文本变成了红色。...重置样式，无论其优先级如何；不需要进一步的选择器或!
除了以前学过的:link、:active、:visited、:hover，CSS3又新增了其它的伪类选择器。... 选择某个元素的第一个子元素； :last-child 选择某个元素的最后一个子元素； :nth-child() 选择某个元素的一个或多个特定的子元素； :nth-last-child() ...选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算； :nth-of-type() 选择指定的元素； :nth-last-of-type() 选择指定的元素，从元素的最后一个开始计算...E::selection 可改变选中文本的样式； ":" 与 "::" 区别在于区分伪类和伪元素 关于before和after CSS2中 E:before或者E:after，是属于伪类的...，并且没有伪元素的概念 CSS3中 提出伪元素的概念 E::before和E::after，并且归属到了伪元素当中，伪类里就不再存在E:before或者 E:after伪类;
在前端开发中，我们经常需要通过JavaScript选择页面上的特定元素。特别是当你需要在一个div元素内部选择一个带有特定类名的子元素时，掌握几种常用的选择方法是非常必要的。...本文将结合实际业务场景，带大家了解如何使用JavaScript选择div内部带有特定类名的元素。 1....使用 document.querySelector document.querySelector 是选择器API中最常用的一个，它允许你通过CSS选择器来获取DOM元素。...就是product-list下的第一个带有product-item类名的元素。...使用 document.getElementsByClassName getElementsByClassName 方法可以返回所有带有指定类名的元素集合。
在前端工程师的日常工作中，使用 CSS 元素选择器是稀松平常的事；无论你是编写一般的 CSS 还是需要经过编译的 SASS，SCSS，LESS等，最终都被编译成一行一行的 CSS 样式属性，最终交给浏览器解析并套用...但是你想过没有这是如何实现的呢？ 浏览器渲染 我们先看一下浏览器的渲染步骤： ? CSS 在被浏览器加载后，会被解析成 CSSOM 树，并尝试与 Dom 叠加成渲染树，随后进行计算位置、渲染等步骤。...这样看来，CSS 属性套用的关键就在于如何从 CSS 转化成 CSSOM 树，以及怎么把 CSSOM 套用到 DOM 上去。...，以及前面讨论到的 CSS 运算过程，编写 CSS 时也有几个地方可以稍微留心一下： 由于样式规则的目标属性会分组存放，id 选择器效率非常高，所以是不能与其他条件混用的。...延伸 认识了 CSS 选择器之后，你一定会很好奇，JavaScript 的元素选择器又是怎么回事呢？
通过css类选取元素 html所有的元素拥有class属性，该属性会对元素进行分组，标识为某一组。...doctype来进行选择怪异模式，和标准模式的，怪异模式是为了向后兼容而存在的，标准模式不是（兼容以及不太重要了，但是还要知道一点，这是ie8的问题，但愿再过几年直接win7也没有了） 通过css选择器选择元素...css样式表可以进行选择，这里仅仅是一些常见的css选择器 #nav // id = nav 的元素 div // 选择div元素 .warning // 选择class属性为waring的元素 /...// 选择class中包含fatal和error的span元素 span[lang="fr"].warning // 所有使用法语，并且class中包含warning的span元素 // 选择器指定文档结构.../ 的子元素中的第一个元素 // 选择器组合选择多个或者组合元素 div, #log // 所有的div元素，以及id为log的元素属于和关系 // 正则选择器 a[src^=
css后代选择器和子元素选择器的区别 说明 1、后代选择器使用空格作为连接符号，子元素选择器使用>作为连接符号。 2、后代选择器选中所有的特定后代标签，子元素选择器选中所有的特定的直接标签。...后代选择器会选中指定标签中, 所有的特定后代标签, 也就是会选中儿子/孙子..., 只要是被放到指定标 签中的特 定标签都会被选中 子元素选择器只会选中指定标签中, 所有的特定的直接标签, 也就是只会选中特定的儿子标签...实例 比如说只要选择class为box的li标签而不选到最内层的li标签该如何做？ 单纯用后代选择器很难做到吧！... 以上就是css...后代选择器和子元素选择器的区别，希望对大家有所帮助。
大家好，又见面了，我是你们的朋友全栈君。...css04.css 1 /*属性选择器相关样式*/ 2 3 4 [love] { 5 color: green; 6 } 7 8 [love="me"] { 9...1 补充示例 31 属性选择器 2 补充示例 32 属性选择器 3 补充示例... 33 属性选择器 4 补充示例 34 属性选择器 5 补充示例 35 属性选择器 6 补充示例 36 属性选择器 7 补充示例 37
css子元素选择器的介绍 说明 1、子元素选择器只会查找儿子, 不会查找其他被嵌套的标签。 2、子元素选择器之间需要用>符号连接, 并且不能有空格。...3、子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器。 子元素选择器可以通过>符号一直延续下去。 作用: 找到指定标签中所有特定的直接子元素, 然后设置属性。...格式: 标签名称1>标签名称2{ 属性:值; } 以上就是css子元素选择器的介绍，希望对大家有所帮助。
一般 hover 效果只用在自身元素和控制子元素，那么可以直接用 CSS 控制兄弟元素的 hover 效果吗？...答案是可以的，不过只能控制相邻的元素，具体示例代码如下： 1、如果 #b 元素是 #a 元素的子元素，可以直接通过 #a:hover #b {...} 这种方式来控制。...示例代码如下： #a:hover #b{ color:green; } 2、#b 与 #c 是亲兄弟关系，有相同的父节点，且 #b 跟...来控制 #c 的样式。 当鼠标移到 #b 时，#c 的样式就会改变。...示例代码如下： #b:hover + #c{color : red;} HTML元素： 元素1 元素2
对于仅指定一个 class 的场景，我们通常会想到使用 :last-child 或者 :only-child 但是亲测发现，这些伪类选择器不是仅在子元素只有一个我们想要筛选的 class 类的时候...，才会被选择，而是仅有一个子元素的时候才会被选中，所以，如果我们子元素还有其他非该类的子元素，则不会被认为是一个，不会被以上伪类选择器选中。...} btn1 其他子元素... 所以解决方案，就是要保证子元素类型相同，否则非想要选择的 class 类的子元素也会算一个 child，或者我们可以给要设置仅一个class...场景的样式的时候，再给相同 class 的子元素包一层 div 即可。
在这篇博客中，我会结合具体例子来分析伪类选择器（可能概念性不是很强，但是好用 ~ ） 属性选择器 input[value] 意思是选择的input标签，必须具有value属性 input[type=text...] 意思是选择的input标签，必须是属性type值为text的元素 div[class^=box] 意思是选择的div标签，属性class的值是以box开头的 div[class$=box] 意思是选择的...但低于div .box…） 结构伪类选择器 ul:first-child 选择ul中的第一个孩子 ul li:first-child 选择ul中的第一个li ul:last-child 选择ul中的最后一个孩子...element::before 在element元素内部的前面插入内容 element::after 在element元素内部的后面插入内容 （此处的element代指所有标签元素） 这个选择器是要写在...-- 伪元素选择器 ::before 在元素内部的前面插入内容 ::after 在元素内部的后面插入内容 注意： before和
前两天不知道是哪位同学问的问题，鼠标滑过一个div的时候，怎么控制子集元素属性的出现和隐藏，然后我说用用mouseover和mouseout这两个鼠标事件就行，那如果js不怎么熟悉的时候，可以用CSS:...方法： 使用a 控制其他块的样式： 使用a控制a的子元素 b： .a:hover .b { background-color:blue;...} 效果是这个样子的： ?...demo是昨天的基础上写的： <!
最近的:has()选择器允许您对父元素和其他祖先应用样式，本文将向您展示如何在Web应用程序开发中使用它。 在CSS的世界中，选择器是驱动我们在网页上看到的美丽且响应式设计的工作的马。...它们允许开发者根据元素的属性、位置和关系来选择和样式化HTML元素。 一个较新的CSS选择器/伪类被称为 :has ，它允许您选择每个具有与您提供给 :has() 函数的选择器匹配的子元素的元素。...何时使用:has选择器 :has() 选择器是一种CSS伪类，允许您选择包含特定子元素的元素。...有条件地添加或删除样式：如果 元素包含特定数量的子元素，您可以使用 :has() 选择器为其添加边框。...根据内容选择元素：您可以使用 :has() 选择器来选择所有包含具有 "important" 类的子元素的 元素。 :has() 选择器可以与任何有效的CSS选择器一起使用，包括其他伪类。
css中类选择器的注意事项 注意 1、每个HTML标签都有一个属性叫做class, 也就是说每个标签都可以设置类名。 2、在同一个界面中class的名称是可以重复的。...3、在编写class选择器时一定要在class名称前面加上.即可。...类名的命名规范和id名称的命名规范一样 类名就是专门用来给CSS设置样式的 在HTML中每个标签可以同时绑定多个类名 ，格式:类名1 类名2 ......"> 作用：根据指定的类名称找到对应的标签, 然后设置属性 格式： .类名{ 属性:值; } 以上就是css中类选择器的注意事项，希望对大家有所帮助。
近期由于受到谷歌退出中国市场的影响，就连之前可以正常使用的翻译 API 也无法使用了。 无奈之下为不影响本站的加载速率，决定暂时关闭谷歌的在线翻译功能。...熟悉 JS 代码的小伙伴应该都清楚这里发生了啥，最简单的修复方式就是在注册点击事件前，加个 if 条件判断，当元素不存在时不进行事件注册。...于是便想到了使用 CSS 的选择器语法来支持，首先定位到这些按钮的父元素上，然后再逐一对子元素（即按钮本身）进行事件注册，这样当某个按钮被删除后也就无须 if 条件判断，同样也不用调整 JS 代码。...顺着这个思路往下走的时候，发现并不是所有按钮的事件都是相同的，得排除掉其它非同类项的按钮。 结合之前编写 SCSS 代码时的经验，是否可以使用 :first-child 这样的选择器进行排除呢？...相比于 JS 中使用 ID 或名称来定位页面元素的方式，这种使用 CSS 选择器的模式，操作起来会更的加简便和灵活。
在编写CSS时，你有时会用很长的选择器列表来针对多个元素的相同样式规则。例如，如果你想对一个标题元素内的任何标签进行颜色调整，你可以这样写。...初识 :is() 和 :where() 这些都是功能性的伪类选择器，注意末尾的()和它们以:开头的方式。可以把它们看作是运行时的动态函数调用，与元素相匹配。...在编写CSS时，它们为你提供了一种在选择器的中间、开头或结尾将元素分组的方法。它们还可以改变特异性，让你有权力取消或增加特异性。...，如果任何一个选择器无效，所有的选择器都会无效，列表将无法匹配元素。...作者样式和第三方库样式之间的特定性竞争可以结束了。在编写CSS时，将没有特定性可供竞争。CSS在这样的分组功能上已经工作了很长时间，它就在这里，而且在很大程度上仍然是未开发的领域。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
