html - 根据值更改输入的样式

标签 html css

我有一些按钮,我想改变它们的样式,它们每个都有不同的值。 他们都没有分配给他们任何类或 ID。有什么方法可以根据按钮的值更改按钮的样式吗?

    <input type="button" value="Subscribe">

是我要编辑的内容。做我上面描述的最好的方法是什么? 如果您对这个问题有任何疑问,请随时提问。

编辑:如果我也想替换旧样式怎么办?

最佳答案

您可以使用 CSS 选择器按属性选择它们。在这种情况下:

input[value="Subscribe"] {
  /* Styles Go Here */
}

将允许您仅将样式应用于一个按钮,前提是没有其他按钮具有相同的值属性。

编辑:您询问它是否会覆盖现有样式。答案是“视情况而定”。

如果这些规则与您的其他按钮规则位于同一位置(例如,此按钮的规则与其他按钮规则位于相同的外部样式表中,或位于相同的嵌入式样式表中),那么它将遵循以下顺序CSS 中的优先级:http://www.alternategateways.com/tutorials/css/css-101/part-four-the-css-order-of-precedence .按属性的 CSS 选择器仅延迟至按 ID 选择器。

当然,如果必须的话,您总是可以将这些规则内联或使用 !important 覆盖它们,但这可能会导致以后出现问题,所以除非绝对必要,否则不要这样做.

关于html - 根据值更改输入的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24790949/

相关文章:

css - 在 CSS 中覆盖禁用 Firefox 的 "allow pages to choose their own fonts"?

jquery - 有没有一种简单的方法可以使用 HTML 在所有页面上加载外部 header ?

html - Bootstrap3 1 行有无限列是否有效?

php - Wordpress 中附加菜单项的 CSS

html - 如何处理表格中的 `rowspan` 和背景颜色?

javascript:使用 javascript 在 select 标签中设置选项的标题

html - 根据图像定制设计

html - 如何将选项卡式内容向下移动到 'push' 其他页面内容而不是覆盖?

javascript - 使用 JavaScript 删除下一个 div,无需 jquery

html - 垂直对齐不同高度的元素与顶部/底部边距