Question

我喜欢这些按钮，但我需要它们只影响具有唯一ID（或类）的按钮。如何改变它们？我试图这样做但是如果他们在div中使用div上的ct或者按钮有id还是什么？它不起作用？

<pre><code>
<html>
<head>
<style type="text/css">

input[type="submit"], input[type="button"] {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;  
  border-radius: 10px;
}

input[type="submit"], input[type="button"] {


float: right;
  margin: 2em 1em 0 1em;
  width: 10em;
  padding: .5em;
  border: 1px solid #666;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;  
  border-radius: 10px;
  -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  color: #fff;
  background: #0a0;
  font-size: 1em;
  line-height: 1em;
  font-weight: bold;
  opacity: .7;
  -webkit-appearance: none;
  -moz-transition: opacity .5s;
  -webkit-transition: opacity .5s;
  -o-transition: opacity .5s;
  transition: opacity .5s;
}

input[type="submit"]:hover,
input[type="submit"]:active,
input[type="button"]:hover,
input[type="button"]:active {
  cursor: pointer;
  opacity: 1;
}

input[type="submit"]:active, input[type="button"]:active {
  color: #333;
  background: #eee;
  -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
  -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
  box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
}

input[type="button"] {
  background: #f33;
}
</style>


</head>
<body>

  <div id="formButtons">
    <input type="submit" id="sendMessage" name="sendMessage" value="Reply" />
    <input type="button" id="cancel" name="cancel" value="Cancel" />
  </div>

</body>
</html>


</code></pre>

Answer 1

如果您需要将css应用于所有按钮

input[type="button"]
{
   /* CSS property */
}

如果你想将css应用于特定按钮，不需要提供输入[type =“button”]，只需使用类或ID

.special_button
{
  /* my css property */
}

或

#special_button
{
  /* my css property */
}

Answer 2

这是你要问的吗？

#yourIdHere{ /* impacts only ID */ }

.yourClassHere{ /* impacts only elements with class */ }

INPUT.yourClassHere{ /* impacts only inputs with class */ }

CSS提供了一组丰富的选择器（其中许多可以组合）：http://www.w3.org/TR/selectors/#selectors

如何更改css只影响id或class而不是input [type =“”]

2 个答案: