python+selenium元素定位之CSS学习02

女爷i 2023-10-02 08:59 126阅读 0赞

参考文档：[https://www.runoob.com/cssref/css-selectors.html][https_www.runoob.com_cssref_css-selectors.html]

CSS选择器用于选择你想要的元素的样式的模式。

"CSS"列表示在CSS版本的属性定义(CSS1，CSS2，或对CSS3)。

<table> 
 <tbody> 
 <tr> 
 <th align="left">选择器</th> 
 <th align="left">示例</th> 
 <th align="left">示例说明</th> 
 <th align="left">CSS</th> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-class.html" rel="nofollow">.class</a></td> 
 <td>.intro</td> 
 <td>选择所有class="intro"的元素</td> 
 <td>1</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-id.html" rel="nofollow">#id</a></td> 
 <td>#firstname</td> 
 <td>选择所有id="firstname"的元素</td> 
 <td>1</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-all.html" rel="nofollow">*</a></td> 
 <td>*</td> 
 <td>选择所有元素</td> 
 <td>2</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-element.html" rel="nofollow">element</a></td> 
 <td>p</td> 
 <td>选择所有&lt;p&gt;元素</td> 
 <td>1</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-element-comma.html" rel="nofollow">element,element</a></td> 
 <td>div,p</td> 
 <td>选择所有&lt;div&gt;元素和&lt;p&gt;元素</td> 
 <td>1</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-element-element.html" rel="nofollow">element&nbsp;element</a></td> 
 <td>div p</td> 
 <td>选择&lt;div&gt;元素内的所有&lt;p&gt;元素</td> 
 <td>1</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-element-gt.html" rel="nofollow">element&gt;element</a></td> 
 <td>div&gt;p</td> 
 <td>选择所有父级是 &lt;div&gt; 元素的 &lt;p&gt; 元素</td> 
 <td>2</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-element-pluss.html" rel="nofollow">element+element</a></td> 
 <td>div+p</td> 
 <td>选择所有紧接着&lt;div&gt;元素之后的&lt;p&gt;元素</td> 
 <td>2</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-attribute.html" rel="nofollow">[attribute]</a></td> 
 <td>[target]</td> 
 <td>选择所有带有target属性元素</td> 
 <td>2</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-attribute-value.html" rel="nofollow">[attribute=value]</a></td> 
 <td>[target=-blank]</td> 
 <td>选择所有使用target="-blank"的元素</td> 
 <td>2</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-attribute-value-contains.html" rel="nofollow">[attribute~=value]</a></td> 
 <td>[title~=flower]</td> 
 <td>选择标题属性包含单词"flower"的所有元素</td> 
 <td>2</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-attribute-value-lang.html" rel="nofollow">[attribute|=language]</a></td> 
 <td>[lang|=en]</td> 
 <td>选择 lang 属性以 en 为开头的所有元素</td> 
 <td>2</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-link.html" rel="nofollow">:link</a></td> 
 <td>a:link</td> 
 <td>选择所有未访问链接</td> 
 <td>1</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-visited.html" rel="nofollow">:visited</a></td> 
 <td>a:visited</td> 
 <td>选择所有访问过的链接</td> 
 <td>1</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-active.html" rel="nofollow">:active</a></td> 
 <td>a:active</td> 
 <td>选择活动链接</td> 
 <td>1</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-hover.html" rel="nofollow">:hover</a></td> 
 <td>a:hover</td> 
 <td>选择鼠标在链接上面时</td> 
 <td>1</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-focus.html" rel="nofollow">:focus</a></td> 
 <td>input:focus</td> 
 <td>选择具有焦点的输入元素</td> 
 <td>2</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-firstletter.html" rel="nofollow">:first-letter</a></td> 
 <td>p:first-letter</td> 
 <td>选择每一个&lt;p&gt;元素的第一个字母</td> 
 <td>1</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-firstline.html" rel="nofollow">:first-line</a></td> 
 <td>p:first-line</td> 
 <td>选择每一个&lt;p&gt;元素的第一行</td> 
 <td>1</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-firstchild.html" rel="nofollow">:first-child</a></td> 
 <td>p:first-child</td> 
 <td>指定只有当&lt;p&gt;元素是其父级的第一个子级的样式。</td> 
 <td>2</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-before.html" rel="nofollow">:before</a></td> 
 <td>p:before</td> 
 <td>在每个&lt;p&gt;元素之前插入内容</td> 
 <td>2</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-after.html" rel="nofollow">:after</a></td> 
 <td>p:after</td> 
 <td>在每个&lt;p&gt;元素之后插入内容</td> 
 <td>2</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-lang.html" rel="nofollow">:lang(language)</a></td> 
 <td>p:lang(it)</td> 
 <td>选择一个lang属性的起始值="it"的所有&lt;p&gt;元素</td> 
 <td>2</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-gen-sibling.html" rel="nofollow">element1~element2</a></td> 
 <td>p~ul</td> 
 <td>选择p元素之后的每一个ul元素</td> 
 <td>3</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-attr-begin.html" rel="nofollow">[attribute^=value]</a></td> 
 <td>a[src^="https"]</td> 
 <td>选择每一个src属性的值以"https"开头的元素</td> 
 <td>3</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-attr-end.html" rel="nofollow">[attribute$=value]</a></td> 
 <td>a[src$=".pdf"]</td> 
 <td>选择每一个src属性的值以".pdf"结尾的元素</td> 
 <td>3</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-attr-contain.html" rel="nofollow">[attribute*=value]</a></td> 
 <td>a[src*="runoob"]</td> 
 <td>选择每一个src属性的值包含子字符串"runoob"的元素</td> 
 <td>3</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-first-of-type.html" rel="nofollow">:first-of-type</a></td> 
 <td>p:first-of-type</td> 
 <td>选择每个p元素是其父级的第一个p元素</td> 
 <td>3</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-last-of-type.html" rel="nofollow">:last-of-type</a></td> 
 <td>p:last-of-type</td> 
 <td>选择每个p元素是其父级的最后一个p元素</td> 
 <td>3</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-only-of-type.html" rel="nofollow">:only-of-type</a></td> 
 <td>p:only-of-type</td> 
 <td>选择每个p元素是其父级的唯一p元素</td> 
 <td>3</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-only-child.html" rel="nofollow">:only-child</a></td> 
 <td>p:only-child</td> 
 <td>选择每个p元素是其父级的唯一子元素</td> 
 <td>3</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-nth-child.html" rel="nofollow">:nth-child(n)</a></td> 
 <td>p:nth-child(2)</td> 
 <td>选择每个p元素是其父级的第二个子元素</td> 
 <td>3</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-nth-last-child.html" rel="nofollow">:nth-last-child(n)</a></td> 
 <td>p:nth-last-child(2)</td> 
 <td>选择每个p元素的是其父级的第二个子元素，从最后一个子项计数</td> 
 <td>3</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-nth-of-type.html" rel="nofollow">:nth-of-type(n)</a></td> 
 <td>p:nth-of-type(2)</td> 
 <td>选择每个p元素是其父级的第二个p元素</td> 
 <td>3</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-nth-last-of-type.html" rel="nofollow">:nth-last-of-type(n)</a></td> 
 <td>p:nth-last-of-type(2)</td> 
 <td>选择每个p元素的是其父级的第二个p元素，从最后一个子项计数</td> 
 <td>3</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-last-child.html" rel="nofollow">:last-child</a></td> 
 <td>p:last-child</td> 
 <td>选择每个p元素是其父级的最后一个子级。</td> 
 <td>3</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-root.html" rel="nofollow">:root</a></td> 
 <td>:root</td> 
 <td>选择文档的根元素</td> 
 <td>3</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-empty.html" rel="nofollow">:empty</a></td> 
 <td>p:empty</td> 
 <td>选择每个没有任何子级的p元素(包括文本节点)</td> 
 <td>3</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-target.html" rel="nofollow">:target</a></td> 
 <td>#news:target</td> 
 <td>选择当前活动的#news元素(包含该锚名称的点击的URL)</td> 
 <td>3</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-enabled.html" rel="nofollow">:enabled</a></td> 
 <td>input:enabled</td> 
 <td>选择每一个已启用的输入元素</td> 
 <td>3</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-disabled.html" rel="nofollow">:disabled</a></td> 
 <td>input:disabled</td> 
 <td>选择每一个禁用的输入元素</td> 
 <td>3</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-checked.html" rel="nofollow">:checked</a></td> 
 <td>input:checked</td> 
 <td>选择每个选中的输入元素</td> 
 <td>3</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-not.html" rel="nofollow">:not(selector)</a></td> 
 <td>:not(p)</td> 
 <td>选择每个并非p元素的元素</td> 
 <td>3</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-selection.html" rel="nofollow">::selection</a></td> 
 <td>::selection</td> 
 <td>匹配元素中被用户选中或处于高亮状态的部分</td> 
 <td>3</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-out-of-range.html" rel="nofollow">:out-of-range</a></td> 
 <td>:out-of-range</td> 
 <td>匹配值在指定区间之外的input元素</td> 
 <td>3</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-in-range.html" rel="nofollow">:in-range</a></td> 
 <td>:in-range</td> 
 <td>匹配值在指定区间之内的input元素</td> 
 <td>3</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-read-write.html" rel="nofollow">:read-write</a></td> 
 <td>:read-write</td> 
 <td>用于匹配可读及可写的元素</td> 
 <td>3</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-read-only.html" rel="nofollow">:read-only</a></td> 
 <td>:read-only</td> 
 <td>用于匹配设置 "readonly"(只读) 属性的元素</td> 
 <td>3</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-optional.html" rel="nofollow">:optional</a></td> 
 <td>:optional</td> 
 <td>用于匹配可选的输入元素</td> 
 <td>3</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-required.html" rel="nofollow">:required</a></td> 
 <td>:required</td> 
 <td>用于匹配设置了 "required" 属性的元素</td> 
 <td>3</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-valid.html" rel="nofollow">:valid</a></td> 
 <td>:valid</td> 
 <td>用于匹配输入值为合法的元素</td> 
 <td>3</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.runoob.com/cssref/sel-invalid.html" rel="nofollow">:invalid</a></td> 
 <td>:invalid</td> 
 <td>用于匹配输入值为非法的元素</td> 
 <td>3</td> 
 </tr> 
 </tbody> 
</table>

[https_www.runoob.com_cssref_css-selectors.html]: https://www.runoob.com/cssref/css-selectors.html