如何为data-field属性元素添加CSS？指定data2元素设200px宽度

嘿，要给data-field="data2"的元素设置width:200px的样式，这里有几种实用的方案，你可以根据场景选择：

方法1：纯CSS属性选择器（推荐） #

这是最优雅且易于维护的方式，不需要修改你的HTML结构，直接用属性选择器精准匹配目标元素：

/* 匹配所有data-field属性值为data2的<th>元素 */
th[data-field="data2"] {
  width: 200px;
}

这个选择器会自动定位符合条件的，后续如果需要调整样式或者新增同属性值的元素，只需要修改这一段CSS即可。

方法2：内联样式（应急场景） #

如果只是临时给单个目标元素加样式，也可以直接在对应的标签里添加内联样式，但这种方式不利于长期维护，不推荐大规模使用：

<th data-field="data2" class="header" style="width:200px;">

内容的提问来源于stack exchange，提问作者Kiwi