Question

是否可以将相同的样式应用于元素1和元素2，而不调用元素1中的样式？

元素1是.notch

元素2是#fullbg

元素1必须始终位于元素2之前。我想将元素2的bg颜色应用于元素1和元素2.

如何让第一个<div class="notch">有一个黄色的bg（#fullbg），而不对<div class="notch">应用任何特定的样式（类/ ID）？

我想这可以用：nth-of-type（）选择器......？最终，我会有几个“缺口”，<div id="fullbg3">，<div id="fullbg4">等。

检查codepen示例 - 我希望第一个缺口为黄色（如fullbg），第二个缺口为红色（如fullbg2），而不给任何缺口他们自己的特殊类。

目前，第一个缺口是红色。它应该是黄色的。

http://codepen.io/Goatsy/pen/GqJGxb

HTML

<p>stuff</p>
<div class="notch">this should be YELLOW</div>

<p>stuff</p>
<div id="fullbg">this should be YELLOW</div>

<p>stuff</p>
<div class="notch">this should be RED</div>

<p>stuff</p>
<div id="fullbg2">this should be RED</div>

CSS

.notch,
#fullbg {
    background: yellow;
}

.notch,
#fullbg2 {
    background: red;
}

这里，更具体地说是我想要实现的目标：bgcolor和小块颜色应该匹配。 codepen.io/Goatsy/pen/rLVrJo

Answer 1

~（选择接班人）部分地解决了这个问题，虽然它有时候不是很灵活（即你必须为每个新的＆＃34;缺口＆＃34;）。

＆＃13;

.notch,#fullbg{
  background:yellow;
}
#fullbg~.notch,#fullbg2{
  background:red;
}
#fullbg2~.notch,#fullbg3{
  background:green;
}

＆＃13;

<p>stuff</p>
<div class="notch">this should be YELLOW</div>

<p>stuff</p>
<div id="fullbg">this should be YELLOW</div>

<p>stuff</p>
<div class="notch">this should be RED</div>

<p>stuff</p>
<div id="fullbg2">this should be RED</div>

<p>stuff</p>
<div class="notch">this should be GREEN</div>

<p>stuff</p>
<div id="fullbg3">this should be GREEN</div>

＆＃13;

Answer 2

根据评论/代码集示例更新

这是一个开始

＆＃13;

/* notch nav styles */
.notch-nav {
    overflow: hidden;
    background: #fff;
    margin: 0;
    list-style: none
}
.notch-nav li {
    float: right;
    margin-top: 33px;
    /* adjust this line to push entire notch nav down and away from minilinks */    
    margin-right: -15px;
}
.notch-nav a {
    display: block;
    /* padding:50px 0 20px 30px; */    
    margin-left: 30px;
    color: #cca134;
    text-decoration: none;
    font-size: 18px;
    padding-bottom: 25px;
}
.notch-nav a:hover {
    text-decoration: none;
    color: @295pms;
}

.notch-nav .current .dropdown:hover .dropbtn:before,
.notch-nav .current .dropdown:hover .dropbtn:after {
    display: none
}
.notch-nav .current .dropdown-content a:before,
.notch-nav .current .dropdown-content a:after {
    display: none
}
.notch-nav .current a {
    position: relative;
    text-decoration: none;
    z-index: 5;
}
.notch-nav .current a:before,
.notch-nav .current a:after {
    content: "";
    display: block;
    width: 26px;
    height: 26px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -15px;
}
/* make fullwidth-header 100% */
.fullwidth-header {
    display: none;
    width: 100%;
    height: 230px;
}
.fullwidth-header-block {
    display: block;
    background: @white;
    padding: 30px;
    margin-top: 53px;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.fullwidth-header-block p {
    margin-top: 0;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
}

/*  current classes  */
.curr1 li:nth-child(1),
.curr1 ~ div:nth-of-type(1) {
  background:blue;
  display: block;
}

.curr2 li:nth-child(2),
.curr2 ~ div:nth-of-type(2) {
  background:black;
  display: block;
}

.curr3 li:nth-child(3),
.curr3 ~ div:nth-of-type(3) {
  background:pink;
  display: block;
}

.curr4 li:nth-child(4),
.curr4 ~ div:nth-of-type(4) {
  background:green;
  display: block;
}

＆＃13;

<ul class="nav notch-nav curr4">
  <li>
    <div class="dropdown">
      <a class="dropbtn" href="/utilities/about-rpu">About</a>
    </div>
  </li>
  <li>
    <div class="dropdown">
      <a class="dropbtn" href="/utilities/?q=contractors">Contractors</a>
    </div>
  </li>
  <li>
    <div class="dropdown">
      <a class="dropbtn" href="/utilities/?q=businesses">Businesses</a>
    </div>
  </li>
  <li>
    <div class="dropdown">
      <a class="dropbtn" href="/utilities/?q=residents">Residents</a>
    </div>
  </li>
</ul>


<div class="fullwidth-header">
  About
</div>

<div class="fullwidth-header">
  Contractors
</div>

<div class="fullwidth-header">
  Businesses
</div>

<div class="fullwidth-header">
  Residents
</div>

＆＃13;

是否可以将相同的样式应用于元素1和元素2，而不调用元素1中的样式？

2 个答案: