向导航项

时间：2017-07-19 15:03:46

标签： html css output

我目前正在清理响应式菜单的代码，但出于某种原因，当我将id添加到导航项时，输出会发生变化。

@charset "UTF-8";

/* CSS Document */


/*=========== MAIN CODE ===========*/

* {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
}

div#container {
  width: 100%;
}


/*=================================*/


/*=========== MAIN MENU ===========*/

div#menu-wrapper {
  width: 100%;
  text-align: center;
  position: fixed;
  z-index: 1000;
}

div#wrapper {
  width: 100%;
  text-align: center;
}

.toggle,
[id^=drop] {
  display: none;
}


/* Hide the navigation menu by default */

.toggle + a,
.menu {
  display: none;
}


/* Stylinf the toggle lable */

.toggle {
  display: block;
  padding: 14px 20px;
  border: none;
  font-family: 'Zilla Slab', serif;
  font-size: 16px;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  color: #fff;
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
}

.label {
  text-align: left;
}

.toggle:hover {}


/* Display Dropdown when clicked on Parent Lable */

[id^=drop]:checked + ul {
  display: block;
}

nav#main {
  background: rgba(0, 0, 0, 1);
}

nav#main:after {
  content: "";
  display: table;
}

nav#main ul {
  list-style: none;
  position: relative;
}

nav#main ul li {
  display: block;
}

nav a {
  display: block;
  padding: 14px 20px;
  font-family: 'Zilla Slab', serif;
  font-size: 16px;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  color: #fff;
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
}


/* Hide Dropdown */

nav ul ul {
  display: none;
  position: static;
  color: #ffffff;
}


/* Dropdown */

nav#main ul ul li {
  display: block;
  position: relative;
  width: 100%;
}


/* '+' = Dropdown symbol 
li > a:after { content:  ' +'; }
li > a:only-child:after { content: ''; }
*/


/* Media Queries
--------------------------------------------- */

@media all and (min-width: 768px) {
  nav#main ul li {
    display: inline-block;
  }
  /* Display Dropdowns on Hover */
  nav#main ul li:hover > ul {
    display: block;
  }
  nav#main ul ul {
    display: none;
    position: absolute;
  }
  nav#main ul ul li {
    display: list-item;
  }
  /* Hide the navigation menu by default */
  .toggle + a,
  .menu {
    display: inherit;
  }
  .toggle {
    display: none;
  }
}


/*=================================*/
<body>

  <div id="container">
    <div class="menu-wrap" id="wrapper">
      <nav id="main">
        <label for="drop" class="toggle label">
          <div id="hamburger">&#9776;</div>
        </label>
        <input type="checkbox" id="drop" />
        <ul class="menu">
          <li><a href="#">Home</a>
          </li>
          <li><a href="#">About</a>
          </li>
          <li>
            <!-- First Tier Drop Down -->
            <label for="drop-1" class="toggle">Portfolio</label>
            <a href="#">Portfolio</a>
            <input type="checkbox" id="drop-1" />
            <ul>
              <li><a href="#">Photography</a>
              </li>
              <li><a href="#">Visuals</a>
              </li>
              <li><a href="#">Webdesign</a>
              </li>
              <li><a href="#">Videos</a>
              </li>
              <li><a href="#">Papers</a>
              </li>
            </ul>
          </li>
          <li><a href="#">Contact</a>
          </li>
        </ul>
      </nav>
    </div>

  </div>

</body>

我正在尝试将'#main'添加到css导航项（因为我的导航项具有id'main'），因此css代码特定于主菜单，因为我的网站的某些页面需要一个二级菜单，我希望在我的代码中将它们分开，显然。将导航更改为nav #main时，有两个css项会更改输出，其余的我可以更改而没有任何问题：

nav a {
    display: block;
    padding: 14px 20px;
    font-family: 'Zilla Slab', serif;
    font-size: 16px;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    color: #fff;
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
}

nav ul ul {
    display:none;
    position: static;
    color: #ffffff;
}

问题：
- 将nav a更改为nav #main a时：投资组合标签显示为double（a和标签都是） - 将nav ul ul更改为nav #main ul ul时：单击操作以显示“投资组合”下方的下拉列表不再有效。
这个问题可以看作这个小提琴：https://jsfiddle.net/2z9gdabt/1/

通过添加ID（或类，就此而言）我只调用该特定元素，对吧？那么为什么在没有其他导航元素时专门调用该元素时输出会发生变化？

我确定我错过了一些东西，但是有人可以向我解释为什么在为css代码添加ID时输出会发生变化吗？

1 个答案:

答案 0 :(得分：2)

这是一个passing the output问题。添加ID会增加特异性，因此隐藏[id^=drop]:checked + ul并通过nav#menu显示子菜单的其他规则没有足够的特异性来覆盖默认规则。只需将@charset "UTF-8"; /* CSS Document */ /*=========== MAIN CODE ===========*/ * { margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } html, body { width: 100%; height: 100%; min-height: 100%; } div#container { width: 100%; } /*=================================*/ /*=========== MAIN MENU ===========*/ div#menu-wrapper { width: 100%; text-align: center; position: fixed; z-index: 1000; } div#wrapper { width: 100%; text-align: center; } .toggle, [id^=drop] { display: none; } /* Hide the navigation menu by default */ nav#main .toggle + a, .menu { display: none; } /* Stylinf the toggle lable */ .toggle { display: block; padding: 14px 20px; border: none; font-family: 'Zilla Slab', serif; font-size: 16px; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; text-decoration: none; color: #fff; text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5); } .label { text-align: left; } .toggle:hover {} /* Display Dropdown when clicked on Parent Lable */ nav#main [id^=drop]:checked + ul { display: block; } nav#main { background: rgba(0, 0, 0, 1); } nav#main:after { content: ""; display: table; } nav#main ul { list-style: none; position: relative; } nav#main ul li { display: block; } nav#main a { display: block; padding: 14px 20px; font-family: 'Zilla Slab', serif; font-size: 16px; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; text-decoration: none; color: #fff; text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5); } /* Hide Dropdown */ nav#main ul ul { display: none; position: static; color: #ffffff; } /* Dropdown */ nav#main ul ul li { display: block; position: relative; width: 100%; } /* '+' = Dropdown symbol li > a:after { content: ' +'; } li > a:only-child:after { content: ''; } */ /* Media Queries --------------------------------------------- */ @media all and (min-width: 768px) { nav#main ul li { display: inline-block; } /* Display Dropdowns on Hover */ nav#main ul li:hover > ul { display: block; } nav#main ul ul { display: none; position: absolute; } nav#main ul ul li { display: list-item; } /* Hide the navigation menu by default */ .toggle + a, .menu { display: inherit; } .toggle { display: none; } } /*=================================*/添加到这些选择器中。

CSS specificity

＆＃13;
＆＃13; 
<body>

  <div id="container">
    <div class="menu-wrap" id="wrapper">
      <nav id="main">
        <label for="drop" class="toggle label">
          <div id="hamburger">&#9776;</div>
        </label>
        <input type="checkbox" id="drop" />
        <ul class="menu">
          <li><a href="#">Home</a>
          </li>
          <li><a href="#">About</a>
          </li>
          <li>
            <!-- First Tier Drop Down -->
            <label for="drop-1" class="toggle">Portfolio</label>
            <a href="#">Portfolio</a>
            <input type="checkbox" id="drop-1" />
            <ul>
              <li><a href="#">Photography</a>
              </li>
              <li><a href="#">Visuals</a>
              </li>
              <li><a href="#">Webdesign</a>
              </li>
              <li><a href="#">Videos</a>
              </li>
              <li><a href="#">Papers</a>
              </li>
            </ul>
          </li>
          <li><a href="#">Contact</a>
          </li>
        </ul>
      </nav>
    </div>

  </div>

</body>
＆＃13; 
from os import mkdir, makedirs
from datetime import datetime

today = datetime.now
new_run = r"H:\model\{}" .format(today().strftime('%d%m%Y'))
makedirs(new_run+"\input")
makedirs(new_run+"\output")
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题