代码之家 › 专栏 › 技术社区 › Dipak

应用第n个子项不起作用

css-selectors css html

Dipak · 技术社区 · 7 年前

为什么? nth-child(n) HTML ,但我认为使用 nth-of-type(1), nth-of-type(2)......, nth-of-type(10) 在里面 CSS . 所有子级都包含相同的规则,那么为什么不在一个选择器中提到这些规则,而不是多次添加相同的规则呢?

我变了

nth-of-type(1), nth-of-type(2)...... , nth-of-type(10)

第n个孩子(n)

在下面的例子中,如果我使用一个规则 第n个孩子(n)

.col100{
  width:100%;
}
.left{
  float:left;
}
.tab-wrap {
  transition: 0.3s box-shadow ease;
  border-radius: 6px;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  list-style: none;
  background-color: #fff;
  margin: 40px 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
  .tab-wrap:hover {
    box-shadow: 0 12px 23px rgba(0, 0, 0, 0.23), 0 10px 10px rgba(0, 0, 0, 0.19); }

.tab {
  display: none; }

/*child can be more than 10, but code and rule is same.*/

  .tab:checked:nth-of-type(1) ~ article .tab_content:nth-of-type(1) {
    opacity: 1;
    transition: 0.5s opacity ease-in, 0.8s transform ease;
    position: relative;
    top: 0;
    z-index: 100;
    transform: translateY(0px);
    text-shadow: 0 0 0; }

/*child can be more than 10, but code and the rule is same.*/

  .tab:checked:nth-of-type(2) ~ article .tab_content:nth-of-type(2) {
    opacity: 1;
    transition: 0.5s opacity ease-in, 0.8s transform ease;
    position: relative;
    top: 0;
    z-index: 100;
    transform: translateY(0px);
    text-shadow: 0 0 0; }

/*child can be more than 10, but code and rule is same.*/

  .tab:checked:nth-of-type(3) ~ article .tab_content:nth-of-type(3) {
    opacity: 1;
    transition: 0.5s opacity ease-in, 0.8s transform ease;
    position: relative;
    top: 0;
    z-index: 100;
    transform: translateY(0px);
    text-shadow: 0 0 0; }

.tab:first-of-type:not(:last-of-type) + label {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0; }
  .tab:not(:first-of-type):not(:last-of-type) + label {
    border-radius: 0; }
  .tab:last-of-type:not(:first-of-type) + label {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0; }
  .tab:checked + label {
    background-color: #fff;
    box-shadow: 0 -1px 0 #fff inset;
    cursor: default; }
    .tab:checked + label:hover {
      box-shadow: 0 -1px 0 #fff inset;
      background-color: #fff; }
  .tab + label {
    box-shadow: 0 -1px 0 #eee inset;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    display: block;
    text-decoration: none;
    color: #333;
    flex-grow: 3;
    text-align: center;
    background-color: #f2f2f2;
    user-select: none;
    text-align: center;
    transition: 0.3s background-color ease, 0.3s box-shadow ease;
    height: 50px;
    box-sizing: border-box;
    padding: 15px; }
    .tab + label:hover {
      background-color: #f9f9f9;
      box-shadow: 0 1px 0 #f4f4f4 inset; }
  .tab_content {
    padding: 10px 25px;
    background-color: transparent;
    position: absolute;
    width: 97%;
    z-index: -1;
    opacity: 0;
    left: 0;
    transform: translateY(-3px);
    border-radius: 6px; }

<div class="clearfix"></div>


<div class="tab-wrap">
  <input type="radio" id="tab1" name="tabGroup1" class="tab" checked>
  <label for="tab1"><span class="font16">Menu</span></label>

  <input type="radio" id="tab2" name="tabGroup1" class="tab">
  <label for="tab2"><span class="font16">Sub-Menu</span></label>
  
  <input type="radio" id="tab3" name="tabGroup1" class="tab">
  <label for="tab3"><span class="font16">Sub-Menu-Sub</span></label>
  
  <article class="left col100">
    <div class="tab_content">
      <article>Text 1</article>
    </div>
    <div class="tab_content">
      <article>Text 2</article>
    </div>
    <div class="tab_content">
      <article>Text 3</article>
    </div>
  </article>
</div>

1 回复 | 直到 7 年前

Leo K 7 年前

好啊, nth-child(n) 不能工作,(语法上也不正确 nth-child(1n+0) ,或 nth-of-type(1n+0) ). 那个( An+B input.tab 给第一个兄弟姐妹 div.tab_content 输入选项卡 到第二个 安+B (后一种语法选择多个同级,而不是一个,而且表达式在选择器中出现两次并不意味着它只在 n

我看不出你想做什么的“干净”解决方案。您可能需要重新考虑整个策略,并使用不同的文档结构,仅使用一个选择器即可获得所需的内容,但是,如果使用一个规则和多个逗号分隔的选择器,则仍有可能实现显著的简化,例如:

.tab:checked:nth-of-type(1) ~ article .tab_content:nth-of-type(1),
.tab:checked:nth-of-type(2) ~ article .tab_content:nth-of-type(2),
.tab:checked:nth-of-type(3) ~ article .tab_content:nth-of-type(3)  {
    opacity: 1;
    transition: 0.5s opacity ease-in, 0.8s transform ease;
    position: relative;
    top: 0;
    z-index: 100;
    transform: translateY(0px);
    text-shadow: 0 0 0; }