# CSS通过属性定位元素
一个元素（HTML标签）具备多个属性，例如常见的id，name，class，target等，也可以自定义属性。前面已经说过如何通过id、class，然后使用css选择器定位，这里，继续介绍通过其他属性、方法定位元素。
在CSS定位选择中，属性定位模板：
# 属性定位CSS模板，attribute代表属性名，value代表该属性的值
[attribute=value]
看一个实例，如下一段HTML标签：
<a class="hot-title" href="http://top.baidu.com/?fr=mhd_card" target="_blank">
<div class="title-text c-font-medium c-color-t">百度热榜</div>
</a>
如上面，a标签有3个属性，分别是class，href，target，其中href和target属性就可以利用上面的模板来写相关的定位代码。以target属性为例：
# target为_blank的元素选择器
[target='_blank']
可以看到，属性选择器有3个要素，中括号、属性、属性值。其实，中括号是一种运算符，代表其包裹的内容是可运算的，对于target=’_blank’的运算就是一个布尔值运算。
Selenium代码：
from selenium import webdriver
driver = webdriver.Firefox()
driver.get("https://www.baidu.com")
# 选择target为_blank的元素
driver.find_element_by_css_selector("[target='_blank']").click()
# sleep(5)
driver.quit()
运行上面代码就能够打开百度热榜。
层级定位
层级定位就是在Dom树的层级上，一层一层找到需要的元素，层级定位的CSS模板：
# 空格分开的层级定位，选择element1下所有的element2
element1 element2
# 选择父元素是 element1的所有element2元素
element1>element2
# 选择紧跟element1元素的首个element2元素
element1+element2
# 选择前面有element1元素的每个element2元素。
element1~element2
element1，和element2都代表的是具有层级关系的HTML标签。看一个实例：
<div id="s-top-left" class="s-top-left s-isindex-wrap">
<a href="http://news.baidu.com" target="_blank">新闻</a>
<a href="https://www.hao123.com" target="_blank">hao123</a>
<a href="http://map.baidu.com" target="_blank">地图</a>
</div>
在这个Html结构中，可以看到div元素包裹了3个标签为a的子元素，那么，如何选择新闻这个标签呢？通过CSS层级定位，使用
element1+element2
模板：
div+a
相应的Selenium代码：
from selenium import webdriver
driver = webdriver.Firefox()
driver.get("https://www.baidu.com")
# 选择target为_blank的元素
driver.find_element_by_css_selector("div+a").click()
# sleep(5)
driver.quit()
如上为示例代码，因为div外层还有body、html等代码，实际使用的过程中大家可以根据具体的层级写定位器。运行上面代码就能够打开百度新闻。
有绝对路径，也支持相对路径，大家可以把标签缓存其他定位器，在层级定位过程中混合其他选择器来快速实现定位。
快速获得CSS定位路径
实际开发过程中，如果熟练了CSS定位器，可以直接手写定位代码。前期，大家可以通过Firefox提供的方法，或FirePath来直接获取CSS定位路径。
Firefox下，按F12打开调试器，点击需要选择的元素，就可以在调试器下方看到CSS定位路径，效果如下：
可以看到，新闻元素的绝对定位路径：
html>body>div#wrapper.wrapper_new>div#head>div#s-top-left.s-top-left.s-isindex-wrap>a.mnav.c-font-normal.c-color-t
那么，如何通过FirePath获取CSS绝对定位呢？
操作方法就是，在HTML版面下，选择需要定位的元素，右键点击元素，在弹出的菜单中选择复制CSS路径，就可以了。
最后
CSS元素定位在功能上与XPath类似，有了XPath，为什么还需要CSS定位呢？这就是定位功能的灵活、丰富性，二者不是替代关系，而是一种互补关系。部分场景下，CSS定位器可能比XPath更简单，也存在更加复杂，甚至定位失败的情况，所以，在实际应用中，应当合适的地方选择合适的方法（这依赖于同学们熟练掌握定位方法）！
