言

大部分人在使用selenium定位元素时，用的是xpath定位，因为xpath基本能解决定位的需求。css定位往往被忽略掉了，其实css定位也有它的价值，css定位更快，语法更简洁。
这一篇css的定位方法，主要是对比上一篇的xpath来的，基本上xpath能完成的，css也可以做到。两篇对比学习，更容易理解。

CSS 选择器：

常见符号：

#表示 id选择器
.表示 class选择器
>表示子元素，层级
一个空格也表示子元素，但是是所有的后代子元素，相当于 xpath 中的相对路径

一、css:属性定位

1.css可以通过元素的id、class、标签这三个常规属性直接定位到

2.如下是百度输入框的的html代码：

<input id="kw" class="s_ipt" type="text" autocomplete="off" maxlength="100" name="wd"/>

3.css用#号表示id属性,如：#kw

4.css用.表示class属性，如：.s_ipt

5.css直接用标签名称，无任何标示符，如：input

二、css:其它属性

1.css除了可以通过标签、class、id这三个常规属性定位外，也可以通过其它属性定位

2.以下是定位其它属性的格式
[name=wd] [autocomplete='off'][maxlength='255']

三、css:标签

css页可以通过标签与属性的组合来定位元素
input.s_ipt input#kw input[id='kw']

四、css:层级关系

//form的id属性
form#form>span>input
//form的class属性
form.fm>span>input

五、css:索引

css也可以通过索引nth-child(1)来定位子元素，直接翻译过来就是第几个小孩
总结：选择标签后，找第几个小孩即可
Select控件第三个Opel
#select>select>option:nth-child(3)
CheckBox第一个Volvo
#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);

选择 id 为 radio 的 div 下的第 1 个子节点
div#radio>input:nth-of-type(4)+label

选择id 为radio 的div 下的第4 个input 节点之后挨着的 label
节点
div#radio>input:nth-of-type(4)~label

六、css:逻辑运算

css同样也可以实现逻辑运算，同时匹配两个属性，这里跟xpath不一样，无需写and关键字
[type='checkbox'][name='checkbox1']

css语法远远不止上面提到的，还有更多更强大定位策略，有兴趣的同学可以继续深入研究！

如觉得文章对您有帮助，还请帮忙转发！

一章讲了selenium提供了多种元素定位方法，今天学习元素定位之css定位

CSS定位：

CSS（Cascading Style Sheets）是一种语言，它用来描述HTML和XML文档的表现。CSS使用选择器来为页面元素绑定属性。这些选择器可以被selenium用作另外的定位策略。

CSS可以较为灵活的选择空间的任意属性，一般情况下定位速度要比XPath快，但对于初学者来说学习起来稍微有点难度，下面我们就详细地介绍CSS的语法与使用。

下面同样以百度输入框和搜索按钮为例介绍CSS定位的用法。

<span class=’bg s_ipt_wr’>

<input id=’kw’ class=’s_ipt’ sutocomplete=’off’ maxlength=’100’ value=’’ name=’wd’

</span>

<span class=’bg s_ipt_wr’>

<input id=’su’ class=’bg s_btn’ type=’submit’ value=’百度一下’

</span>

...

1）通过class属性定位：

find_element_by_css_selector(‘.s_ipt’)

find_element_by_css_selector(‘.bg s_btn’)

find_element_by_css_selector()方法用于CSS语言定位元素，点号(.)表示通过class属性来定位元素。

2）通过id属性定位：

find_element_by_css_selector(‘#kw’)

find_element_by_css_selector(‘#su’)

井号(#)表示通过id属性来定位元素

3）通过标签名定位：

find_element_by_css_selector(‘input’)

在CSS语言中，用标签名定位元素不需要任何符号标识，直接使用标签名即可。但我们前面已经了解了，标签名重复的概率非常大，所以通过这种方式很难找到想要的元素。

我们可以通过以下几种方式来使标签名查找方式生效：

1、通过父子关系定位：

find_element_by_css_selector(‘span>span’)

上面的写法表示有父亲，它的标签名为span，查找它的所有标签名交input的子元素

2、通过属性定位：

find_element_by_css_selector(“[autocomplete=off]”)

find_element_by_css_selector(“[name=’kw’]”)

find_element_by_css_selector(“[type=’submit’]”)

在CSS当中也可以使用元素的任意属性，只要这些属性可以唯一标识这个元素。对于属性值来说，可加引号，也可以不加，但注意和整个字符串的引号进行区分。

3、组合定位：

我们当然可以把上面的定位策略组合起来使用，这就大大加强了定位元素的唯一性。

find_element_by_css_selector(“span.bg s_ipt_wr>input.s_ipt”)

find_element_by_css_selector(“span.bg s_ipt_wr>input#su”)

有一个父元素，它的标签名叫span；它有一个class属性值叫bg s_ipt_wr；它有一个子元素，标签名叫inout，并且这个子元素的class属性值叫s_ipt。好吧，我们要找的就是具有这么多特征的一个子元素。

一篇文章说了HTML，现在再来说一说CSS，所谓CSS是指层叠样式表 (Cascading Style Sheets)，通过引入样式表，从而极大的提高了工作效率。

搭配视频观看效果更佳~~

Web前端开发零基础入门HTML/CSS/JavaScript

https://www.ixigua.com/6907467670300393988

什么是CSS？

Cascading Style Sheet

层叠样式表语言（不是编程语言，属于样式表语言，没有变量、数据类型、控制语句...）

CSS其实是专门用来修饰HTML的，让HTML更好看。

CSS是HTML的化妆品。

CSS是为HTML服务的，所以HTML还是主体，CSS是依附在HTML上的，

所以进行CSS的开发，我们还是需要新建html/htm文件。

在HTML中怎么嵌入CSS样式呢？

第一种方式：内联定义

第二种方式：定义内部样式块对象

第三种方式：链入外部样式表文件（这种方式最常用！）

关于选择器的优先级：

• 标签选择器优先级最低。
• 其次是类选择器。
• 最高优先级是id选择器。

CSS设置背景(background)

• 背景颜色 background-color
• 背景图片 background-image
• 背景重复 background-repeat:repeat-x/repeat-y
• 背景位置 background-position:bottom/left/top/right/center
• 背景关联 background-attachment:fixed/scroll

综合写法：

.tagName{background:#ffffff url(“aa.jpg”) no-repeat right left;}

CSS设置文本格式

通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。

文本缩进 ：Text-indent:2em

文本对齐方式：Text-align:left/right/center/ justify

文本修饰：Text-decoration:underline/line-through/overline/none

字符间距：Word-spacing:px/em 英文单词之间的间隔；

Letter-spacing:px/em汉字和英文字母之间的间隔；

文本转换：Text-transform:uppercase/lowercase/ capitalize

行与行间距：Line-height:px/%

垂直对齐图像： vertical-align：text-top/text-bottom

文本阴影：text-shadow:水平偏移，垂直偏移 颜色

字体

字体类型:font-family:”sans-serif”;

字体样式:font-style:normal ;

字体大小:font-size:20px/3.75em/100%;默认大小为16px,字体为宋体

字体加粗:font-weight:normal;

字体的转变:font-variant:normal/smallcaps;

CSS链接

链接的四种状态

a:link {color:#FF0000;}     /* 未被访问的链接 */
a:visited {color:#00FF00;}  /* 已被访问的链接 */
a:hover {color:#FF00FF;}    /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}   /* 正在被点击的链接 */

【注意】当为链接的不同状态设置样式时，请按照以下次序规则：

a:hover 必须位于 a:link 和 a:visited 之后

a:active 必须位于 a:hover 之后

去掉a链接默认的下划线

text-decoration:{none/underline}

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

创建链接块

display:block;

列表样式

在一个无序列表中，列表项的标志 (marker) 是出现在各列表项旁边的圆点。在有序列表中，标志可能是字母、数字或另外某种计数体系中的一个符号。

要修改用于列表项的标志类型，可以使用属性 list-style-type：

ul {list-style-type : square;}

上面的声明把无序列表中的列表项标志设置为方块。

列表项图像

你可能想对各标志使用一个图像，这可以利用 list-style-image 属性做到：

ul li {list-style-image : url(xxx.gif);}

列表标志位置

ul{
  list-style-position:inside;
  }

CSS表格

表格边框

table,th,td{border:1px solid red;}

折叠边框

border-collapse:collapse;

• 表格的宽度和高度

width,height

• 表格的文字水平对齐

text-align:center/right/left;

• 表格的文字垂直对齐

vertical-align:bottom;

• 表格的内边距

padding

• 表格的背景颜色

background

盒子模型

margin: 包括margin-top, margin-right, margin-bottom, margin-left, 控制块级元素之间的距离, 它们是透明不可见的。

根据上, 右, 下, 左的顺时针规则, 简写为

margin: 40px 40px 40px 40px;

为便于记忆, 请参考下图：

当上下, 左右margin值分别一致, 可简写为:

margin: 40px 40px;

前一个40px代表上下margin值, 后一个40px代表左右margin值.

当上下左右margin值均一致, 可简写为:

margin: 40px;

padding: 包括padding-top, padding-right, padding-bottom, padding-left, 控制块级元素内部, content与border之间的距离

【注意】当你想让两个元素的content在垂直方向(vertically)分隔时, 既可以选择padding-top/bottom, 也可以选择margin-top/bottom, 在此建议你尽量使用padding-top/bottom来达到你的目的, 这是因为css中存在Collapsing margins(折叠的margins)的现象.

边框

• 边框样式：border-style:none/dotted/dashed/solid/double/groove/ridge/inset/outset/hidden
• 边框宽度：border-width
• 边框颜色：border-color

综合写法：

border:1px solid red;

轮廓(outline)

可以按顺序设置如下属性：

• outline-color
• outline-style
• outline-width

CSS所有尺寸

• 宽度

width/min-width/max-width

• 高度

height/min-height/max-height

• 行高

line-height

display显示类型

隐藏元素—–display:none或者visibility:hiddden

display通常可以设置为none、inline、block

visibility通常可以设置为hidden、visible

二者的区别在于display会将元素隐藏掉，并且位置不再被占据，而visibility则是占据原来的位置。

CSS块级元素和内联元素—-display:block/inline/inline-block;

CSS定位(position)

position 属性值的含义：

static

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

CSS浮动

设置浮动：float:left/right;

清除浮动：clear:both/left/right/null;

浮动的两个影响因素：1、文档流 2、显示类型

元素内容溢出

• 溢出滚动条

overflow:scroll（不管是否溢出都会有滚动条）、auto（自动添加）

• 溢出隐藏

overflow:hidden;

CSS的相关特性

1、继承性

它不仅允许样式应用于某个特定的html标签元素，而且还可引用于其后代；

2、CSS层叠

当有相同权重的样式存在时，会根据这些CSS样式的前后顺序来决定，处于最后面的CSS样式会被应用，后面的CSS样式会覆盖前面的样式。

总而言之：内联样式表(标签内部)>嵌入样式表(当前文件中)>外部样式表(外部引入文件)