CSS导航栏(令人困惑)

时间:2016-04-16 23:45:58

标签: css

不完全确定此css文件中的每个元素的作用。具体来说,">"角色充当,以及" moz" " OS"和" o"代表。什么列出"#cssmenu,#cssmenu ul,#cssmenu ul li"一开始呢?任何帮助表示赞赏。

/* code for the navigation bar */
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu {
  width: auto;
  border-top: 3px solid black;
  border-bottom: 3px solid black;
  font-size: 200%
  font-family: Raleway, sans-serif;
  line-height: 1;
}
#cssmenu ul {
  background: #black;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu.align-right > ul > li > a {
  margin-right: 0;
  margin-left: -4px;
}
#cssmenu > ul > li > a { /*style the main links*/
  z-index: 2;
  padding: 18px 25px 12px 25px;
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
  color: #444444;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  margin-right: -4px;
}
#cssmenu > ul > li.active > a,
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {
}
#cssmenu > ul > li > a:after {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  width: 100%;
  height: 120%;
  border-top-left-radius: 8px;/* rounded left corner */
  border-top-right-radius: 8px;/* rounded right corner */
  content: "";
  -webkit-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  -webkit-transform: perspective(5px) rotateX(2deg);
  -webkit-transform-origin: bottom;
  -moz-transform: perspective(5px) rotateX(2deg);
  -moz-transform-origin: bottom;
  transform: perspective(5px) rotateX(2deg);
  transform-origin: bottom;
}
#cssmenu > ul > li.active > a:after,
#cssmenu > ul > li:hover > a:after,
#cssmenu > ul > li > a:hover:after {
  background: grey;
}

1 个答案:

答案 0 :(得分:2)

  

“>”是什么字符作为

直系后代

  

“moz”“os”和“o”代表什么

浏览器,操作系统

  

在“#cssmenu,#cssmenu ul,#cssmenu ul li”中列出了什么   开始做的确切

#是ID选择器,例如<div id="cssmenu">