Question

我希望我使用正确的术语（我是一个非常业余的编码器）我有2个图像，我想在它们上应用相同的css，但工作量最少，比如使用时：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="conditional-scrollbars"></div>
<button id="addTxt">add text</button>

所以我试过

h1, h2 {bla bla code}

但它不起作用。可以吗？

非常感谢，很高兴认识你们！ =）

Answer 1

你在那里错过了一个逗号。需要在每个选择器之间应用逗号。

您的选择器

.btn-app img

选择img和

的所有子.btn-app元素

.btn-app2 img

选择img的所有子.btn-app2元素。
所以你的代码应该是：

.btn-app img, .btn-app2 img {
    margin-left: 10px;
    width: auto;
    height: 50px;
}

如果您对CSS完全不熟悉并且这不仅仅是一个错字，我还建议您阅读here。

Answer 2

缺少逗号。您已经在示例中显示了您正在关注

.btn-app img, .btn-app2 img {
       margin-left: 10px;
        width: auto;
        height: 50px;
}

Answer 3

使用此：

/* you were missing some commas and > here */
.btn-app>img, .btn-app2>img
{
   position:relative;
   float:left;
   margin-left: 100px;
   height: 50px;
   border:10px solid #09f; 
}

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>

<!-- Works for images inside containers -->
<div class="btn-app">
  <img src="https://beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg" alt="img1" height="70" width="70" />
</div>
<div class="btn-app2">
  <img src="https://beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg" alt="img2" height="70" width="70" />
</div>


<br style="clear:both" />
<br/>


<!-- But it won't work for them -->

<!-- Images with class names -->
<img class="btn-app" src="https://beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg"  alt="img3" height="70" width="70" />
<img class="btn-app2" src="https://beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg"  alt="img4" height="70" width="70" />
<br/>
<!-- Images without class names -->
<img src="https://beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg" alt="img5" height="70" width="70" />
<img src="https://beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg" alt="img6" height="70" width="70" />

</body>

</html>

使用相同的css超过1个图像

3 个答案: