如何在嵌套结构中对第一个LI元素应用粗体

时间：2021-07-30 13:14:21

I thought something like:

我想类似:

#list li > a {
  font-weight: bold;
}

But this applies to every LI anchor I want only the top level items to be boldified not nested LI's in LI's -- if this makes any sense?? :)

但这适用于我想要的每一个LI锚，我只希望顶部的项目是粗体的，而不是嵌套在LI's里——如果这有意义的话?:)

EDIT |

编辑|

  <ul id="list">
    <li><a href="#">A</a>
        <ul>
            <li><a href="#">B</a>
                <ul>
                    <li><a href="#">C</a></li>
                    <li><a href="#">D</a></li>
                </ul>
            </li>
            <li><a href="#">E</a></li>
        </ul>
    </li>
    <li><a href="#">F</a></li>
    <li><a href="#">G</a></li>
    <li><a href="#">H</a></li>
  </ul>

3 个解决方案

#1

1  

You need to add a bit more specificity to your selector:

您需要为您的选择器添加更多的特性:

#list > li > a

#列出> li > a

This targets any a that is a direct descendent of an li that is a direct descendent of #list (which I'm assuming is the outer ul, even though that's not specified in your example).

它针对的是li的直接后代，而li是#list的直接后代(我假设它是外部ul，尽管在您的示例中没有指定)。

You can see it in action at http://jsbin.com/segig/1/edit?css,output.

您可以在http://jsbin.com/segig/1/edit?

No extra markup or rules necessary, which makes this a pretty clean solution.

不需要额外的标记或规则，因此这是一个非常干净的解决方案。

#2

1  

I don't think you can stop the cascading effect of the css, so you'd have to specify the class as you go along. Fiddle Demo

我认为您不能停止css的级联效果，因此您必须在进行时指定类。小提琴演示

HTML:

HTML:

            <ul class="first">
                <li><a href="#">A</a>
                    <ul class="innerfirst">
                        <li><a href="#">B</a>
                            <ul>
                                <li><a href="#">C</a></li>
                                <li><a href="#">D</a></li>
                            </ul>
                        </li>
                        <li><a href="#">E</a></li>
                    </ul>
                </li>
                <li><a href="#">F</a></li>
                <li><a href="#">G</a></li>
                <li><a href="#">H</a></li>
              </ul>

CSS:

CSS:

            .first {
              font-weight: bold;

            }

            .innerfirst {
                font-weight: normal;
            }

#3

1  

This can be done using CSS

The concept you are looking for is called pseudo element or CSS selectors

您正在寻找的概念称为pseudo元素或CSS选择器。

  • Try using first-line instead of first-child
  • 试着用第一行而不是第一个孩子

ANSWER:

JSBIN

http://jsbin.com/dogol/1/edit

HTML

HTML

<html>
  <body>
<ul>
    <li class="ml"><a href="#">A</a>
        <ul>
            <li><a href="#">B</a>
                <ul>
                    <li><a href="#">C</a></li>
                    <li><a href="#">D</a></li>
                </ul>
            </li>
            <li><a href="#">E</a></li>
        </ul>
    </li>
    <li class="ml"><a href="#">F</a></li>
    <li  class="ml"><a href="#">G</a></li>
    <li class="ml" ><a href="#">H</a></li>
  </ul>
  </body>
</html>

CSS

CSS

.ml:first-line
{
  font-weight: bold;
}

#1

1  

You need to add a bit more specificity to your selector:

您需要为您的选择器添加更多的特性:

#list > li > a

#列出> li > a

This targets any a that is a direct descendent of an li that is a direct descendent of #list (which I'm assuming is the outer ul, even though that's not specified in your example).

它针对的是li的直接后代，而li是#list的直接后代(我假设它是外部ul，尽管在您的示例中没有指定)。

You can see it in action at http://jsbin.com/segig/1/edit?css,output.

您可以在http://jsbin.com/segig/1/edit?

No extra markup or rules necessary, which makes this a pretty clean solution.

不需要额外的标记或规则，因此这是一个非常干净的解决方案。

#2

1  

I don't think you can stop the cascading effect of the css, so you'd have to specify the class as you go along. Fiddle Demo

我认为您不能停止css的级联效果，因此您必须在进行时指定类。小提琴演示

HTML:

HTML:

            <ul class="first">
                <li><a href="#">A</a>
                    <ul class="innerfirst">
                        <li><a href="#">B</a>
                            <ul>
                                <li><a href="#">C</a></li>
                                <li><a href="#">D</a></li>
                            </ul>
                        </li>
                        <li><a href="#">E</a></li>
                    </ul>
                </li>
                <li><a href="#">F</a></li>
                <li><a href="#">G</a></li>
                <li><a href="#">H</a></li>
              </ul>

CSS:

CSS:

            .first {
              font-weight: bold;

            }

            .innerfirst {
                font-weight: normal;
            }

#3

1  

This can be done using CSS

The concept you are looking for is called pseudo element or CSS selectors

您正在寻找的概念称为pseudo元素或CSS选择器。

  • Try using first-line instead of first-child
  • 试着用第一行而不是第一个孩子

ANSWER:

JSBIN

http://jsbin.com/dogol/1/edit

HTML

HTML

<html>
  <body>
<ul>
    <li class="ml"><a href="#">A</a>
        <ul>
            <li><a href="#">B</a>
                <ul>
                    <li><a href="#">C</a></li>
                    <li><a href="#">D</a></li>
                </ul>
            </li>
            <li><a href="#">E</a></li>
        </ul>
    </li>
    <li class="ml"><a href="#">F</a></li>
    <li  class="ml"><a href="#">G</a></li>
    <li class="ml" ><a href="#">H</a></li>
  </ul>
  </body>
</html>

CSS

CSS

.ml:first-line
{
  font-weight: bold;
}
标签：

相关文章