0

我喜欢这些按钮，但我需要它们只影响具有唯一 ID（或类）的按钮。如何改变它们？我试图这样做，但如果它们是 div 中的 btns 和 div 上的 css 或者按钮应该有一个 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>
4

2 回答 2

2

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

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

如果您想将 css 应用于特定按钮，则无需提供 input[type="button"]，只需使用类或 ID

.special_button
{
  /* my css property */
}

或者

#special_button
{
  /* my css property */
}
于 2012-04-13T02:05:03.180 回答
0

这是你要问的吗？

#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

于 2012-04-13T01:13:14.363 回答