Question

<p>
 //span 1
 <span>Profile<br>
   <span>My Name :<br><span class="span-bold">Chinu</span></span>
   <span>Address :<br><span class="span-bold">BBSR</span><br><span>CTC</span></span>
 </span>

 //span 2
 <span>Change Password<br>
     <span>aaaaa</span>
     <span>bbbbb<span>b1111</span></span>
 </span>

 //span 3
 <span>cccccc</span>
</p>

我有很多跨度。我怎样才能给第一个标签跨度填充按钮10px？

我试过这段代码：

p span：parent { 填充底：10px的; }

Answer 1

所有跨度但内在的，就像这样

p > span {
  display: block;        /*  with current markup, this is needed to break line  */
  padding-bottom: 30px;
}

p > span:before {
  content: '• ';
}

<p>
<span>Profile<br>
  <span>My Name :<br><span class="span-bold">Chinu</span></span>
  <span>Address :<br><span class="span-bold">BBSR</span><br><span>CTC</span></span>
</span>
<span>Change Password<br>
    <span>aaaaa</span>
    <span>bbbbb<span>b1111</span></span>
</span>
<span>fsfdfd</span>
</p>

Answer 2

而不是

p span:parent { padding-bottom:10px; }

您应该尝试first-of-type选择器，如下所示：

p span:first-of-type { padding-button:10px; }

如果有效，请告知我们。

Answer 3

我相信你的意思是你只想在直系孩子的第一个孩子身上填充span

您可以添加使用p>span，其仅选择span的直接子p并使用first-child伪类获得第一个，然后选择其子项（立即或不）

p>span:first-child span {
    padding-bottom: 10px;
}

Answer 4

你可以用不同的方式选择它。假设您要从整页首页选择简单使用

span:first-of-type{}

现在您可以满足您的需求

p span:first-of-type{}

或者如果您只想要p的直接孩子，请使用p > span:first-of-type 您也可以使用p > span:first-child Or p span:first-child

Answer 5

使用>运算符！ 这意味着直接的孩子。

如何给css只有第一个标签跨度？

5 个答案: