CSS常见选择器
一、元素选择器
p,html,h1, h2
1、多个元素一起设置同一种风格, 则用逗号“,”隔开(选择器分组)
2、通配符选择, *{Color:red} 表示文档中所有元素都为红色
二、类选择器
对元素class属性值 class="classValue" 进行选择
1、 *.classValue1 表示选择 class值为 classValue1的所有元素;
2、 p.classValue2 表示class值为 classValue1的P元素(元素选择跟类选择搭配使用)
三、ID选择器
在一个 HTML 文档中,id属性值是唯一的, 使用id选择,格式如下 <p id="idValue">……
#idValue
四、属性选择器
1、a[href] 表示选择有包含 href属性的a元素 (属性选择习惯跟元素选择结合使用)
2、a[href][title] 表示选择同时含有 href属性 和 title属性的a元素
3、具体到属性值选择
1)属性值完全匹配 a[href="www.baidu.com"][title="jennifer"]
2)属性值部分匹配 a[href~="baidu.com"]
[attribute] | 用于选取带有指定属性的元素。 |
[attribute=value] | 用于选取带有指定属性和值的元素。 |
[attribute~=value] | 用于选取属性值中包含指定词汇的元素。 |
[attribute|=value] | 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。 |
[attribute^=value] | 匹配属性值以指定值开头的每个元素。 |
[attribute$=value] | 匹配属性值以指定值结尾的每个元素。 |
[attribute*=value] | 匹配属性值中包含指定值的每个元素。 |
五、后代选择器
h1 em 表示 作为h1元素后代的任何em元素,注意,以空格隔开
<h1> <li><em>xxx </em> </li> <em>xxx </em> </h1> 后代选择器,两个元素之间的层次间隔可以是无限的,不论 em 的嵌套层次多深,都被选择
例如,要找到蓝色底纹位置,css语句可以为 css=ul[id^=personalizationDetail] ul>li:nth(1) (nth序号从0算起)
选择id包含personalizationDetail的ul元素 的后代 ul(隔了两代),接着找ul的第2个li子元素
六、子元素选择器
使用大于号 > (子结合符),例如:验证价格price,则:
assertText css=ul.typeReview>li:nth(3) Fee:$5.00
七、相邻兄弟选择器
使用 + 号(相邻兄弟结合符)隔开两个元素,
例1:table + ul 表示选择紧接在 table 元素后出现的所有兄弟 ul 元素
例2:用一个结合符只能选择两个相邻兄弟中的第二个元素,例如:li + li {font-weight:bold;},只对蓝色底纹部分起作用
注:
selenium1.0元素选择器有:
1.id=id:
2.name=name:
3.link=textPattern
4.dom=javascriptExpression:
5.xpath=xpathExpression: 见《xpath选择器》
6.css=cssSelectorSyntax
selenium2.0选择方法:
- By.id()
- By.className()
- By.tagName()
- By.name()
- By.linkText()
- By.partialLinkText()
- By.xpath("xpath表达式")
- By.cssSelector("css选择器")
本篇小结css,其他选择器小结待续……
CSS常见选择器的更多相关文章
- CSS 常见的8种选择器 和 文本溢出问题
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>c ...
- CSS常见的选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS.01 -- 选择器及相关的属性文本、文字、字体、颜色、
与html相比,Css支持更丰富的文档外观,Css可以为任何元素的文本和背景设置颜色:允许在任何元素外围设置边框:允许改变文本的大小,装饰(如下划线),间隔,甚至可以确定是否显示文本. 什么是CSS? ...
- css以及选择器基础
CSS样式基础了解1.css基础语法CSS样式的出现是为了将内容和表现分离极大的提高了工作效率内联样式(在 HTML 元素内部)<p style="margin-left: 10px: ...
- css节点选择器
基础选择器 基础选择器是选择器的所有选择器的基本组成元素,也最简单,包含如下5个类别: ID选择器 标签选择器 类选择器 属性选择器:类选择器算是一个特殊的属性选择器,通用的属性选择器举例如下: #c ...
- CSS常用选择器的认识
---恢复内容开始--- 前言:在CSS中选择器的种类有很多很多,但是在实际的工作中,我们经常会用到的分为两大类:基础选择器和复合选择器这两个大类,学习选择器的目的就是为了在复杂的页面中能够快速定位到 ...
- css CSS常见布局解决方案
CSS常见布局解决方案说起css布局,那么一定得聊聊盒模型,清除浮动,position,display什么的,但本篇本不是讲这些基础知识的,而是给出各种布局的解决方案.水平居中布局首先我们来看看水平居 ...
- CSS 之 选择器
CSS的常见选择器 一.简单选择器 Simple Selectors 选择器 含义 * 通用元素选择器,匹配任何元素 E 标签选择器,匹配所有使用E标签的元素 .info class选择器,匹配所有c ...
- 突破css选择器的局限,实现一个css地址选择器?
首先看一个效果,注意地址栏的变化 然后思考一下,用css如何实现? css选择器的局限 选择器是css中的一大特色,用于选择需要添加样式的元素. 选择器的种类有很多,比如 元素选择器 p {color ...
随机推荐
- 使用Windows Azure创建Linux系统虚拟机-上
创建虚拟机来运行Linux 当您在Azure管理门户中使用映像图库时,创建运行Linux的虚拟机很容易.本指南告诉您如何做到这一点,假设你没有使用过Azure. 注意: 即使你不需要使用过Azure虚 ...
- Docker系列(三)常用命令
命令说明 docker pull 格式: docke pull [OPTIONS] NAME[:TAG] 作用:下载名称为 name 的镜像 例子: sudo docker pull dl.docke ...
- Linux内存寻址之分页机制
在上一篇文章Linux内存寻址之分段机制中,我们了解逻辑地址通过分段机制转换为线性地址的过程.下面,我们就来看看更加重要和复杂的分页机制. 分页机制在段机制之后进行,以完成线性—物理地址的转换过程.段 ...
- javascript数组操作汇总
javascript之数组操作 - 不悔的青春 - 博客园 1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array( ...
- 微信开发第8章 通过accesstoken将长连接转换为短链接
业务场景:开发的过程中经常会有一些很长的链接,这个时候如果生成二维码,会导致扫码的过程中识别比较慢,如果存入数据库,会导致数据库的字段长度要设定的很长才行,所以把长连接转换为短链接就越来越重要了. 接 ...
- 关于angular的ng-class条件判断
angular的ng-class的多条件判断是非常好用的,不需要写过多的判断去更改他相应的class, 但大家要记住,在repeat中使用ng-class多条件判断时, 错误写法:<i clas ...
- 服务框架HSF分析之一容器启动
大家平时都在用这个服务框架.简单阅读了下代码,了解其原理可以方便解决一些常见hsf的问题.限于篇幅,整个分析将分几个系列发布.第一篇将简单介绍Hsf的启动和各组件之间关系. 一. Hsf总体架构 这 ...
- JavaScript的递归之更多例子
更多例子 第二个递归的例子是求两个自然数的最大公约数(有没有回到令人怀念的中学时代).下面的程序用的是经典的辗转相除法. //greatest common divisor //假定a.b都是正整数 ...
- C# LINQ详解(一)
原文标题:How does it work in C#?-Part 3 (C# LINQ in detail),作者:Mohammand A Rahman. 目录 LINQ 基础 扩展方法-幕后的工作 ...
- Android 颜色渲染(七) RadialGradient 环形渲染实现水波纹效果
利用环形渲染我们可以做到什么? 其实很多都是非常常见的,比如上一篇实现的帮帮糖效果, 彩色的热气球,比如这里要讲到的水波纹效果,或者也可以理解为扩散色渲染效果 首先看一下效果图: 轻触屏幕,即可看到对 ...