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 ...
随机推荐
- [MarsZ]程序猿谈大学之为什么不推荐就业时做程序猿
这篇文章适合一切有志做一个程序猿的人,而不仅仅只是即将进入就业市场的大学生. “又到了毕业找工作的时候了,好多朋友打电话向我咨询要不要让孩子做程序员.作为一个业内资深人士,我觉得这不能一概而论!要辩证 ...
- Java语言使用HttpClient模拟浏览器登录
使用HttpClient来模拟浏览器登录网站,然后可以进行操作,比如发布信息等 第一步:获取实际的post网址,(不考虑复杂情况下) 1.需要使用到firefox的httpfox插件,httpfox中 ...
- 【CSS3】Advanced7:CSS Transitions
1.animate parts of your design without the need for the likes of JavaScrip 2.allowing smooth animati ...
- bzoj 2282 [Sdoi2011]消防(树的直径,二分)
Description 某个国家有n个城市,这n个城市中任意两个都连通且有唯一一条路径,每条连通两个城市的道路的长度为zi(zi<=1000). 这个国家的人对火焰有超越宇宙的热情,所以这个国家 ...
- vijosP1289 老板娘的促销方案
vijosP1289 老板娘的促销方案 链接:https://vijos.org/p/1289 [思路] 组合公式+高精度. 如果n-m<2则无解. 否则对于第一个询问:ans=C(n-m,2) ...
- HW2.3
import java.util.Scanner; public class Solution { public static void main(String[] args) { final dou ...
- pytho
字符串格式化:求模操作符%可以用来将其他值转换为包含转换标志的字符串,对值进行不同方法的格式化,左右对齐,字段宽度精度,增加符号,左填充数字 字符串方法join split istitle capit ...
- Script.NET Perl解释器代码已经在GitHub开源发布
Script.NET Perl解释器的代码已经提交到GitHub网站.GitHub项目地址: https://github.com/blueantst/Script.NET Perl解释器代码在Src ...
- 删除mysql服务
当我们卸载完MySQL后重新装MySQL提示 The service already exists! 是因为服务名称还残留在系统里 打开cmd 输入下面 sc delete mysql 这个mysql ...
- windows 7 64位 安装oracle 11g R2
1.下载Oracle 11g R2 for Windows的版本 下载地址: http://www.oracle.com/technetwork/database/enterprise-edition ...