css选择器

元素定位方法选用顺序

  • 优先级最高:ID

  • 优先级其次:name

  • 优先级再次:CSS selector

  • 优先级再次:Xpath

css定位与xpath定位比较

css

  • css是配合html来工作,是一种匹配模式定位,而xpath是配合xml工作的,通过遍历定位,所以两者在设计上,css性能更优秀

  • 语言简洁,明了,相对xpath

  • 前端开发主要是使用css,不使用xpath,可以获取更多的技术支持

xpath

  • Xpath可以通过元素文本来定位,而CSS Selector不能

  • Xpath可以通过子节点来定位父节点,CSS Selector 不能

定位元素的注意事项

  • 找到待定位元素的唯一属性

  • 如果该元素没有唯一属性,则先找到能被唯一定位到的父元素/子元素/相邻元素,再使用“>”," “,”+"等进行辅助定位。

  • 不要使用随机唯一属性定位

  • 最重要的是多跟研发沟通,尽量把关键元素加上ID或者name,并减少不合理的页面元素,例如重复ID这样的事情最好不要发生。
    在这里插入图片描述

css选择器

id 选择器

#id 选择器可以选中具有特定 id 的 HTML 元素CSS 中 id 选择器以 "#" 来定义。#以下的样式规则应用于元素属性 id="para1":#para1 {	text-align:center;	color:red; }123

class 选择器

#class 选择器可以选中具有特定 class 属性的 HTML 元素#在 CSS 中,class 选择器以 "."号 来定义,若有空格,亦可以"."来代替#在以下的例子中,所有拥有 class 属性为 center 的 HTML 元素均为居中.center {text-align:center;}1234

标签选择器

#标签选择器可以选中同类型的 html 标签元素在以下的例子中,将所有的 p 标签设置为红色p. {color:red;}#另外,你可以将标签选择器与class选择器结合起来使用以下,会将所有 class  属性为 re  的元素变成红色p.re {color:red;}12345

分组选择器

#分组选择器可以选中一组 HTML 元素在 css 中,分组选择器以 “,” 来定义#以下实例,会将所有的 h1 标签、h2 标签、p 标签的内容变成红色h1,h2,p {	color:green; }123

属性选择器

#属性选择器选择具有特定属性的 HTML 元素#以下实例将所有包含 title 属性的元素变为蓝色[title] {	color:blue; }#你也可以为属性指定值#以下实例将所有 title 属性为 wa 的元素变为蓝色[title=“wa”]{	color:blue; }#你也可以为元素指定标签#以下实例将所有 title 属性为 wa 的 p 标签变为蓝色p[title=“wa”]{	color:blue; }1234567891011

组合选择符

在 CSS3 中包含了四种组合方式:
 ● 后代选择器(以空格分隔)● 子元素选择器(以大于号分隔)● 相邻兄弟选择器(以加号分隔)
● 后续兄弟选择器(以小波浪号分隔)1234

后代选择器

#后代选择器用于选取某元素的后代元素,无论层级有多深以下实例将 <div> 元素中所有的 p 元素背景修改为黄色:div p {	background-color:yellow; }12

子元素选择器

#与后代选择器相比,子元素选择器只能选择其父元素的直接子元素以下实例选择了<div>元素中所有直接子元素div>p {	background-color:yellow; }12

相邻兄弟选择器

#相邻兄弟选择器可选择紧接在另一元素后的元素,且二者有相同父元素以下实例选取了所有位于 <div> 元素后的第一个div+p {	background-color:yellow; }12

后续兄弟选择器

#后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素div~p {	background-color:yellow; }12

css下标选择

#nth-child(n)   匹配属于其父元素的第 N 个子元素(不必指定标签类型)div:nth-child(3) #选择第3个div元素#nth-last-child(n),如字面意思:倒数第几个标签#first-child,第一个标签#last-child,最后一个标签


评论 (0)

发表评论