我在下面有以下CSS：
.last-ns li:first-child a::before {
content: "";
position: absolute;
left: 5px;
height: 280px;
border-left: 1px solid #aaa;
}
在此示例中，CSS正在抓取类li中的每个第一个子.last-ns元素。我不想要这个。除了li类中的第一个.last-ns元素外，如何告诉CSS忽略所有元素。
我尝试了几种不同的方法来完成失败。
* {
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 &
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 & 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
& 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 & 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
答案 0 :(得分：3)
试试.last-ns > li:first-child > a::before。请参阅the css selector reference。
>选择器仅选择指定父级的直接子级。
答案 1 :(得分：1)
使用> CSS选择器。如果您有一个选择器.Foo > .Bar，它只会将该样式应用于.Foo具有.Bar类的直接子项的元素。
<强> HTML
<div class="foo">
<div class="bar" id="first">
<div class="bar"></div>
<div class="bar"></div>
...
</div>
</div>
<强> CSS
.foo > .bar
{
background: red;
}
在此示例中，具有#first id的元素将是唯一具有background: red样式的元素。