问题

Question

我查看了几个数据库，但我没有找到符合或适用于我的方案的答案，所以我转向专家，或者至少更有经验的人。我是HTML和CSS的新手。我正在试图弄清楚如何在一个ul里面找到一个里面的li，那个在li里面。有点像下拉菜单，其中主标题有一个带有更多选项的子菜单。我不想添加更多的类或id。我已经尝试了以下版本来应用一些基本的CSS，但我似乎无法将其定位为目标：

    #header-nav ul li
    li ul li a
    li#header-nav ul li

即使后代似乎也不起作用（或者可能是我没有正确地做到这一点？）

HTML：

 <ul id="header-nav">
    <li>
      <a href="#"> Home </a>
    </li>
    <li>
      <a href="#">Test Submenu </a>
      <ul>
        <li> > <a href="#"> Test 1 </a> </li>
        <li> > <a href="#"> Test 2 </a> </li>
      </ul>
    </li>
 </ul>

我正在尝试定位测试1和测试2行。有没有办法可以做到这一点？我利用格式使它工作。我只是想改变这两行的字体大小。我知道添加类或ID会更容易，但我试图在可能的情况下避免使用它们，因为我试图了解整个孩子，后代，更好地瞄准事物。

Answer 1

像那样

#header-nav li > ul > li a {
  background-color: red;
  font-size: 80%;
}

<ul id="header-nav">
    <li>
      <a href="#"> Home </a>
    </li>
    <li>
      <a href="#">Test Submenu </a>
      <ul>
        <li> > <a href="#"> Test 1 </a> </li>
        <li> > <a href="#"> Test 2 </a> </li>
      </ul>
    </li>
        <li>
      <a href="#">Test Submenu </a>
      <ul>
        <li> > <a href="#"> Test 1 </a> </li>
        <li> > <a href="#"> Test 2 </a> </li>
      </ul>
    </li>
        <li>
      <a href="#">Test Submenu </a>
      <ul>
        <li> > <a href="#"> Test 1 </a> </li>
        <li> > <a href="#"> Test 2 </a> </li>
      </ul>
    </li>
 </ul>

Answer 2

问题

＆＃34; ...我不想添加更多课程或ID ...我试图定位测试1和测试2行。有没有办法可以做到这一点？＆＃34;

答案

是。但我们必须了解一些规则。 CSS是声明性的，其基础是规则。

Casscading

CSS的流程是一系列规则集，其优先级高于之前的规则。从顶部（由于继承而优先级较低但影响较大）到底部（优先级较高但影响较小，因为继承在同一级联方向上工作（父对子）。
规则集越接近它所代表的元素，规则集就越有可能覆盖之前的规则集的样式。

<小时/>

样式

<小时/> 外部样式表：普通优先级，最易维护，最大范围 - 无限量的页面。

页面位置：<head>代码的顶部。

示例： <link href="https://style.com/path/to/style.min.css" rel="stylesheet">

内联样式块：更高优先级，可维护，范围有限 - 单页。

页面位置：</head>代码的底部。

示例： <style> selector { propertyName: propertyValue } ...</style>

内联样式属性：最高优先级，最不可维护，最小范围 - 仅限于单个标记。

页面位置：在标记中。

示例： <div style="propertyName: propertyValue"></div>

Specificity

特殊性规则是避免级联规则的唯一方法。这是我们在Bootstrap CSS文件之后添加带!important的规则集并仍然具有的原因没有成功覆盖任何风格。这是一个CSS规则集：
```
selector {propertyName: propertyValue}
          ⎱                         ⎰
               Declaration Block    
```
每个CSS Selector都具有可测量的质量，称为“特异性”。它衡量选择器声明的具体程度，而不是共享一个或多个属性并由共同元素或元素组使用的其他选择器。从该冲突中，通过允许具有最大特异性的选择器的规则集来覆盖具有其自己的样式的其他规则集的样式来解决该问题。如果冲突的规则集具有相同规范的选择器，则应用级联规则（哪个规则集距离顶部最远）。

选择器的特异性由4个单独的数字来衡量。从左（最大）到右（最少）：
1. 作为内联样式属性。此类别中的单个点将覆盖其后的所有其他类别。唯一可以覆盖它的是!important ，除非 当然它也有!important。如果是这样，那么我们可以使用Grand Equalizer：JavaScript。
2. <强> #ID 即可。在选择器中使用 #ID 会覆盖除!important和内联样式属性之外的所有内容。
3. <强> .CLASS 即可。在选择器覆盖中具有 .Class （es）， [Attributes] 和 :Pseudo-class （es） <Element Tags> 和 ::Pseudo-elements 。
4. <Element Tags> 和 ::Pseudo-elements ，非常一般，因此特异性最低。

如果路径中没有添加任何动态元素，那么这将有效：

    #header-nav li:last-of-type ul li a {
      font-size: 48px;
    }

布局中有3个相同的片段 - 每个片段使用不同的相对测量单位（rem，em，%），等效距离为48px（默认值为16px = 1rem = 1em = 100%的3倍。每个片段还显示特异性和 {{1} 用于从像Bootstrap CSS这样的框架制作样式，这样无敌。

演示

＆＃13;

!important

＆＃13;

html {
  font: 400 16px/1.45 Consolas;
}

body {
  font-size: 1rem;
}

b {
  font-size: 1.5rem;
  color: tomato;
}

i {
  font-size: 1.25rem;
  color: #A3CF65;
}


/* A */


/* 0,1,1,4 ⭐ */

#header-navA li:last-of-type ul li a {
  font-size: 3rem !important;
}


/* 0,1,0,4 */

#header-navA li ul li a {
  font-size: 2rem !important;
}


/* B */


/* 0,2,1,4 ⭐ */

#header-navB#header-navB li:last-of-type ul li a {
  font-size: 3em;
}


/* 0,1,1,4 */

#header-navB li:last-of-type ul li a {
  font-size: 2em;
}


/* C */


/*  */

#header-navC li:last-of-type ul li a {
  font-size: 300% !important;
}

＆＃13;

用于在li

2 个答案:

问题

答案

Casscading

样式

Specificity

演示