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

【问题标题】：how to give css only the 1st label span?如何只给css第一个标签跨度？
【发布时间】：2016-02-12 18:25:57
【问题描述】：

<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 跨度：父 { 填充底部：10px； }

【问题讨论】：

你所谓的“第一个标签跨度”是什么？ p的第一个孩子？
span:first-child 会做
是的，我正在调用第一个标签 span p 的第一个孩子。但是p子有3个跨度。
为什么这么多跨度？使用更好的语义标记不是更好吗？
不相关但您是否考虑过使用dl 代替？它似乎在语义上更正确。

标签： html css

【解决方案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>

【讨论】：

这只是第一个跨度。但我在第一个跨度标签中有 3 个跨度。
@Chinu 更新了一个样本..是你想要的吗？
second 和 third 父跨度未添加填充 css。我需要所有的父跨度标签应该是padding-bottom:10px
@Chinu 又更新了样本……就这样？
不，请检查我更新的问题。我已经评论了我的 3 跨度。

【解决方案2】：

我相信您的意思是您只希望在直系子代span 的第一个子代中使用填充

您可以添加 use p>span ，它只选择 p 的直接子代 span 并使用 first-child 伪类获取第一个子代，然后选择其子代（无论是否立即）

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

【讨论】：

你的代码很完美，但我只想要第一个标签 span css。不是其他跨度。但是你的代码在整个范围内都来自padding-bottom: 10px;。
看看我的 html 我的父 span(p child) 标签有 3 个 span 标签。我需要所有 3 个跨度将添加 padding-bottom:10px; 而不是子跨度意味着 span>span
我再次更新了我的代码。这将为所有spans 添加填充，这些spans 是p 的第一个 span 的子级
另外，在我看来，您的第一个（父）跨度有 5 个跨度子级，其中 2 个是直系子级。您可以上传一张图纸或其他东西，在其中标记您想要填充的确切内容吗？
请检查我已评论我的 3 跨度的问题。我需要这 3 个跨度 padding-bottom:10px;

【解决方案3】：

您可以通过不同的方式选择它。假设您想从整个页面中选择首先跨度简单使用

span:first-of-type{}

现在你可以让它满足你的需求

p span:first-of-type{}

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

【讨论】：

【解决方案4】：

使用> 运算符！ 这意味着直系子女。

【讨论】：

【解决方案5】：

代替

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

您应该像这样尝试first-of-type 选择器：

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

如果有效，请告诉我们。

【讨论】：

请在您的答案中添加描述。我们投票删除这个问题，因为它的长度和内容。