html - 使用 li :first-child is grabbing all first-child li elements in a given class-6ren

html - 使用 li :first-child is grabbing all first-child li elements in a given class

转载作者：行者123 更新时间：2023-12-02 21:10:02

我在下面有以下 CSS:

.last-ns li:first-child a::before {
  content: "";
  position: absolute;
  left: 5px;
  height: 280px; 
  border-left: 1px solid #aaa;
}

在这个例子中，CSS 抓取类 .last-ns 中的每个第一个子元素 li。我不想要这个。我怎样才能告诉 CSS 忽略除 .last-ns 类中的第一个 li 元素之外的所有元素。

我尝试了几种不同的方法来完成失败。

* {
  margin: 0;
  padding: 0;
  font-family: 'Lato', sans-serif;
}

.tree {
  width: auto;
  margin-left: auto;
  margin-right: auto;
}

.tree ul {
  padding-top: 20px;
  position: relative;
  display: table;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.tree li {
  background-color: white;
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0 5px;
  display: table-cell;
  vertical-align: top;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

/*::before and ::after to draw the connectors*/
.tree li::before, .tree li::after {
  content:'';
  position: absolute;
  top: 0;
  right: 50%;
  border-top: 1px solid #aaa;
  width: 50%;
  height: 20px;
}

.tree li:after {
  right: auto;
  left: 50%;
  border-left: 1px solid #aaa;
}

/* Connectors CSS */
.tree li:only-child::after, .tree li:only-child::before {
  display: none;
}

.tree li:only-child {
  padding-top: 0;
}

.tree li:first-child::before, .tree li:last-child::after {
  border: 0 none;
}

.tree li:last-child::before {
  border-right: 1px solid #aaa;
}

.tree ul ul::before {
  content:'';
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 1px solid #aaa;
  width: 0;
  height: 20px;
  margin-left: -1px;
}

.tree li a {
  background-color: white;
  border: 1px solid #aaa;
  padding: 3px 6px;
  text-decoration: none;
  color: #666;
  font-size: 12px;
  display: inline-block;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.tree li a:hover {
  background: #c8e4f8;
  color: #000;
  border: 1px solid #94a0b4;
}

li a.just-line {
  display: none;
}

a.just-line + ul {
  padding-top: 74px;
}

a.just-line + ul:before {
  height: 74px;
}

.title {
  font-weight: bold;
}

.tree a {
  width: 120px;
  height: 70px;
}

/* Accordion controls */

.ss_button { 
  cursor: pointer;
  color: #FFFFFF;
}

.ss_content {
  padding: 5px 10px;
  text-decoration: none;
  color: #666;
  font-size: 11px;
  width: 50%;
  margin: 0 auto;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.ss_content {
  display: none;
}

.tree li a:focus {
  border: 1px solid red;
  background-color: yellow;
}

/* temporary solution */

.off-fix {
  position: relative;
  top: -20px;
}

.off-fix2 {
  position: relative;
  top: -40px;
}

/* Bottom row */

.stacked a {
  width: 100px;
}

.stacked li {
  position: relative;
  right: -15px;
  display: block;
}


/* PLAYGROUND - FIX AFTER */
.stacked li:last-child::before {
  border: 0 none;
}

.stacked li:after {
  border: 0 none;
}

/*::before and ::after to draw the connectors*/
.stacked li::before, .stacked li::after {
  border-top: 0 none;
}

.stacked li:after {
  border-left: 0 none;
}

/* Connectors CSS */
.stacked li:only-child::after, .stacked li:only-child::before {
  display: none;
}

.stacked li:first-child::before, .stacked li:last-child::after {
  border: 0 none;
}

.stacked li:last-child::before {
  border-right: 0 none;
}

.last-ns ul:last-child::before {
  border-left: 0 none;
}

.last-ns ul:first-child li:first-child a::before {
  content: "";
  position: absolute;
  left: 5px;
  height: 280px; 
  border-left: 1px solid #aaa;
}

.last-ns ul li:first-child::before {
  content: "";
  border-left: 1px solid #aaa;
  position: absolute;
  left: -15px;
  top: -35px;
  height: 196px;
}

.drop-2 {
  margin-top: 216px;
}

.drop-1 {
  margin-top: 99px;
}

.drop-0 {
  margin-top: 0px;
}

.sm-title {
  font-size: 8px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <title>Organization Chart</title>
  <link href='https://fonts.googleapis.com/css?family=Lato:400,700' rel=
  'stylesheet' type='text/css'>
  <link href="mobile-css.css" media="screen and (max-width: 1023px)" rel=
  "stylesheet" type="text/css">
  <link href="main.css" media="screen and (min-width: 1024px)" rel="stylesheet"
  type="text/css"><!-- jQuery plugin -->

  <script src=
  "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
  </script><!-- Custom scripts (accordion) -->

  <script src="app.js">
  </script>
</head>
<body>
  <div class="tree">
    <ul>
      <!-- DIRECTOR -->
      <li class="director">
        <a class="ss_button lvl-1" href="javascript:void(0);"><span class=
        "title">Director</span><br>
        <span class="sm-hide">Person Name</span></a>
        <ul>
          <!-- ASSISTANT TO THE DIRECTOR -->
          <li>
            <a class="ss_button lvl-2" href="javascript:void(0);"><span class=
            "title">Assistant to the Director</span><br>
            <span class="sm-hide">Person Name</span></a>
            <ul>
              <!-- DEPUTY DIRECTOR -->
              <li class="deputydirector">
                <a class="ss_button lvl-2" href=
                "javascript:void(0);"><span class="title">Deputy
                Director</span><br>
                <span class="sm-hide">Person Name</span></a>
                <ul>
                  <li>
                    <ul class='last-ns'>
                      <!-- ASSOCIATE DIRECTOR -->
                      <li class="associatedirector1 off-fix">
                        <a class="ss_button lvl-3" href=
                        "javascript:void(0);"><span class="title">Associate
                        Director</span><br>
                        <span class="sm-hide">Person Name</span></a>
                        <ul>
                          <li>
                            <ul>
                              <li>
                                <ul class='stacked drop-2'>
                                  <!-- CONSUMER LAWS & REGULATIONS -->
                                  <li>
                                    <a class='ss_button lvl-6' href=
                                    "javascript:void(0);"><span class=
                                    "title">Consumer Laws &amp;
                                    Regulations</span><br>
                                    <span class="sm-hide">Person Name,
                                    Manager</span></a>
                                  </li>
                                </ul>
                              </li>
                            </ul>
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </li><!-- SENIOR ASSOCIATE DIRECTOR -->
                  <li class="seniorassociatedirector1">
                    <a class="ss_button lvl-3" href=
                    "javascript:void(0);"><span class="title">Senior Associate
                    Director</span><br>
                    <span class="sm-hide">Person Name</span></a>
                    <ul>
                      <li>
                        <ul>
                          <li>
                            <ul class='last-ns'>
                              <!-- ASSISTANT DIRECTOR -->
                              <li class="assistantdirector1 off-fix2">
                                <a class="ss_button lvl-4" href=
                                "javascript:void(0);"><span class=
                                "title">Assistant Director</span><br>
                                <span class="sm-hide">Person Name</span></a>
                                <ul class='stacked drop-1'>
                                  <!-- EXAMINER TRAINING -->
                                  <li>
                                    <a href=
                                    "javascript:void(0);" class='ss_button lvl-6'>
                                    <span class="title">Examiner
                                    Training</span><br>
                                    <span class="sm-hide">Person Name,
                                    Manager</span></a>
                                  </li><!-- SUPERVISION ADMINISTRATION -->
                                  <li>
                                    <a href=
                                    "javascript:void(0);" class='ss_button lvl-6'>
                                    <span class="title">Supervision
                                    Administration</span><br>
                                    <span class="sm-hide">Person Name,
                                    Manager</span></a>
                                  </li><!-- RESERVE BANK OVERSIGHT -->
                                  <li>
                                    <a href=
                                    "javascript:void(0);" class='ss_button lvl-6'>
                                    <span class="title">Reserve Bank
                                    Oversight</span><br>
                                    <span class="sm-hide">Person Name,
                                    Manager</span></a>
                                  </li>
                                </ul>
                              </li>
                            </ul>
                          </li>
                        </ul>
                      </li>
                      <li>
                        <ul>
                          <li>
                            <ul class='last-ns'>
                              <!-- ASSISTANT DIRECTOR -->
                              <li class="assistantdirector2 off-fix2">
                                <a class="ss_button lvl-4" href=
                                "javascript:void(0);"><span class=
                                "title">Assistant Director</span><br>
                                <span class="sm-hide">Person Name</span></a>
                                <ul class='stacked drop-1'>
                                  <!-- FAIR LENDING ENFORCEMENT -->
                                  <li>
                                    <a href=
                                    "javascript:void(0);" class='ss_button lvl-6'>
                                    <span class="title">Fair Lending
                                    Enforcement</span><br>
                                    <span class="sm-hide">Person Name,
                                    Manager</span></a>
                                  </li>
                                  <!-- DECEPTIVE ACTS OR PRACTICES ENFORCEMENT -->
                                  <li>
                                    <a href=
                                    "javascript:void(0);" class='ss_button lvl-6'>
                                    <span class="title sm-title">Unfair &amp; Deceptive
                                    Acts or Practices Enforcement</span><br>
                                    <span class="sm-hide">Person Name</span></a>
                                  </li><!-- SUPERVISORY POLICY & OUTREACH -->
                                  <li>
                                    <a href=
                                    "javascript:void(0);" class='ss_button lvl-6'>
                                    <span class="title">Supervisory Policy
                                    &amp; Outreach</span><br>
                                    <span class="sm-hide">Person Name,
                                    Manager</span></a>
                                  </li><!-- APPLICATIONS -->
                                  <li>
                                    <a href=
                                    "javascript:void(0);" class='ss_button lvl-6'>
                                    <span class="title">Applications</span><br>
                                    <span class="sm-hide">Person Name,
                                    Manager</span></a>
                                  </li>
                                </ul>
                              </li>
                            </ul>
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </li><!-- SENIOR ASSOCIATE DIRECTOR -->
                  <li class="seniorassociatedirector2">
                    <a class="ss_button lvl-3" href=
                    "javascript:void(0);"><span class="title">Senior Associate
                    Director</span><br>
                    <span class="sm-hide">Person Name</span></a>
                    <ul>
                      <li>
                        <ul class='last-ns'>
                          <!-- DEPUTY ASSOCIATE DIRECTOR -->
                          <li class="depassociatedirector off-fix">
                            <a class="ss_button lvl-4" href=
                            "javascript:void(0);"><span class="title">Deputy
                            Associate Director</span><br>
                            <span class="sm-hide">Person Name</span></a>
                            <ul class='stacked drop-1'>
                              <!-- COMMUNITY DEVELOPMENT -->
                              <li>
                                <a class='ss_button lvl-6' href=
                                   "javascript:void(0);"><span class=
                                                               "title">Community Development</span><br>
                                  <span class="sm-hide">Person Name,
                                    Manager</span></a>
                              </li><!-- POLICY ANALYSIS -->
                              <li>
                                <a class='ss_button lvl-6' href=
                                   "javascript:void(0);"><span class=
                                                               "title">Policy Analysis</span><br>
                                  <span class="sm-hide">Person Name,
                                    Manager</span></a>
                              </li>
                            </ul>
                          </li>
                        </ul>
                      </li><!-- ASSOCIATE DIRECTOR -->
                      <li class="associatedirector2">
                        <a class="ss_button lvl-4" href=
                        "javascript:void(0);"><span class="title">Associate
                        Director</span><br>
                        <span class="sm-hide">Person Name</span></a>
                        <ul>
                          <li>
                            <ul class='last-ns'>
                              <!-- ASSISTANT DIRECTOR -->
                              <li class="assistantdirector3 off-fix">
                                <a class="ss_button lvl-5" href=
                                "javascript:void(0);"><span class=
                                "title">Assistant Director</span><br>
                                <span class="sm-hide">Person Name</span></a>

                                <ul class='stacked drop-0'>
                                  <!-- CONSUMER & COMMUNITY DEVELOPMENT RESEARCH -->
                                  <li>
                                    <a class='ss_button lvl-6' href=
                                    "javascript:void(0);"><span class=
                                    "title sm-title">Consumer &amp; Community
                                    Development Research</span><br>
                                    <span class="sm-hide">Person Name,
                                    Manager</span></a>
                                  </li><!-- INFORMATION MANAGEMENT -->
                                  <li>
                                    <a class='ss_button lvl-6' href=
                                    "javascript:void(0);"><span class=
                                    "title">Information Management</span><br>
                                    <span class="sm-hide">Person Name,
                                    Manager</span></a>
                                  </li>
                                </ul>
                              </li>
                            </ul>
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <ul class='last-ns'>
                      <!-- ASSISTANT DIRECTOR -->
                      <li class="assistantdirector4 off-fix">
                        <a class="ss_button lvl-3" href=
                        "javascript:void(0);"><span class="title">Assistant
                        Director</span><br>
                        <span class="sm-hide">Person Name</span></a>
                        <ul class='stacked drop-2'>
                          <!-- ADMINISTRATION -->
                          <li>
                            <a class='ss_button lvl-6' href=
                            "javascript:void(0);"><span class=
                            "title">Administration</span><br>
                            <span class="sm-hide">Person Name,
                            Manager</span></a>
                          </li><!-- TECHNOLOGY DEPARTMENT -->
                          <li>
                            <a class='ss_button lvl-6' href=
                            "javascript:void(0);"><span class=
                            "title">Technology Development</span><br>
                            <span class="sm-hide">Person Name,
                            Manager</span></a>
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div><!-- End .tree -->
</body>
</html>

CodePen -- http://codepen.io/jacob_johnson/pen/zvgWjW?editors=110

最佳答案

尝试 .last-ns > li:first-child > a::before。参见 the css selector reference .

> 选择器只选择指定父级的直接子级。

关于html - 使用 li :first-child is grabbing all first-child li elements in a given class，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34024569/

文章推荐： indices - DirectX 12 索引缓冲区

文章推荐： javascript - 如何将多个对象合并为单独的对象

文章推荐： django - DRF - 序列化和反序列化进一步解释

css - .class > .class 和 .class .class 的区别
我只想知道它们之间的区别: .class .class{ font-size:14px; } 对比: .class > .class{ font-size:14px; } 是一样的东西吗？最佳答案
css - ".class"和 ".class, .class .class"之间的区别？
PrimeFaces 文档的以下摘录使标题中描述的两个选择器之间似乎存在差异: .ui-widget, .ui-widget .ui-widget { font-size: 90% !imp
javascript - 是否可以选择类(class) & 类(class) & 类(class)，而不仅仅是类(class)或类(class)或类(class)？
我正在尝试选择特定值。但我遇到了一个问题。我有两个元素，一个有 X Y，另一个有 X Y Z。当选择 X Y Z 时，我也收到 X Y 的值...有没有办法让它寻找 X AND Y AND Z 而
css - 选择器 ".class.class"和 ".class .class"有什么区别？
.class.class 和 .class .class 有什么区别？最佳答案 .class .class 匹配类 .class 的任何元素，这些元素是类 .class< 的另一个元素的后代/. .
java - .class == .class 对比 .class.toString() 对比 .class.toString()
我正在研究 Classname.class 和 Classname.class.toString() 并发现了一些不寻常的东西。 .class 在同一个类上运行时似乎等同于 .class。尽管 .cl
class - 达特:我无法在另一个类(class)中实例化一个类(class)
我试图在Dart中扩展列表并在此列表中使用另一个类。这是我的示例，其中注释出了问题: import "Radio.dart"; // extends ListBase { List ra
class-design - 我应该如何将大而臃肿的类(class)分成较小的类(class)？
我有一个很大的“经理”类，我认为它做得太多了，但我不确定如何将它划分为更多逻辑单元。一般来说类主要由以下方法组成: class FooBarManager{ GetFooEntities();
PHP Class 找到 Class 文件但找不到文件中的 Class
我在一个文件中定义了一个抽象父类(super class)，在另一个文件中定义了一个子类。我需要父类(super class)文件和堆栈跟踪报告来找到一个包含它。但是，当它到达“extends”行时
c++ - 在template class T1, class T2>中，是什么意思？
我在 A. Alexenderscu 的现代 C++ 设计中找到了一些模板示例作者使用以下行的地方 template class CheckingPolicy // class SmartPt
java - 面向对象设计: class inherit class that contains field of class that inherit another class
看一下这段代码: public static class A { public void doA() { } } public static class B extends A {
html - 在类(class)内部设置类(class)样式，但不要在同一个类(class)的外部设置类(class)样式
我有两个具有 .body 类的 div，但是，一个位于另一个具有 .box 类的 div 中 - 如下所示: 我只想为 .box 内部的 .body 设置样式...但我在下面所
c++ - 为什么要编译 class::class::class::static Class Member()(在 C++ 中)？
我一定是遗漏了 C++ 规范中的某些内容，因为我无法解释为什么以下代码可以成功编译: class MyClass { static void fun(); }; int main() { MyClas
python - 名称间距 : How to set class variable of inner class based on class variable of outer class?
我正在尝试在 python 中“模拟”命名空间。我使用内部和外部类层次结构来创建我的命名空间。例如，您希望将文件(如资源)的路径保存在一个位置。我试过这样的事情: src = #path to sou
crystal-lang - Crystal : Class+ is not a class, 这是一个 Class+
在试验 online crystal compiler 时(这太棒了)，我遇到了一个我似乎无法找到解释的错误: class Person class Current < self end
class - `Class of `类型声明的含义是什么？
在查看我的一段代码时，我陷入了如下的一条语句。 TMyObjectClass = TMyObject 类；我有点困惑，不知道这句话是什么意思。由于 TMyObjectClass 在该语句上方没有声明
class - Dart中的重复类(class)
我正在编写一个简单的应用程序，以学习一些基本的Dart编程，但无法弄清楚其结构和包含的内容-我得到了一个重复的类Point 首先，我有一个叫做MouseTrack的主类。它将初始化列表并产生循环。 #
java - Serializable.class 怎么不能从 Class.class 分配？
在 org.springframework.core.SerializableTypeWrapper (版本 5.2.3)，第 112 行有以下代码: if (GraalDetector.in
javascript - 将鼠标悬停在一个类(class)上会影响页面上同一类(class)的所有其他类(class)
我希望将鼠标悬停在子导航中的列表项上，以激活页面上该类别中所有项的类(不仅仅是父元素或同级元素)。有任何想法吗？这是我的意思的一个例子: img.BLUE {border:1px solid #FF
java - 检查类(class)是否是类(class)的子类(class)
我正在通过 ClassLoader 加载类: Class clazz = urlClassLoader.loadClass(name.substring(0, name.length() - 6).r
c++ - 当返回值是class或class或class等时如何使用enable_if？
以下简化的类在从 get() 返回值时执行不同的操作，具体取决于该类是被赋予 double 值还是数组作为模板参数: #include "array" #include "type_traits" t

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 使用 li :first-child is grabbing all first-child li elements in a given class