文章/答案/技术大牛

发布

问CSS指向li内部ul ul li
EN

Stack Overflow用户

提问于 2018-05-20 18:18:22

回答 2查看 7.7K关注 0票数 1

我已经看过几个DB，但是我还没有找到适合我的场景的答案，所以我求助于专家，或者至少是更有经验的专家。我对HTML和CSS相当陌生。我想弄清楚如何把安莉的目标锁定在ul里面，那是安莉的内部，在ul的下面。有点像下拉菜单，主标题有一个带有更多选项的子菜单。我不想添加更多的类或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行。有什么办法我能做到吗？我利用各种格式来让它正常工作。我只想改变这两行的字体大小。我知道添加类或I会更容易，但在可能的情况下，我会尽量避免它们，因为我试图更好地理解整个子代、后代和目标。

css

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-05-20 18:23:26

就像这样

#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>

票数 1

Stack Overflow用户

发布于 2018-05-20 22:10:42

问题

"...I不想添加更多的类或id.我试图以测试1和测试2行为目标。有什么方法可以这样做吗？“

回答

是。但我们必须知道一些规则。CSS是声明式的，它的基本基础是规则。

卡德宁

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>

特异性

专用性规则是避免级联规则的唯一方法，是我们在引导CSS文件之后添加带有!important的规则集的原因，但在覆盖任何样式方面仍然没有成功。下面是CSS规则集：选择器{propertyName: propertyValue}⎱⎰声明BlockEach CSS选择器具有可测量的质量，称为专用性。它是与共享一个或多个属性并由公共元素或元素组使用的其他选择器相比，选择器声明的具体程度的度量。通过允许具有最大特异性的选择器的规则集用自己的样式覆盖其他规则集的样式，可以解决该冲突。如果冲突规则集的选择器具有同等的特殊性，那么级联规则就适用(哪条规则集离顶部最远)。
选择器的特异性由4个不同的数字来衡量。从左(最大)到右(最少)：

1. Being an inline style attribute. A single point in this category overrides all other categories that follow it. The only thing that can override it is `!important` _**unless**_ of course it has an `!important` as well. If that's the case, then we can use the Grand Equalizer: JavaScript.
2. **`#ID`**. Having an **`#ID`** in a selector overrides everything except `!important` and inline style attributes.
3. **`.CLASS`**. Having **`.Class`**(es), **`[Attributes]`**, and **`:Pseudo-class`**(es) in a selector overrides **`<Element Tags>`** and **`::Pseudo-elements`**.
4. **`<Element Tags>`** and **`::Pseudo-elements`**, very general thus the least in specificity.

转到此页面获取在线特异性计算器

如果在路径中没有添加任何动态元素，那么这个方法就可以了：

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

布局中有三个相同的片段--每个使用一个不同的相对度量单位(rem、em、%)，其等效距离为48‘s(是16px = 1rem = 1em = 100%默认值的3倍)。每个片段还展示了如何使用!important、专用性、和等框架，使样式在引导CSS这样的框架中不可战胜。

演示

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;
}

<!DOCTYPE html>
<html>

<head>
  <meta chrset='utf-8'>

</head>

<body>
  <ul id="header-navA">
    <li>
      <a href="#"> <b>A</b> </a>
    </li>
    <li>
      <a href="#"> <i>!important &amp; Specificity Test</i> </a>
      <ul>
        <li> <b>3rem</b> > <a href="#"> Test A1 </a> </li>
        <li> <b>3rem</b> > <a href="#"> Test A2 </a> </li>
      </ul>
    </li>
  </ul>
  <hr>
  <ul id="header-navB">
    <li>
      <a href="#"> <b>B</b> </a>
    </li>
    <li>
      <a href="#"> <i>Specificity Test</i> </a>
      <ul>
        <li> <b>3em</b> > <a href="#"> Test B1 </a> </li>
        <li> <b>3em</b> > <a href="#"> Test B2 </a> </li>
      </ul>
    </li>
  </ul>
  <hr>
  <ul id="header-navC">
    <li>
      <a href="#"> <b>C</b> </a>
    </li>
    <li>
      <a href="#"> <i>!important &amp; Inline Test</i> </a>
      <ul>
        <li> <b>300%</b> > <a href="#" style='font-size:200%;'> Test C1 </a> </li>
        <li> <b>200%</b> > <a href="#" style='font-size:200% !important'> Test C2 </a> </li>
      </ul>
    </li>
  </ul>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50438023

复制

相似问题

问CSS指向li内部ul ul li
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS指向li内部ul ul liEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS指向li内部ul ul li
EN