Question

编辑：

对这个问题略有改动：

说我在页面中有很多段落和其他元素：

<h2>title 1</h2>
<p>paragraph one</p>
<p>paragraph 2</p>
<p>paragraph 3 with a <href="dummy.com>hyperlink</a></p>
<h2>title 2 </h2>

我如何选择仅<p>的第二个实例？还是第三次？

我遇到的选择者似乎只是在“第一个父母”或“第一阶段”的基础上工作。

有什么想法吗？

原始问题：

我是一个CSS新手，我正在寻找一些建议。

说我有类似下面的HTML：

<h2> Title 1 </h2>
<p>paragraph 1</p>
<h2>title 2 </h2>
<p>paragraph 2</p>

是否有任何非JavaScript方法只使用CSS，我只能选择第1段并将样式应用于独立于第2段的此元素？

如果是这样，这个功能的支持程度如何？

对不起朋友们，我不认为我的要求非常清楚。我特别需要一种只使用CSS来选择当前存在的HTML的技术（没有类或ID）。对于这个特殊的工作，我无法访问页面上的HTML。

Answer 1

您应该使用:first-of-type

p:first-of-type { 
    background-color: yellow;
}

虽然:first-child不起作用，但因为<h2> Title 1 </h2>是其父节点的实际第一个子节点。

Answer 2

FWIW - 这是一个没有它的解决方案可以在IE7 +

中使用

使用General sibling selector

p {
   /* styles first p here */
}
p ~ p {
  /* styles second (and additional) p here */
}

＆＃13;

 p {
   color: tomato;
 }
 p ~ p {
   color: black;
 }

＆＃13;

<h2> Title 1 </h2>
<p>paragraph 1</p>
<h2>title 2 </h2>
<p>paragraph 2</p>

＆＃13;

Answer 3

您可以使用css psedo选择器。

p:first-of-type{
   color: red;
}

Working Fiddle

Answer 4

您可以使用第一个子选择器

第一子选择器选择并设置每个＆lt; p>元素是其父元素的第一个子元素：

示例：

p:first-child { background-color: yellow; }

Answer 5

如果要在不使用id或类的情况下选择第一个段落元素，使用这个：

p:first-of-type 
{  
color:yellow;
}

<h2> Title 1 </h2>
<p>paragraph 1</p>
<h2>title 2 </h2>
<p>paragraph 2</p>

Answer 6

如果您只想选择第一个

：

p:first-child {  }

Answer 7

试试这个：

<style>
    .red {
        color:red; /* give more styles here*/
    }
</style>

<h2> Title 1 </h2>
<p class="red">paragraph 1</p>
<h2>title 2 </h2>
<p>paragraph 2</p>

Answer 8

您需要使用class

<h2> Title 1 </h2>
<p class="my-class">paragraph 1</p>
<h2>title 2 </h2>
<p>paragraph 2</p>

然后在你的CSS中

.my-class{
    property1: value1;
    property2: value2;
}

您还可以使用id（css表中的＃选择器），但是如果您需要将相同的样式应用于其他内容，则使用类更好。（您不能在同一页面中拥有2个具有相同值的ID）

如何通过CSS选择非唯一元素

原始问题：

8 个答案: