Question

我正在尝试按类定位输入按钮，但是当我在CSS中调用该类时它不起作用。如何才能做到这一点？所以当我在输入按钮中调用stat类时，它不起作用。

CSS

* {
margin: 0;
padding: 0;
list-style-type: none;
text-decoration: none;
}

header, nav, section, aside, footer, article {
display: block;
}

body {

}

.container {
margin:0px auto;
background-image: url(back.png);
width: 1200px;
padding-top:10px;
height: 2000px;
}

.thenav {
background-color: #3b63d3;
height: 85px;
opacity: 0.9;
position: relative;
}

input[type=text], input[type=password] {
font-weight: bold;
margin: 0;
font-size: 8px;
height: 10px;
padding: 3px 5px 3px 5px;
color: 162354;
}

/* Stats Button */
form input[type=button] {
background-color: #6cd171;
color: blue;
border-radius: 6px;
font-weight: bold;
border: none;
margin-top: 20px;
margin-left: 20px;
padding: 2px 2px;
font-family: Verdana, Geneva, sans-serif;
 }

.stat input[type=button] {
background-color: grey;
color: #008cff;
border-radius: 6px;
font-weight: bold;
border: none;
padding: 1px 2px 2px 2px;
}

HTML

<span>put html code here</span>

Answer 1

当班级在输入中时，不需要空格。

input[type=button].stat{} or .stat{}

Answer 2

如果您在.stat和input之间有空格，则需要选择input元素作为.stat的子元素。您需要组合两个选择器。

使用input[type="button"].stat {}。

以下是选择器关系如何工作的常规示例。请注意，您的原始CSS选择器的行为与第三个示例相同。

＆＃13;

/* Targets ANY element with a class of .stat */
.stat {
  color: red;
}

/* Targets ANY input element with a class of .stat */
input.stat {
  color: green;
}

/* Targets ANY input inside of an element with a class of .stat */
.stat input {
  color: blue;
}

＆＃13;

<input class="stat" type="text" name="text-0" value="123abc">

<div class="stat">
  
  <p>
    My text is red. I inherited my color from <code>.stat</code>.
  <p>
  
  <input type="text" name="text-1" value="123abc">
  
</div>

＆＃13;

我如何按类定位输入按钮

2 个答案: