基于表格边框值的 CSS 选择器

Posted 2023-03-06

【中文标题】基于表格边框值的 CSS 选择器

【英文标题】：CSS selector based on table border value

【发布时间】：2016-10-22 22:51:21

【问题描述】：

我想通过 CSS 选择器访问页面中的 table。

表格结构如下：

<table border="1"  cellspacing="0">
   <tr>
     <td  colspan="3" bgcolor="#FFFFF...>
 </tr>
</table>

基本上我需要一行中的 jquery 或 css 选择器来访问 table 和 border=1

没有与table 关联的类或 ID，并且也不可能进行第 n 次访问的父子映射

基本上是table 的选择器，其中table border=1（border = 1 不在style="" 内），它只是html 标记

<table border=1"> ....</table>

【问题讨论】：

这是你想要的table[border=1]？

顺便说一句，值得指出的是，使用内联属性进行演示，例如width、cellspacing 和bgcolor，已被弃用，应该真正移到样式表中以使用CSS。

【参考方案1】：

您可以使用attribute selectors

[attr=value]

表示属性名为 attr 且其值恰好为“value”的元素。

table 
  width: 100%;
  height: 50px

table[border="1"] 
  background: red

<table border="1">
  <tr>
    <td></td>
  </tr>
</table>
<hr />
<table>
  <tr>
    <td></td>
  </tr>
</table>

---

注意：我建议不要使用border HTML 标签，因为它已被弃用。要使用border 设置table 的样式，您可以在CSS 中使用属性border。

【参考方案2】：

你的意思是这样的吗？

table[border="1"]
  background: red;

如果你只想检查是否有边框属性：

table[border]
  background: blue;

您可以在此处找到有关此内容的更多信息： https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors