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

【问题标题】：CSS selector based on table border value基于表格边框值的 CSS 选择器
【发布时间】：2016-10-22 22:51:21
【问题描述】：

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

表格结构如下：

<table border="1" width="560" cellspacing="0">
   <tr>
     <td height="28" 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;
}

【讨论】：