标签: css-selectors

在CSS中,是选择div > a和div a一样吗？

<div>
  <a>Hi</a>
</div>

HTML:

<p class=menu_top>Title</p>
<p class=menu_top>Order</p>
<p class=menu_top>Position</p>
<p class=menu_top>Number</p>

我如何只针对第一个元素？

如何选择从具有特定类的元素派生的所有元素？

例如...我希望所有表格单元格 ( td) 仅来自具有特定类的表格。

I have some questions on the capabilities of CSS 2 and CSS 3 selectors.

1. Are CSS 2 selectors powerful enough to select any element in a DOM tree?

2. Is there anything that CSS 3 selectors could do while CSS 2 selectors could not?

3. Could any CSS 3 selector be theoretically converted to a CSS 2 selector (although the converted CSS 2 selector may be a bit tedious)?

4. Is there any tool for converting CSS 3 to CSS 2 selectors?

I …

是否有一个select表达式用于匹配多个类的标签？

请考虑以下HTML代码段:

<div id="top">
    <div class="foo bar"></div>
</div>

我可以与之匹敌soup.select('div#top div.foo')或soup.select('div#top div.bar').

但我需要两个班级都在那里.

有表达吗？

假设我有 2 个与“MyTitle”相同的值。我如何设计 2 个值以具有不同的颜色？

<div class="MyTitle">Insert text here</div>
<div class="MyTitle">Insert text here</div>

我希望此处插入文本的第一个值是红色，然后是绿色？

我是这样做的，但它适用于两者，知道如何解决这个问题吗？

.MyTitle {
 color: red;
}

我有一系列的部分,有不同类型的元素,如下所示:

<section>
    <div>Something</div>
    <a href="#">Some Copy</a>
    <div>Something</div>
    <a href="#">Some Copy</a>
</section>

<section>
    <a href="#">Some Copy</a>
    <div>Something</div>
    <a href="#">Some Copy</a> <a href="#">Some Copy</a>
    <div>Something</div>
</section>

我需要遍历每个部分并找到最后一个元素,无论它是div还是锚.

$("section").each(function(){
      var last = //find the last element
      last.addClass('last');
}); 

我需要帮助定义变量last.通常我会使用css' last-child或last-of-type识别每个部分中的最后一个元素,但因为有不同类型的元素(锚点和div),我相信我需要使用javascript.知道如何找到最后一个元素吗？

我试图实现以下条纹模式,但没有一个n-child组合正在解决.任何建议/解决方案来实现这一目标.

我怎么可以只选择前三个要素与:nth-child() 选择？

section > figure:nth-child( ? ) {
  /* ... */
}

<section>
  <figure>1</figure> <!-- select this -->
  <figure>2</figure> <!-- and this -->
  <figure>3</figure> <!-- and this -->
  <figure>4</figure>
  <figure>5</figure>
  <figure>6</figure>
</section>

我怎么可以针对一些子元素,除了在母公司是第一个或最后一个孩子的家长吗？

请参阅我的CSS中的评论,以便更好地了解我的意思.

CSS:

/* Always apply */
tr th, tr td
{
    text-align: left;
    vertical-align: top;
}

/* Apply to all except first <tr> */
tr th, tr td
{
    padding-top: 5px;
}

/* Apply to all except last <tr> */
tr th, tr td
{
    border-bottom: 1px solid #c4c4c4;
    padding-bottom: 5px;
}

HTML:

<table>
    <tr>
        <th>Born</th>
        <td><time datetime="1986-11-05">5<sup>th</sup> November 1986</time></td>
    </tr>
    <tr>
        <th>Gender</th>
        <td>Male</td>
    </tr>
    <tr>
        <th>Sports</th>
        <td>Football<br />Tennis</td>
    </tr>
    <tr>
        <th>Teams</th>
        <td>Liverpool FC<br />Spain …