css - 精确定位 td tr 表类中的表部分

Question

我想查明显示 3XL 的属性 size 元素并使宽度更小。但我正在努力在 CSS 中查明它！

网站截图

目前我有

table.variations td.value {
}

但这会精确定位列的整个部分，包括“清除”按钮。我努力了：

table.variations td.value .attribute_size { }

但这也行不通。请帮忙！

谢谢！贝克

标签： css

Answer 1

您必须在该td.value字段中精确定位选择选项。然后你可以随心所欲地设计它。

HTML

<table class="variations">
  <tbody>
    <tr>
      <td class="value">
        <select id="size" name="attribute_size">
          <option>Choose an option</option>
          <option value="2XL">2XL</option>
          <option value="3XL">3XL</option>
        </select>
        CLEAR
      </td>
     </tr>
  </tbody>
</table>

CSS

table.variations td.value {
  font-size: 12px;
}
select#size {
 color: white; 
 background-color: blue;
 font-size: 42px;
}

JSF中。