本文将深入浅出地探讨三种基本CSS选择器——ID选择器、Class选择器、Tag（标签）选择器，分析它们的使用场景、常见问题、易错点以及如何避免这些问题，并提供实用的代码示例。 1. ...Tag选择器（标签选择器） 作用与特点 Tag选择器直接根据HTML元素的名称来选取元素，如p、div等。它是CSS中最简单且最通用的选择器，适用于给页面中所有同类型元素统一设置样式。...Class选择器 作用与特点 Class选择器通过元素的class属性来选择元素，具有更高的灵活性和重用性。一个class可以在多个元素上使用，也可以在一个元素上使用多个class。...常见问题与避免策略 问题：命名不规范，难以维护。随意命名class可能导致代码难以阅读和维护。...ID选择器 作用与特点 ID选择器通过元素的id属性来选择唯一的元素，每个ID在文档中应该是唯一的。ID选择器具有最高的优先级，常用于页面中特定且唯一的元素。
提高重排性能：在列表或循环生成组件的场景中，如果没有为每个元素指定key属性，React在进行diff算法比较时，会采用遍历比对的方式，导致性能下降。...以下是一个简单的示例代码，展示了在使用key属性的情况下，React如何对比新旧元素，从而实现部分更新： class MyList extends React.Component { constructor...由于该元素的id没有改变，React会认为它是同一个元素，并且只会更新它的文本内容，而不是重新渲染整个列表。这样就可以大大提高渲染性能，避免不必要的重绘操作。...三、Key属性最佳实践 根据对key属性的作用和原理的理解，以下是一些使用key属性的最佳实践建议： 使用唯一且稳定的值：为了确保key属性的有效性，我们应该尽量使用唯一且稳定的值作为key。...通常情况下，使用列表中的每个元素的唯一标识（如id）作为key是一个不错的选择。 避免使用索引作为key：在列表或循环渲染场景中，有时会考虑使用索引作为key。
1、class 和 id 的使用场景? id：指定标签的唯一标识。根据提供的唯一id号，快速获取标签对象。如：document.getElementById(id)。...id属性的值，在当前的page页面要是唯一的。 class：指定标签的类名。CSS操作，把一些特定样式放到一个class类中，需要此样式的标签，可以在添加此类。 2、CSS选择器常见的有几种?...| .class1.class2 | id和class选择器和选择器连写的时候中间没有分隔符，....和 # 本身充当分隔符的元素| |element#id | id和class选择器和选择器连写的时候中间没有分隔符，....如果两个选择器规权值就是一样，我们改怎么判断呢？
ID 通过元素的id属性定位，一般情况下id在当前页面中是唯一的。使用id选择器的前提条件是元素必须要有id属性。由于id值一般是唯一的，因此当元素存在id属性值时，优先使用id方式定位元素。...，也就是a标签的部分文本内容，如果使用模糊匹配最好使用能代表唯一的关键词，如果有多个元素，默认返回第一个。...xpath路径值（偷懒的方法，不推荐在学习的时候使用）： 通过元素属性定位 单个属性 使用目标元素的任意一个属性和属性值（需保证唯一性）。...，比如标id选择器、class选择器等。...如果没有id，再选择xpath，一般使用相对路径 css_selector比xpath更加稳定 为什么说css_selector比xpath更稳定？
不同的队伍有不同的穿着，不同的口号和队形，不同的人有不同的职责，站位也不一样。那么如果你作为开幕式的负责人，你该如何安排呢？...我们可以给他一个唯一识别的id，就像你入学时学校分配给你的学号，或者你的身份证号，这些是唯一的，只属于你的号码。所以找到某个元素，可以使用id选择器。...{color:blue;} 请记住，id选择器是唯一能准确地找到某个元素的办法。...选择所有lang属性以“en”单词开头的元素 特征：中括号包围,|=链接,属性中必须是完整且唯一的单词，或者以-分隔开 选择器：[attribute^=value ] 示例：[src^="http“]...，子元素是E E:only-of-type 选择父元素中只包含一个同类型的子元素，子元素是E E:empty 选择没有子元素的元素，而且该元素也不包含任何文本节点 [注意]n可以是整数(从1开始)，
，如果没有已定位父元素，则相对于) border-radius:30upx; //圆角半径 text-indent:20px //首行缩进 letter-spacing:1px //字间距...:active，元素被点击时变色，但颜色在点击后消失 :focus， 元素被点击后变色，且颜色在点击后不消失 ``` css中font不支持简写//错误 font：bold 28rpx； //正确 font-size...同时，选择完成后，点击控件关闭城市列表弹窗 什么叫做事件冒泡：点击外面的时候，不会触发里面元素的事件；但是点击里面元素的时候，就会触发外面元素的事件，这就是事件冒泡！！...如果是适应多端平台的话，以下方法可以作为参考： 1、把一些需要v-for的部分做成组件，这样页面上就不存在多个 v-for 2、使用遍历的元素的某个字段值作为key，但是这个字段值必须是唯一的不重复的...，如果是超过500k，工具编译的时候会给提示 比如，在地区选择控件中，省，市，区是三个接口。
三、手写表达式唯一定位元素 1.如何看自己手写的表达式是否正确 2.唯一定位目的地输入框 3.id属性 4.唯一定位城市--广州 5.唯一定位入住日期输入框 一、前提 1.根据元素的特征来定位： 1、...三、手写表达式唯一定位元素 1.如何看自己手写的表达式是否正确呢？ 按ctrl+f。...，选择具有唯一性的属性来定位。...这样我没有借助它们间的关系和所谓的位置，就这样唯一定位了该元素。 3.id属性 id属性，是个身份证，在整个当前的这个html页面当中，它是绝对唯一的。得看页面有没有id，没有就用不了了。...如果id的值包含了字母和数字，可能就是每次都会变化的。 多访问几次，确认id的值会不会变。
XHTML是以XML（是一种必须正确标记且格式良好的标记语言）应用方式定义的HTML，与html 4.01几乎是相同的，浏览器基本都支持。 为什么使用XHTML？...html的语法比较松散，标签不区分大小写，有空标签，对于开发者来说比较方便，对于万维网都是一些糟糕的html代码。为了可以更好地工作在所有浏览器上，并可以向后兼容。...用id属性代替name属性 标签必须正确嵌套。否则无效 XHTML标签 xhtml的标签与html标签基本都相同 ，在xhtml中 img input标签必须被正确地关闭。...class：为html元素定义一个或多个类名(classname)，类名不唯一，可以重复使用。 id：定义元素的唯一id，id值在一个页面中必须是唯一的不能重复使用。...style：规定元素的行内样式。 title：描述元素的额外信息。鼠标指向该元素的时候，会显示属性值。主要用在网站优化中。
-- 对应以上两条样式 --> 2、id选择器 通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。... 5、组选择器 多个选择器，如果有同样的样式设置，可以使用组选择器。...块元素 块元素，也可以称为行元素，布局中常用的标签如：div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素，它在布局中的行为： 支持全部的样式 如果没有设置宽度，默认的宽度为父级宽度100%...4、E:last-child：匹配元素类型为E且是父元素的最后一个子元素 5、E:only-child：匹配元素类型为E且是父元素中唯一的子元素 6、E:nth-of-type(n)：匹配父元素的第n...、E:last-of-type：匹配父元素的最后一个类型为E的子元素 10、E:only-of-type：匹配父元素中唯一子元素是E的子元素 11、E:empty 选择一个空的元素 12、E:enabled
，不便于维护，不可以重复利用 极少 某个标签需要单独的样式设置时使用 内部样式表 部分结构与样式分离，较便于维护 没有彻底实现结构与样式分离，不可以重复利用 一般 css代码量不多，且和当前页面联系紧密不需要复用时使用...外部样式表 完全实现结构与样式分离，可重复利用 如果代码量较少情况下，引入法更麻烦 最多，推荐 css代码量大时，或者需要重复利用时使用 如何写 /*选择器{属性:值;属性:值;}*/ p{...ID选择器（ID Selector）： 使用#加上ID名来选择具有该ID的元素，如 #my-id 会选中id="my-id"的元素。ID在文档中应该是唯一的。...❤️id与class命名 id命名唯一，单个标签不允许拥有多个id名，同页面中不存出现重复的id名（id重名会影响js代码获取标签） class命名不唯一，单个标签可以拥有多个class名，不同标签允许使用相同...选择器分类（初级版） id选择器 eg：#wrap，选中id名为wrap的标签。 class选择器 eg：.nav，选中所有class名为nav的标签。
样式作用情况 元素的样式该如何去展现呢，首先看一下某个元素某个属性可能作用样式的情况： 没有指定样式（没有内联样式也没有选择器选中指定样式） 有唯一指定样式（有内联样式或者选择器选中，且只有一个规则作用于该属性...如果是同一选择器，也是后者覆盖前者，这种情况可以涵盖在同类选择器的情况下。...3.2.1.2.2.2 伪元素选择器 伪元素，说是元素，但又不是真实的元素，是一个虚拟的元素。如何详细理解这段话呢，我们来看一下下面这个例子。 <!...3.2.1.2.2.2-2 从上面两幅图可以看出，伪元素其实是在元素内容内虚拟创建了一个元素，且无法被其他选择器选取。...由以上几点结论可以得出，亲戚关系发生冲突时，先看id选择器数量，谁多谁大，一样多就看类（及其同级）选择器，谁多谁大，若还是一样多，则看元素选择器，谁多谁大。如果仍然一样多，谁在后面谁优先。
2.说明 1.此笔记的中所使用的操作系统为Win 10，笔记中所涉及的软件版本有可能会因为时间的推移而导致不匹配或其他额外的操作，请大家有针对性的选择阅读与参考。 ...所以如果要使用xpath定位方法就比较推荐以下几种方法。 5.5.1 唯一属性定位如果页面中属性的text或id是固定且唯一的，可以使用以下方法。..." and @text="顾客名称"]'))其他的组合以此类推 5.5.4 层级定位如果出现某一个元素基本没有什么属性值，往往只有一个重复属性的时候，我们可以使用层级定位的方式来帮助我们进行快速定位元素...而iOS则完全不需要如此操作； 3.即使是id也不会绝对唯一，因为在软件的版本迭代中可能会出现某些元素因业务需要被去掉但是新加的元素与老元素处在同一id属性的情况，一般来说如果脚本或框架出定位了id属性却出现...NoSuchElementException就需要查看属性是否重复且选择了错误的元素。
常用定位方式 众所周知，Selenium提供了8种定位方式： id：根据id定位，是最常用的定位方式，因为id具有唯一性，定位准确快捷 name：通过元素的【名称】属性定位，name会存在不唯一的情况...用//表示所有路径以//后指定的子路径结尾的元素，如//D表示所有的D元素；如果是//C/D表示所有父节点为C的D元素。...7.1 css类与id选择器 id选择器以 # 来定义，class类选择器以一个.显示，有以下几种例子： 选择id为myId的元素：By.cssSelector("#myId") 选择id为myId...（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。...其次，这两个选择器定位的元素要求必须在某个父级标签内，且其父级标签内对应索引n的元素的类型必须为E，否则匹配失败。
一、前言 CSS 选择器对 HTML 页面中的元素实现一对一，一对多或者多对一的控制，从而给指定元素添加样式。同时还要考虑一个元素被赋予多个样式时如何生效的问题，这个就和选择器优先级相关了。...伪元素选择器 div { margin-left: 50px;} /* ::after 在选中元素的最后添加一个子元素，默认为行内元素 (替换元素上不生效) */...四、CSS 选择器优先级 基本选择器的优先级是：!important > 内联 > ID 选择器 > 类选择器 > 标签选择器 > 通用选择器。那么它如何计算的呢？...important 是 CSS 选择器中的一个"流氓"属性，不论选择器的权重或者优先级的高低，只要加上 !important，那么这个样式的优先级就是最高的 如果针对同一元素样式存在冲突且同时存在 !...不过到目前为止，暂时没有能够通过元素选择其父元素或其父元素相关元素的选择器，这就让人很是头疼。
CSS通过选择器将样式的描述属性绑定到文档(document)中的元素上，通过对Selectors Levels 3规范的中的选择器汇总，大概分为以下几类： 通用选择器(类型选择器、class选择器、ID...通用选择器(类型选择器、class选择器、ID选择器) 选择器 描述 * 任何元素都将被选择 E 选中HTML标签名为E的元素 E.warning 选中HTML标签名为E，且class属性值为“warning...”的元素 E#myid 选中HTML标签名为E，且id属性值为“myid”的元素 属性选择器 选择器 描述 示例 E[foo] 选中HTML标签名为E，且E标签包含属性foo的元素 div[foo]将选中...选中E元素的父元素的唯一子元素（唯一表示”父元素不包含其他子元素“） E:only-of-type 选中E元素的父元素下唯一类型的子元素(唯一类型表示”父元素下不包含其他该类型的元素，可以包含其他类型的元素...E::before 在E元素之前生成内容 E::after 在E元素之后生成内容 组合选择器 选择器 描述 E F 选中E元素的后代中的F元素 E > F 选中E元素的F子元素(不包含孙辈及以下后代
https://www.cnblogs.com/poloyy/category/1680176.html 其次，如果你不懂前端基础知识，需要自己去补充哦，博主暂时没有总结（虽然我也会，所以我学selenium...3：前端开发主要是使用css，不使用xpath，所以在技术上面，我们可以获得帮助的机会非常多 定位元素的注意事项（划重点） 找到待定位元素的唯一属性 如果该元素没有唯一属性，则先找到能被唯一定位到的父元素.../子元素/相邻元素，再使用 等进行辅助定位 > , " " , + 不要使用随机唯一属性定位 最重要的是多跟研发沟通，尽量把关键元素加上ID或者name，并减少不合理的页面元素，例如重复ID这样的事情最好不要发生...首先，基础的CSS选择器 选择器 名字 例子 例子描述 基础选择器 .class class选择器 .intro 选择 class="intro" 的所有元素。...html页面中，css正确写法的栗子 /* id选择器 */ #abc { color: #cc0000; font-size: 12px; } /* class 选择器 */ .down
2.说明 1.此笔记的中所使用的操作系统为Win 10，笔记中所涉及的软件版本有可能会因为时间的推移而导致不匹配或其他额外的操作，请大家有针对性的选择阅读与参考。 ...所以如果要使用xpath定位方法就比较推荐以下几种方法。5.5.1 唯一属性定位如果页面中属性的text或id是固定且唯一的，可以使用以下方法。..." and @text="顾客名称"]'))其他的组合以此类推5.5.4 层级定位如果出现某一个元素基本没有什么属性值，往往只有一个重复属性的时候，我们可以使用层级定位的方式来帮助我们进行快速定位元素。...而iOS则完全不需要如此操作；3.即使是id也不会绝对唯一，因为在软件的版本迭代中可能会出现某些元素因业务需要被去掉但是新加的元素与老元素处在同一id属性的情况，一般来说如果脚本或框架出定位了id属性却出现...NoSuchElementException就需要查看属性是否重复且选择了错误的元素。
且你的内容不会进行提交；url地址要完整并正确，才能把数据提交过去；手机端识别后缀为.com ，在pc端识别.cn .com .top search 用于搜索域 email 对输入框进行一个验证.输入框里面输入错误...且表单里面内容不会进行提交；输入框里面email内容输入正确，表单可以把数据进行提交 tel 用于输入电话号码的文本域 number 用于数字的文本域；没有默认值value，步长step，最小值min，.../月 /日 ， yyyy:年 mm:月 dd:日 datatime 手动输入一个日期和时间 time 用于选择一个时间 低版本的浏览器不兼容 week 用于选择周和年 低版本的浏览器不兼容...： 1 表单的控件id名一定是唯一 2 控件归属于那个表单，那么控件里面属性form=“表单的id[一致]” id="form"> 的选择器是：class选择器，id选择器 属性选择器，按照字面意思，都是根据标签中的属性来选择元素 css3新增的属性选择器： 选择器 例子 说明 ^ div[class^
1.1基础选择器 选择器 实列 说明 全局选择器 $('*') 选择所有元素 标签选择器 $('p') 选择所有的p元素 ID选择器 $('#top') 选择所有id属性值为top的元素 class选择器...$('div ~ p') 选择作为div元素且位于其后的所有p元素 2.3 使用属性选择元素 选择器 实列 说明 tag[attr] $('p[class]') 选择所有带有class属性的p元素 tag...属性值恰好等于top的p元素 tag[attr~="value"] $('p[class~="top"]') 选择所有class属性值为空格分隔的多个字符串且其中一个字符串等于top的p元素和class...$('p[class="top"][id]') 选择所有class属性值恰好等于top并且带有id属性的p元素 class="center" id="p1">段落内容1...选择所有class属性值为空格分隔的多个字符串且其中一个字符串等于center的p元素和class属性值恰好等于center的p元素 var $p8 = $('p[class~="center"
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
