Question

有两种情况可能。首先，<p>可能会出现在<img>代码

之前

<a>
   <p></p>
   <img></img>
<a>

其次可能会在

之后

<a>
   <img></img>
   <p></p>
<a>

我想知道在两种情况下是否有任何方法可以定位<p>元素并以不同方式设置它们。

我想将<p>置于左侧，如果它位于<img>之前，则将其置于左侧。

我需要这样做，不要向任何元素添加任何CSS类/ ID。

感谢任何帮助。

Answer 1

You can select all img very next a p with the selector +

p + img{
    ...
}

In the same way you can style all p after an img

img + p{
     ...
}

For Style the p as first child:

a > p:first-child{
   ...
}

More info on http://www.w3schools.com/cssref/sel_element_pluss.asp and http://www.w3schools.com/cssref/sel_firstchild.asp

Answer 2

支持使用nth-child，您可以

    a > p:nth-child(2) {
       float:right;
    }
    a > p:nth-child(1) {
       float:left;
    }

Answer 3

我看到很多人不明白：nth-xxxxxx

google for：

:nth-of-type(x);

＆＃13;

span > b:nth-of-type(1) {
  /*meaning first b direct child of span*/
  background-color: rgba(255, 13, 55, 0.5);
}

＆＃13;

<span>
  <s>p</s>
<b>b</b>
<i>i</i>
  <b>b</b>
</span>
<br>

<span>
  <b>b</b>
<i>i</i>
<s>p</s>
    <b>b</b>
    <b>b</b>
</span>
<br>
<span>
  <b>b</b>
<s>p</s>
<i>i</i>
    <b>b</b>
</span>

＆＃13;

根据没有CSS ID或类的html顺序设置子元素的样式

3 个答案: