通用元素选择器

id、class 都是 web 元素的属性，因为它们是很常用的属性，所以 css 选择器专门提供了根据 id、class 选择的语法。

那么其他的属性呢？

比如 href、type

<a href="http://www.google.com">谷歌</a>

<input type="text" id='searchtext' />

如何根据里面的 href 进行选择，可以用 css 选择器吗？

当然可以！

css 选择器支持通过任何属性来选择元素，语法是用一个方括号 []。

比如要选择上面的 a 元素，就可以使用 [href="http://www.google.com"]。

这个表达式的意思是，选择 属性 href 值为 http://www.google.com 的元素。

比如要选择上面的 input 元素，就可以使用 [type="text"]。

这个表达式的意思是，选择 属性:type 值为:text的元素。

运行代码演示：

from playwright.sync_api import sync_playwright

# 启动Playwright
p = sync_playwright().start()

# 启动Chromium浏览器（非无头模式，放慢操作速度以便观察）
browser = p.chromium.launch(headless=False, slow_mo=50)

# 创建新页面
page = browser.new_page()

# 导航到目标网页
page.goto(r"E:\playwright\ceshi1.html")

# 定位href属性为指定值的元素
element = page.locator(r"[href='http://www.google.com']")  #[href="http://www.google.com"]的实际应用
page.wait_for_timeout(1000)
# 打印该元素的内部文本
print(element.inner_text())

# 关闭浏览器和Playwright
browser.close()
p.stop()

当然，前面可以加上标签名的限制，比如 a [href="http://www.google.com"] 表示 选择所有 标签名为 a，且 属性 href 值为 http://www.google.com 的元素。

属性值用单引号，双引号都可以。

根据属性选择，还可以不指定属性值，比如 [href]， 表示选择 所有 具有 属性名 为 href 的元素，不管它们的值是什么。

CSS 还可以选择 属性值 包含 某个字符串 的元素比如，要选择 a 节点，里面的 href 属性包含了 miitbeian 字符串，就可以这样写

a[href*="www.goo"]  #模糊匹配选择

还可以 选择 属性值 以某个字符串 开头 的元素比如，要选择 a 节点，里面的 href 属性以 http 开头，就可以这样写

a[href^="http"]  #表示以http开头就是我要选择的

还可以 选择 属性值 以某个字符串 结尾 的元素比如，要选择 a 节点，里面的 href 属性以.gov.cn 结尾，就可以这样写

a[href$=".gle.com"]   #以什么结尾的就是我要选择的

如果一个元素具有多个属性

<div class="misc" ctype="gun">沙漠之鹰</div>

CSS 选择器 可以指定 选择的元素要 同时具有多个属性的限制，像这样div[class="misc"][ctype="gun"]  中间不要有口康哥，否则会误认为是后代元素。