td tr表类中的精确表部分

Question

我想确定显示3XL的属性size元素并使宽度变小。但是我很难在CSS中找到它！

Website screen shot

此刻我有

table.variations td.value {
}

但这可以精确定位列的整个部分，包括“清除”按钮。我尝试过：

table.variations td.value .attribute_size {     }

但这也不起作用。 请帮忙！

谢谢！ 贝克

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;
}

JSFiddle。