Question

我使用以下样式规则：

＆＃xA;＆＃xA;

 ＆lt; style type =“text / css”＆gt;＆＃xA; ul {＆＃xA ;填充：0;＆＃xA; list-style：none;＆＃xA;背景：＃f2f2f2;＆＃xA; font-family：arial;＆＃xA;}＆＃xA; ul li {＆＃xA; display：inline-block;＆＃xA;位置：相对;＆＃xA; line-height：15px;＆＃xA; text-align：left;＆＃xA; font-family：arial;＆＃xA;}＆＃xA; ul li a {＆＃xA; display：block;＆＃xA;填充：8px 25px;＆＃xA;颜色：＃333;＆＃xA; text-decoration：none;＆＃xA; font-family：arial;＆＃xA;}＆＃xA; ul li a：hover {＆＃xA;颜色：#fff;＆＃xA;背景：＃939393;＆＃xA; font-family：arial;＆＃xA;}＆＃xA; ul li ul.dropdown {＆＃xA;最小宽度：125px; / *设置下拉列表的宽度* /＆＃xA;背景：＃f2f2f2;＆＃xA; display：none;＆＃xA; position：absolute;＆＃xA; z-index：999;＆＃xA;左：0;＆＃xA; font-family：arial;＆＃xA;}＆＃xA; ul li：hover ul.dropdown {＆＃xA;显示：块; / *显示下拉列表* /＆＃xA;}＆＃xA; ul li ul.dropdown li {＆＃xA; display：block;＆＃xA;}＆lt; / style＆gt;＆＃xA;

＆＃xA;＆＃xA;

＆＃xA;＆＃xA; < p>这是我希望将我的样式应用到的唯一区域：

＆＃xA;＆＃xA;

 ＆lt; ul＆gt;＆＃xA; ＆lt; li＆gt;＆lt; a href =“＃”＆gt;主页＆lt; / a＆gt;＆lt; / li＆gt;＆＃xA; ＆lt; li＆gt;＆lt; a href =“＃”＆gt;关于＆lt; / a＆gt;＆lt; / li＆gt;＆＃xA; ＆LT;李＆GT;＆＃XA; ＆lt; a href =“＃”＆gt;产品＆amp;＃9662;＆lt; / a＆gt;＆＃xA; ＆lt; ul class =“dropdown”＆gt;＆＃xA; ＆lt; li＆gt;＆lt; a href =“＃”＆gt;笔记本电脑＆lt; / a＆gt;＆lt; / li＆gt;＆＃xA; ＆lt; li＆gt;＆lt; a href =“＃”＆gt; Monitors＆lt; / a＆gt;＆lt; / li＆gt;＆＃xA; ＆lt; li＆gt;＆lt; a href =“＃”＆gt;打印机＆lt; / a＆gt;＆lt; / li＆gt;＆＃xA; ＆LT; / UL＆GT;＆＃XA; ＆LT; /立GT;＆＃XA; ＆lt; li＆gt;＆lt; a href =“＃”＆gt;联系＆lt; / a＆gt;＆lt; / li＆gt;＆＃xA;＆lt; / ul＆gt;＆＃xA;

＆＃xA;＆ #xA;

样式标记正在应用于我的页面上的所有部分，其中包含＆lt; ul＆gt; 或＆lt; li＆gt; 但我只希望它是适用于上面的代码。我怎么能限制它？

＆＃xA;

Answer 1

唯一标识目标元素：

<ul id="targetElement">
    ...
</ul>

然后在CSS规则中使用该标识符：

ul#targetElement{
    ...
}
ul#targetElement li{
    ...
}
...

任何CSS都将应用于整个文档。您可以调整CSS选择器以定位文档的更多特定部分。

Answer 2

您可以在要应用的内容上使用类，以便它不会影响常规ul和li元素的显示。

Answer 3

您可以使用HTML ID或类来应用样式。我通常会推荐在css中使用id的课程。

请参阅以下示例：

<style type="text/css">
ul.styled-list{
    padding: 0;
    list-style: none;
    background: #f2f2f2;
    font-family: arial;
}
ul.styled-list li{
    display: inline-block;
    position: relative;
    line-height: 15px;
    text-align: left;
    font-family: arial;
}
ul.styled-list li a{
    display: block;
    padding: 8px 25px;
    color: #333;
    text-decoration: none;
    font-family: arial;
}
ul.styled-list li a:hover{
    color: #fff;
    background: #939393;
    font-family: arial;
}
ul.styled-list li ul.dropdown{
    min-width: 125px; /* Set width of the dropdown */
    background: #f2f2f2;
    display: none;
    position: absolute;
    z-index: 999;
    left: 0;
    font-family: arial;
}
ul.styled-list li:hover ul.dropdown{
    display: block; /* Display the dropdown */
}
ul.styled-list li ul.dropdown li{
    display: block;
}</style>


<ul class="styled-list">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li>
        <a href="#">Products &#9662;</a>
        <ul class="dropdown">
            <li><a href="#">Laptops</a></li>
            <li><a href="#">Monitors</a></li>
            <li><a href="#">Printers</a></li>
        </ul>
    </li>
    <li><a href="#">Contact</a></li>
</ul>

<强>更新

对于只能应用于页面上单个元素的CSS规则，使用html id属性是有意义的。但是，由于此标记似乎是一个可在页面上多次使用的下拉菜单，因此使用类名作为CSS选择器可以促进更好的代码重用。

如何限制应用<style type =“text / css”>标记的位置

3 个答案: