:not(selector) :not(p) 选择每个非 元素的元素。 :nth-child(n) p:nth-child(2) 选择作为其父的第二个子元素的每个 元素。...:nth-last-child(n) p:nth-last-child(2) 选择作为父的第二个子元素的每个元素，从最后一个子元素计数。...:nth-last-of-type(n) p:nth-last-of-type(2) 选择作为父的第二个元素的每个元素，从最后一个子元素计数 :nth-of-type(n) p:nth-of-type...(2) 选择作为其父的第二个 元素的每个 元素。...:target #news:target 选择当前活动的 #news 元素（单击包含该锚名称的 URL）。 :valid input:valid 选择所有具有有效值的 元素。
CSS选择器用于选择你想要的元素样式的模式。 CSS列表示在CSS版本的属性定义（CSS1，CSS2，或对CSS3）。...:only-child p:only-child 选择每个p元素是其父级的唯一子元素 3 :nth-child(n) p:nth-child(2) 选择每个p元素是其父级的第二个子元素 3 :nth-last-child...(n) p:nth-last-child(2) 选择每个p元素的是其父级的第二个子元素，从最后一个子项计数 3 :nth-of-type(n) p:nth-of-type(2) 选择每个p元素是其父级的第二个...p元素 3 :nth-last-of-type(n) p:nth-last-of-type(2) 选择每个p元素的是其父级的第二个p元素，从最后一个子项计数 3 :last-child p:last-child...包含该锚名称的点击的URL） 3 :enabled input:enabled 选择每一个已启用的输入元素 3 :disabled input:disabled 选择每一个禁用的输入元素 3 :checked
前言 大部分人在使用selenium定位元素时，用的是xpath定位，因为xpath基本能解决定位的需求。css定位往往被忽略掉了，其实css定位也有它的价值，css定位更快，语法更简洁。...CSS 选择器 常见符号 #表示 id选择器 .表示 class选择器 >表示子元素，层级 一个空格也表示子元素，但是是所有的后代子元素，相当于 xpath 中的相对路径 一、css:属性定位 1.css...//form的id属性 form#form>span>input //form的class属性 form.fm>span>input 五、css:索引 css也可以通过索引nth-child(1)来定位子元素...#checkbox>input:nth-child(1) CheckBox第二个Saab #checkbox>input:nth-child(4) RadioBox第二个Saab #radio>input...:nth-child(4) 通过索引nth-of-type(2)来定位子元素，按照分类指定 选择select的saab #select>select>option:nth-of-type(2); 选择
::selection| 被用户高亮的部分 ::selection 伪元素应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。...只有第一个和第二个div有作用，因为它们确实是空的，第三个 div 没有作用，因为它有一个换行。...第二个 ?...nth-of-type() | 选择指定类型的子元素 :nth-of-type() 这个 CSS 伪类是针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。...:nth-last-of-type() | 在列表末尾选择类型的子元素 :nth-last-of-type(an+b) 这个 CSS 伪类 匹配那些在它之后有 an+b-1 个相同类型兄弟节点的元素，其中
在selenium webdriver中，支持使用CSS选择器来进行元素定位，事实在真的投入工作，大量编辑用例和元素定位的时候，使用css 和 xpath才是经常需要用到的。...3 :only-child p:only-child 选择每个p元素是其父级的唯一子元素 3 :nth-child(n) p:nth-child(2) 选择每个p元素是其父级的第二个子元素 3 :nth-last-child...(n) p:nth-last-child(2) 选择每个p元素的是其父级的第二个子元素，从最后一个子项计数 3 :nth-of-type(n) p:nth-of-type(2) 选择每个p元素是其父级的第二个...p元素 3 :nth-last-of-type(n) p:nth-last-of-type(2) 选择每个p元素的是其父级的第二个p元素，从最后一个子项计数 3 :last-child p:last-child...包含该锚名称的点击的URL） 3 :enabled input:enabled 选择每一个已启用的输入元素 3 :disabled input:disabled 选择每一个禁用的输入元素 3 :checked
其中，a标签的文字颜色和下划线不能继承；h标签的文字大小不能继承。 层叠性--指CSS处理冲突的能力，当不同选择器选中同一标签并且设置了相同的属性时，就会出现冲突，这时CSS就会将多重样式层叠为一个。...important的属性优先级会被提升）： 直接选中>间接选中 不同选择器：id>类>标签>通配符>继承>浏览器默认 相同选择器，写在后面的优先级高 CSS基础语法 CSS语法组成：选择器+声明语句selector...每一条语句组成：属性+值selector {property: value} 如图： ct_css_selector.gif CSS选择器 CSS中的选择器用于选择需要添加样式的元素。...:nth-child(n)--例子：p:nth-child(2) 选择属于其父元素的第二个子元素的每个 元素。 :nth-last-child(n)--同上，从最后一个子元素开始计数。...:nth-of-type(n)--p:nth-of-type(2) 选择属于其父元素第二个 元素的每个 元素。
直译过来就是：css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。...下面是一个简单的html列表片段： 我是第一个 我是第二个 如果想要给第一项添加样式，可以在为第一个添加一个类，并在该类中定义对应样式...3n+4匹配位置为4、7、10、13…的子元素。 如下例，有以下HTML列表： ? CSS: 选择第二个元素，”Beta”会变成橙色： ?...8 :nth-of-type :nth-of-type与nth-child相似，不同之处在于它是只匹配特定类型的元素。 如下例，第二个元素会变为橙色。 HTML: ? CSS: ?...CSS: ? 12 :target 当URL带有锚名称，指向文档内某个具体的元素时，:target匹配该元素。
同样值得一提的是，文档中的多个元素可以具有相同的类名，而单个元素可以有多个类名(以空格分开多个类名的形式书写)。...因为比起class而言id专用性更高(在一个页面上id是唯一的, 但很多元素可以拥有相同的class — ID 选择器在它们的目标中是非常优先的)，红色背景色和1pixel的黑色边框都应应用于第二元素，...第二个元素获得红色背景色，但没有边框。为什么？因为 !...前两个选择器正在竞争链接的背景颜色的样式——第二个赢得并使背景色为蓝色，因为它有一个额外的ID选择器在链中：其专用性值为201比101。...第二个规则设置一个类 inherit 的元素内的链接，并从父类继承它的颜色。
]" contains()函数 "//input[contains(@id,'包含')]" postion()函数 这里 position() 代表元素的位置，这种写法也是 xpath 中的一部分 //...CSS选择器（css selector） 作用：用于定位页面上的标签元素，找到符合选择器的标签元素，然后应用样式。...[title='我的文件']" nth-child(2)表示取div的第二个 子元素选择器(>)，表示只能选择下一级的元素 例如：#ab>p 含义：匹配id为ab的下一级中的p标签 实例（f-data-copy-detail...class为ab才能匹配到 后续兄弟选择器(~表示)，选取指定元素后的所有同级指定元素 例如：.ab~li 含义：匹配class为ab的标签后的所有同级li标签 css 伪类用法 表达式 描述 nth-child...']/a[last()] CSS: div#u1 a:last-child 第二个子元素 XPATH: //div[@id='u1']/a[2] CSS: div #u1 a:nth-child(2)
目录 一、属性选择器 二、关系选择器 三、结构化伪类选择器 四、伪元素选择器 五、链接伪类 CSS选择器的作用就是从HTML页面中找出特定的某类元素。...（1）临近兄弟选择器 该选择器使用加号“+”来链接前后两个选择器。选择器中的两个元素有同一个父亲，而且第二个元素必须紧跟第一个元素。...（2）普通兄弟选择器 普通兄弟选择器使用 “~”来链接前后两个选择器。选择器中的两个元素有同一个父亲，但第二个元素不必紧跟第一个元素。...为此，CSS3引入了:nth-child(n)和:nth-last-child(n)选择器，它们是:first-child选择器和:last-child选择器的扩展。...:after选择器 :after伪元素选择器用于在某个元素之后插入一些内容，使用方法与:before选择器相同。 五、链接伪类 1.链接伪类 在CSS中，通过链接伪类可以实现不同的链接状态。
E[att] {} : 选择具有att属性的E元素 E[att="val"]{}: 选择具有att属性且属性值等于val的E元素 E[att~="val"]{}:用于选取属性值中包含指定词汇的元素 E[...（默认匹配他们得是相同的子元素） nth-of-type(odd)奇数和:nth-of-type(even)偶数：完美解决上面的问题 3.循环使用样式 :nth-child(n)：选取每一行...E:checked 匹配所有用户界面（form表单）中处于选中状态的元素E E:selection 匹配E元素中被用户选中或处于高亮状态的部分 6.动态伪类选择器 选择器 含义 E:link 选择匹配的...css伪元素： 对元素中的特定内容进行操作，而不是描述状态 css3为了区分两者伪类使用单冒号，伪元素使用双冒号，但因为兼容问题现在大部分还是用单冒号 8.层级选择器 相邻兄弟选择器： li + li:...e)圆角： border-radius:5px; 如果有两个值：第一个值表示左上角、右下角；第二个值表示右上角、左下角。
|先应用第二个的元素，且在第一个元素中| 子代选择器 | 选择器>>选择器>|ul>li|匹配第二个选择器，属于第一个选择器的子代| 兄弟选择器 |选择器>+选择器> |p+a{}|匹配紧跟第一个选择器的选择器...(1)临近兄弟选择器 该选择器使用加号“+ ”来链接前后两个选择器。选择器中的两个元素有同一个父亲，而且第二个元素必须紧跟第一-个元素。...(2)普通兄弟选择器 该选择器使用加号“~”来链接前后两个选择器。选择器中的两个元素有同一个父亲，但第二个元素不必紧跟第一-个元素。...只有用户单击了页面中的超链接，并且跳转到target元素后，:target选择器所设置的样式才会起作用。 链接伪类 链接伪类 在CSS中，通过链接伪类可以实现不同的链接状态。...1.png •CSS定位 –在网页开发中，如果需要网页中的某个元素在网页的特定位置出现，例如弹出菜单，这时可以通过CSS的position属性进行设置，示例如下： position:relative;
直译过来就是：css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。...: ol :nth-child(2) { color: orange; } 选择第二个元素，”Beta”会变成橙色： ol :nth-child(2) { color: orange;...8 :nth-of-type :nth-of-type与nth-child相似，不同之处在于它是只匹配特定类型的元素。 如下例，第二个 元素会变为橙色。...第一个元素中有文本节点，所以其背景不会变成黄色； 第二个元素中有一个空格，有空格则该元素不为空，所以其背景不会变成黄色； 第三个元素中没有任何内容，所以其背景会变成黄色； 第四个元素中只有一个注释...当style没有设置scope属性时，style内的样式会对整个html起作用。 如下例，第二个section中的元素的文本会变为斜体。
p标签元素（父标签里面只有一个p标签） :nth-child(n) p:nth-child(2)，选择属于父元素的第二个子元素的每个p标签元素（所有的p标签的父标签对应的第二个子标签元素） :...nth-last-child(n) p:nth-last-child(2)，选择属于父元素的倒数第二个子元素的每个p标签元素（所有的p标签的父标签对应的倒数第二个子标签元素） :nth-of-type(...n) p:nth-of-type(2)，选择属于其父标签元素的第二个p标签的每个p标签元素（所有p标签对应的父标签的第二个p标签元素，也就是这个和p标签平级） :nth-last-of-type(...） #:nth-of-type(n) p:nth-of-type(2)，选择属于其父标签元素的第二个p标签的每个p标签元素（所有p标签对应的父标签的第二个p标签元素，也就是这个和p标签平级） #鼠标放上悬浮选择菜单...p:nth-last-of-type(2)，选择属于其父标签元素的倒数第二个p标签的每个p标签元素（所有p标签对应的父标签的倒数第二个p标签元素，也就是这个和p标签平级） browser.find_element_by_css_selector
F /* 设置 h1 相邻的 p 为红色，但第二个 p 不为红色 */ h1>p { color: red; } 我是h1 我是段落1 以上五种伪类选择器同时用在a超链接时，各伪类需按特定的顺序书写才能生效，保证各浏览器具有相同的表现。...个子元素 E，假设该子元素不是 E，则选择符无效，但 n 会累加 /* 第二个 p 会被设置成红色，因为它是父元素的第二个元素 */ p:nth-child(2) {...(n) CSS3 E:nth-of-type(n) { sRules } 匹配同类型中的第n个同级兄弟元素E 要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是html，即E可以是html的子元素...，也就是说E可以是body 该选择符总是能命中父元素的第n个为E的子元素，不论第n个子元素是否为E /* 设置父元素第二个 p 元素为红色，虽然该 p 元素为父元素的第三个元素
::first-letter和::first-line好像很少用 CSS2中，他俩只能应用在段落之类的块级元素，超链接等行内元素就不能用了 CSS2.1中，：first-letter可以应用所有元素...(n) 伪类选择器 p:nth-child(2) 选择每个p元素是其父级的第二个子元素 :nth-last-child(n) 伪类选择器 p:nth-last-child(2) 选择每个p元素的是其父级的倒数第二个子元素...:nth-of-type(n) 伪类选择器 p:nth-of-type(2) 选择每个p元素是其父级的第二个p元素 :nth-last-of-type(n) 伪类选择器 p:nth-last-of-type...(2) 选择每个p元素的是其父级的倒数第二个p元素 :last-child 伪类选择器 p:last-child 选择每个p元素是其父级的最后一个子元素 :root 根元素选择器 :root 选择文档根元素...class中以空格分隔的属性值中没有“de”的属性值 说到这个属性选择器，我还要多说一点 我在表格中的示例是这么写的 a[src=\.pdf] 是因为“.”它不认识，我们需要加“\”转义 不过css中属性选择器也可以写成引号的形式
并集选择器 结构：选择器>, 选择器> 并集选择器是通过 ， 逗号将不同选择器组合使用的一种选择器，这种情况下，各个选择器之间是没有任何关系，都是相互独立的，就是他们具有相同的样式属性表而已。...这只是一种简便写法的用法而已，具有相同样式属性表的不同再复制粘贴，可以直接通过 ，逗号将不同选择器分开即可。只有 HTML 文档中的元素满足其中一个选择器即可。...儿子选择器 结构：选择器> > 第二个选择器> 儿子选择器是多个选择器之间通过 > 右箭头符号连接，表示的是在满足第一个选择器的前提下，从它匹配到的元素的直接子元素中寻找第二个选择器。...跟后代选择器的区别就在于它只能在直接子元素中匹配第二个选择器。...上述示例中，同时满足位于同一层级，且相邻，且需要先满足第一个选择器的前提下，还满足第二个选择器这四个条件的 a 元素就是第三个 a 元素了。
/数字/下划线 a-z 0-9 _ 4.2id名称不能以数字开头 4.3id名称不能是HTML标签的名称 不能是a h1 img input …/ 在css中id标签的显示是：#。...2.选择器可以使用标签名称/id名称/class名称 给所有选择器选中的标签设置属性 兄弟选择器: <!...{ color: red; } /*核心在于:选中的是同级别的倒数第二个。...记住,子元素的话每一个都是开始哈.*/ /*p:nth-last-of-type(2) { color: red; } /*核心在于:只看p标签同级别的同类型的倒数第二个p标签....: red; } /*核心在于:独一无二的元素,没有其他相同的了.*/ /*.para:only-of-type { color: red; } /*代表兄弟元素中没有一样的
这些 checkbox 是直接的兄弟类，所以如果选中第一个之后，可以使用 :checked 伪类和相邻兄弟选择器(+)来隐藏两个元素。但是如果选中第二个呢？你可以隐藏第二个，但是怎么才能影响第一个呢？...名称相同的 radio按钮在未选中时都处于这种状态。哇，这是一个真正的初始状态！真正有用的是，选中后一个同胞元素也会对前者产生影响！于是我在游戏板上放置了 42 对 radio input。...还有一种方式就是使用 nth 选择器。尽管我喜欢使用偶数和奇数这样的关键词，但我还是走进了死胡同。:nth-child 选择器 “统计”父类中的子元素，包括所有类型，类、伪类等等。...因此，计数器的值始终是 0 或 1，偶数或奇数。 解决第二个问题需要更多的创造力（read: hack）。如上所述，计数器只能显示在 ::before 和 ::after 伪元素中。...诀窍不仅在 CSS 中，而且在 HTML 中，下一列必须是上一列中创建嵌套结构的单选按钮的同胞元素。
CSS box-model 不同部分的说明： Margin(外边距) - 清除边框外的区域，外边距是透明的。 Border(边框) - 围绕在内边距和内容外的边框。...:nth-child(n) p:nth-child(2) 选择所有 p 元素的父元素的第二个子元素 :nth-last-child(n) p:nth-last-child(2) 选择所有p元素倒数的第二个子元素...:nth-last-of-type(n) p:nth-last-of-type(2) 选择所有p元素倒数的第二个为p的子元素 :nth-of-type(n) p:nth-of-type(2) 选择所有...p元素第二个为p的子元素 :only-of-type p:only-of-type 选择所有仅有一个子元素为p的元素 :only-child p:only-child 选择所有仅有一个子元素的p元素...:hover a:hover 把鼠标放在链接上的状态 :focus input:focus 选择元素输入后具有焦点 :first-letter p:first-letter 选择每个 元素的第一个字母
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
