Html 如何自定义Div元素

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

CSS:

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>

问题在于您使用了太多的重要信息，它们覆盖了规则，在正常情况下会生效，因为它们更具体。要想得到你想要的东西，最快捷、最肮脏的方法是：

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

---

问题是您使用了太多的重要元素，它们是覆盖规则，在正常情况下会生效，因为它们更具体。要想得到你想要的东西，最快捷、最肮脏的方法是：

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

正如我在您的代码中看到的那样#customhomelink有父项#wctopdropnav 另外，正如我所看到的，您有一个关于家长的规则：

#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进行更改，只需将此规则添加到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
}

另外，为了将来，尽量避免！重要的东西，以便有更好的css代码。

正如我在您的代码中看到的那样35; customhomelink有父项#wctopdropnav 另外，正如我所看到的，您有一个关于家长的规则：

#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进行更改，只需将此规则添加到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
}

---

另外，为了将来，尽量避免！重要的东西，以便有更好的css代码。

这应该可以为您做到

---

这应该可以帮你

---

1.您应该使用样式表，而不是将CSS嵌入HTML页面（以便浏览器可以缓存CSS）2。您不需要5行相同的CSS代码，例如背景：#F8；背景：#f8f8；3.在你的href上，只要所有内容都在同一个站点上，你就可以从所有URL中删除（减少HTML大小）1。您应该使用样式表，而不是将CSS嵌入HTML页面（以便浏览器可以缓存CSS）2。您不需要5行相同的CSS代码，例如背景：#F8；背景：#f8f8；3.在你的href上，只要所有内容都在同一个站点上，你就可以从所有URL中删除（减少HTML大小）