如何为 CSS 中的根和子元素应用 styles

Question

Hi I want to apply styles for root and child elements separately by CSS.嗨，我想通过 CSS 分别为根元素和子元素应用 styles。

 .animals{ background-color: bisque; }.pets{ background-color: rgb(160, 5, 180); }.small{ background-color: rgb(68, 255, 155); }.big{ background-color: rgb(255, 68, 208); }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <ul class="animals"> <li>Forest</li> <li> <ul class="pets"> <li> <ul class="small"> <li>Rabbit</li> <li>Squirral</li> <li> <ul class="small"> <li> <ul class="small"> <li>Rabbit</li> <li>Squirral</li> <li>Cat</li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li> <ul class="big"> <li>Dog</li> <li>Cow</li> <li>Horse</li> <li>Elephent</li> </ul> </li> </ul> </ul> </body> </html>

From above code, The list structure is 3 level ul从上面的代码，列表结构是 3 级ul

<ul> <!-- level 1, name: sub1 -->
   <li>
       <ul> <!-- level 2, name: sub1 -->
           <li>
               <ul> <!-- level 3, name: sub2 -->
                   <li>
                        <ul></ul> <!-- level N, name: sub2 -->
                   </li>
               </ul>
           </li>
       </ul>
   </li>
</ul>

From above code, sub1 will have multiple, multi level sub2 only.从上面的代码中， sub1 将只有多个，多级 sub2。 So, I don't like to use classes for this constant structural list.所以，我不喜欢为这个常量结构列表使用类。 I am curious to study some thing like first-child type of selector in CSS.我很想研究 CSS 中的first-child类型选择器之类的东西。

I have to apply styles by below way我必须通过以下方式申请 styles

Apply styles for level 1 only仅适用于level 1的 styles
Apply styles for level 2 only仅适用于 2 级的 styles
Apply styles for level 3 only仅适用于 3 级的 styles
Apply styles for level 2 & level 2 combined.应用 styles 用于level 2 & level 2组合。

How can I use CSS to apply styles without id and class .如何使用 CSS 应用 styles 没有id和class 。 Thanks in advance!提前致谢！

Answer 1

It is very easy.这很容易。 You can use the "element" "element" selector of css.您可以使用 css 的“元素”“元素”选择器。 Example:例子：

ul {
    /*Style lvl 1 ul*/
    color: red;
}
ul ul {
    /*Style lvl 2 ul*/
    color: green;
}

ul ul ul {
    /*Style lvl 3 ul*/
    color: blue;
}


ul ul {
    /*Style lvl 2 + 3 ul*/
    font-size: 2em;
}

CSS choice the latest information of the same importance. CSS 选择同样重要的最新信息。

Here can you look for CSS-Selectors: https://www.w3schools.com/cssref/css_selectors.asp您可以在这里寻找 CSS 选择器： https://www.w3schools.com/cssref/css_selectors.asp

如何为 CSS 中的根和子元素应用 styles

问题描述

1 个解决方案

解决方案1
0 2020-04-07 02:50:28

如何为 CSS 中的根和子元素应用 styles

问题描述

1 个解决方案

解决方案1 0 2020-04-07 02:50:28

解决方案1
0 2020-04-07 02:50:28