如何在CSS中从类中选择多个元素

ogsagwnx 于 2023-03-05 发布在其他

关注(0)|答案(3)|浏览(172)

如何从HTML中选择多个属于同一类的元素？
我想从同一个类中选择h3元素和paragraph元素。
我试着这样做，但它似乎只是使页面上的每一段都被选中

.skill-row {
  width      : 50%;
  margin     : 100px auto 100px auto;
  text-align : center;
  }
.skill-row h3,p  {
  text-align : left;
}

<div class="skill-row">
  <img class="" src="./images/computer.png" alt="Picture of a computer">
  <h3>Lorem & Ipsum</h3>
  <p>
    Lorem ipsum dolor sit amet, quis in duis, iaculis id felis. 
    Consectetuer vestibulum, nunc urna lectus, erat ligula. 
    Hendrerit nam, lectus ante, ut lorem eros.
  </p>
</div>

正如你从这个片段中看到的，这个方法非常有效，
但是!我页面上的其他段落标签也被选中，并被设置为向左浮动。
有人能解释一下发生了什么事或者我做错了什么吗？
我只想从skill-row类中选择h3和p元素，并将其设置为text-align to left

css

来源：https://stackoverflow.com/questions/75584446/how-do-i-select-more-than-one-element-from-a-class-in-css

3条答案

按热度按时间

idfiyjo81#

试试这个：

.skill-row{

    width:50%;
    margin:100px auto 100px auto;
  text-align:center;

}

.skill-row h3, 
.skill-row p {

  text-align:left;

}

在逗号后只输入"p"会使css从你的应用程序下载所有段落

赞(0）回复(0）举报 2023-03-05

ifsvaxew2#

如果你想选择其他元素内部的特定元素，你可以写这样的东西：

.skill-row h3, .skill-row p {

}

它将选择类为.skill-row的元素内的所有标题和段落
如果只想选择.skill-row的直接子元素，可以用途：

.skill-row > h3, .skill-row > p {
    
}

如果你这样写：

.skill-row h3, p  {
  text-align : left;
}

你可以看到你只是选择了页面上的每个段落元素

赞(0）回复(0）举报 2023-03-05

e5nszbig3#

如果你想要一行代码，你可以尝试“.skill-row〉*“，这将选择所有拥有skill-row类的父类的直接子类（在你的例子中也是img）。
您还可以尝试向相关元素添加类/ID，并在编写选择器时将它们对齐。

赞(0）回复(0）举报 2023-03-05

我来回答

如何在CSS中从类中选择多个元素

3条答案

相关问题

热门标签

最新问答