0

これらのボタンは気に入っていますが、一意の ID (またはクラス) を持つボタンにのみ影響を与える必要があります。それらを切り替える方法は？私はこれをやろうとしましたが、それらがdivのcssを持つdivのbtnsである必要がありますか、またはボタンに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

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 に答える