如何自定义 Div 元素

Question

我想更改#customhomelink 的字体大小和字体系列，但无论出于何种原因，如果我更改#customhomelink 文本，那么div #wctopdropnav 下的文本也会受到影响.我只想更改#customhomelink 的大小和系列。我博客的 URL 如下：http://www.blankesque.com 我已经包含了下面悬停导航栏的所有 html 和 css 编码。

CSS:

#wctopdropcont{ /* width of the main bar categories */
    width:100%;
    height:45px;
    display:block;
    padding: 5.5px 0 0 0;
    z-index:100;
    top:0px;
    left: 0px;
    position:fixed;
    background:#f8f8f8;
}

#wctopdropnav{ /* social */
    float: right;
    width:97%;
    height:7px;
    display:block;
    padding:0px;
}

#wctopdropnav ul{
    float:right;
    margin:0;
    padding:0;
}

#wctopdropnav li{
    float:left;
    list-style:none;
    line-height:13px;
    margin-left: 4px;
    padding: 10px 6.5px 6.5px 6.5px;/* height of the clicked bar */
    background:#f8f8f8;
}

#wctopdropnav li a, #wctopdropnav li a:link{
    color:#000000;
    float: right;
    display:block;
    margin-left: 4px;
    text-transform: uppercase;
    font-size: 9.5px!important;
    font-family: karla, arial!important;
    padding: 5px;
    text-decoration:none;
    font-weight: normal!important;
    letter-spacing : 0.09em;
}

#wctopdropnav li a:hover, #wctopdropnav li a:active,    #wctopdropnav .current_page_item a  {
    color:black;
    font-weight: normal;
    padding: 5px;
    background: #f8f8f8;
    filter:black;  
}
#wctopdropnav li li a, #wctopdropnav li li a:link, #wctopdropnav li li a:visited{
    font-size: 9.5px;
    background:#f8f8f8;
    color: #000000;
    width: 90px;
    margin: 0px;
    padding: 0;
    line-height: 15px;
    position: relative;
}

#wctopdropnav li li a:hover, #wctopdropnav li li a:active {
    color: black;
    background: #f8f8f8;
    filter: #f8f8f8;
}

#wctopdropnav li ul{
    z-index:9999;
    position:absolute;
    left:-999em;
    height:auto;
    width:170px;
    margin:22px 0 0 0;
    padding: 8px 0 0 0;
}

#wctopdropnav li:hover ul, #wctopdropnav li li:hover ul, #wctopdropnav li li li:hover ul, #wctopdropnav li.sfhover ul, #topwctopdropnav li li.sfhover ul, #topwctopdropnav li li li.sfhover ul{
    left:auto
}

#wctopdropnav li:hover, #wctopdropnav li.sfhover{
    position:static
}  
#customhomelink {
    font-size: 11px!important;
    font-family: 'snickles', arial;
    letter-spacing: 0.09em;
    font-weight: bold!important;
    color: #000000;
    text-transform: uppercase;
    text-decoration: none!important;
    float: left;
}

HTML代码：

<div id='wctopdropcont'>
    <div id='wctopdropnav'>
    <ul>
        <li><a href='/about/'>About</a></li>
        <li><a href='#'>Categories</a>
            <ul>
                <li><a href='/Beauty'>Beauty</a></li>
                <li><a href='/Blogging'>Blogging</a></li>
                <li><a href='/Fashion'>Fashion</a></li>
                <li><a href='/Fragrance'>Fragrance</a></li>
                <li><a href='/label/Haul'>Haul</a></li>
                <li><a href='/Lifestyle'>Lifestyle</a></li>
                <li><a href='/Skin &amp; Hair'>Skin &amp; Hair</a></li>
            </ul>
        </li>
        <li><a href='/contact/'>Contact</a></li>
        <li><a href='/policy/'>Policies</a></li>
    </ul>
        <div id='customhomelink'>
        <ul>
            <li><a href='http://www.blankesque.com'>Blankesque</a></li>
        </ul>
        </div>
    </div>
</div>

Answer 1

问题是您使用了太多重要事项，并且它们覆盖了在正常情况下会生效的规则，因为它们更具体。获得你想要的东西的快速而肮脏的方法是使用：

#customhomelink > ul > li > a:link
{
   font-family: 'snickles', arial !important;
   font-size: 11px !important;
}

Answer 2

正如我在你的代码中看到的那样#customhomelink 有 parent #wctopdropnav 另外，正如我所见，您有 parent:

的规则

#wctopdropnav li a, #wctopdropnav li a:link {
    color: #000000;
    float: right;
    display: block;
    margin-left: 4px;
    text-transform: uppercase;
    font-size: 9.5px !important;
    font-family: karla, arial!important;
    padding: 5px;
    text-decoration: none;
    font-weight: normal!important;
    letter-spacing: 0.09em;
}

但不适用于 child。因此，为了对 child 进行更改，只需将此规则添加到您的 css

#wctopdropnav #customhomelink li a,
#wctopdropnav #customhomelink li a:link {
  font-size: 12px !important // put your size instead
  font-family: karla, arial!important; //your font-family here
}

此外，为了将来，尽量避免使用 !important 内容以获得更好的 css 代码。

Answer 3

这应该可以为您完成 http://jsfiddle.net/mm6ck3dc/18/

#customhomelink > ul > li > a{
      color: blue;
      font-size: 11px!important;
      font-family: 'snickles', arial;
      letter-spacing: 0.09em;
      font-weight: bold!important;
      text-transform: uppercase;
      text-decoration: none!important;
}

#customhomelink  {
  float: left;
}

如何自定义 Div 元素

How To Customise A Div Element

html

css

blogger