仅HTML一部分的CSS
[英]CSS for only 1 part of HTML
问题描述
How do get CSS to only affect the first list (menu items) only, and not the second list? 
如何使CSS仅影响第一个列表（菜单项），而不影响第二个列表？ Please help. 请帮忙。 I've been at this all day. 我整天都在这。 If you could, copy/paste the complete code back in your response. 如果可以，请将完整的代码复制/粘贴回您的响应中。 VERY appreciated! 非常感激！
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="content- type">
<title></title>
<style type="text/css">
ul {list-style: none;padding: 0px;margin: 0px;}
ul li {display: block;position: relative;float: left;border:1px solid #000}
li ul {display: none;}
ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
white-space: nowrap;color: #fff;}
ul li a:hover {background: #f00;}
li:hover ul {display: block; position: absolute;}
li:hover li {float: none;}
li:hover a {background: #f00;}
li:hover li a:hover {background: #000;}
#drop-nav li ul li {border-top: 0px;}
</style></head>
<body>
<ul id="drop-nav">
<li><a href="#">Support</a></li>
<li><a href="#">Web Design</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</li>
<li><a href="#">Content Management</a>
<ul>
<li><a href="#">Joomla</a></li>
<li><a href="#">Drupal</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">Concrete 5</a></li>
</ul>
</li>
<li><a href="#">Contact</a>
<ul>
<li><a href="#">General Inquiries</a></li>
<li><a href="#">Ask me a Question</a></li>
</ul>
</li>
</ul>
<br>
<br>
<br>
<ol>
<li style="list-style-type: disc;"><a href="www.google.com">link1</a></li>
<li style="list-style-type: disc;"><a href="www.yahoo.com">link2</a></li>
</ol>
</body>
</html>
6 个解决方案
解决方案1
2 2016-05-02 19:42:29
I've only changed two pieces of your code. 我只更改了两段代码。 You will see where I reference the class .menu in your CSS and where i'm using the class="menu" on your drop-nav list. 您将看到我在CSS中引用类.menu ，以及在drop-nav列表中使用class="menu" 。
<!DOCTYPE html> <html> <head> <meta content="text/html; charset=windows-1252" http-equiv="content- type"> <title></title> <style type="text/css"> ul {list-style: none;padding: 0px;margin: 0px;} ul li {display: block;position: relative;float: left;border:1px solid #000} li ul {display: none;} ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none; white-space: nowrap;color: #fff;} ul li a:hover {background: #f00;} li:hover ul {display: block; position: absolute;} li:hover li {float: none;} .menu li:hover a {background: #f00;} li:hover li a:hover {background: #000;} #drop-nav li ul li {border-top: 0px;} </style> </head> <body> <ul id="drop-nav" class="menu"> <li><a href="#">Support</a></li> <li><a href="#">Web Design</a> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> </ul> </li> <li><a href="#">Content Management</a> <ul> <li><a href="#">Joomla</a></li> <li><a href="#">Drupal</a></li> <li><a href="#">WordPress</a></li> <li><a href="#">Concrete 5</a></li> </ul> </li> <li><a href="#">Contact</a> <ul> <li><a href="#">General Inquiries</a></li> <li><a href="#">Ask me a Question</a></li> </ul> </li> </ul> <br> <br> <br> <ol> <li style="list-style-type: disc;"><a href="www.google.com">link1</a></li> <li style="list-style-type: disc;"><a href="www.yahoo.com">link2</a></li> </ol> </body> </html>
解决方案2
0 2016-05-02 19:22:45
The CSS is designed to change the link to red when you hover over it.
You have this 你有这个
li:hover a {background: #f00;}
Change that to 更改为
ul li:hover a {background: #f00;}
This will differentiate it from the ol links 这会将其与ol链接区分开
解决方案3
0 2016-05-02 19:26:37
You can give html elements ids or classes, ids are for unique elements and classes are for more common elements. 您可以给html元素ID或类，ID是唯一元素，而类是更常见的元素。
In the Css you can give a class a set styling. 在CSS中，您可以为课程设置样式。 For you problem follow the ideas I present below: 对于您的问题，请遵循以下建议：
First line html elements give a class 第一行html元素给出一个类
<ul href='#' class="headingItem></ul>
To style those elements with that class (Css): 要使用该类（Css）为这些元素设置样式：
.headingItem{
Colour:blue
}
解决方案4
0 2016-05-02 19:26:51
Try using a CSS class. 尝试使用CSS类。 You can target only the ` elements with that class: 您只能针对该类的`元素：
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="content- type">
<title></title>
<style type="text/css">
ul.menu {list-style: none;padding: 0px;margin: 0px;}
ul.menu li {display: block;position: relative;float: left;border:1px solid #000}
li ul {display: none;}
ul.menu li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
white-space: nowrap;color: #fff;}
ul.menu li a:hover {background: #f00;}
li:hover ul {display: block; position: absolute;}
li:hover li {float: none;}
li:hover a {background: #f00;}
li:hover li a:hover {background: #000;}
#drop-nav li ul li {border-top: 0px;}
</style></head>
<body>
<ul id="drop-nav">
<li class="menu"><a href="#">Support</a></li>
<li class="menu"><a href="#">Web Design</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</li>
<li class="menu"><a href="#">Content Management</a>
<ul>
<li><a href="#">Joomla</a></li>
<li><a href="#">Drupal</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">Concrete 5</a></li>
</ul>
</li>
<li class="menu"><a href="#">Contact</a>
<ul>
<li><a href="#">General Inquiries</a></li>
<li><a href="#">Ask me a Question</a></li>
</ul>
</li>
</ul>
<br>
<br>
<br>
<ol>
<li style="list-style-type: disc;"><a href="www.google.com">link1</a></li>
<li style="list-style-type: disc;"><a href="www.yahoo.com">link2</a></li>
</ol>
</body>
</html>
解决方案5
0 2016-05-02 19:39:06
Change li:hover a {background: #f00;} to ul > li:hover a {background: #f00;} . 将li:hover a {background: #f00;}更改为ul > li:hover a {background: #f00;} 。 > means Child , or sub item . >意味着Child ，或sub item 。 This will make only your navigation links (or other links in an ul > li tag) be red when hovered. 悬停时，这只会使您的导航链接（或ul > li标签中的其他链接）变为红色。 Or try this: #drop-nav > ul > li:hover a {background: #f00;} for only your navigator. 或尝试以下操作： #drop-nav > ul > li:hover a {background: #f00;}仅对您的导航器#drop-nav > ul > li:hover a {background: #f00;} 。
Hope it helps. 希望能帮助到你。
解决方案6
0 2016-05-02 20:02:46
You should name your first ul with class or id and then use this form of CSS selecor ul.class > li. 您应该使用类或id命名您的第一个ul，然后使用这种形式的CSS selecor ul.class> li。 This is the only way to get to the first level of children. 这是达到儿童高水平的唯一途径。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body {
font-family: Arial;
font-size: 14px;
}
ul {
list-style-type: none;
padding: 0;
}
ul.menu > li {
background-color: red;
float: left;
position: relative;
width: 100px;
margin-right: 5px;
padding: 5px;
}
ul.menu > li ul {
position: absolute;
top: 26px;
left: 0px;
display: none;
}
ul.menu > li:hover ul {
display: block;
}
ul.menu > li ul li {
width: 100px;
padding: 5px;
background-color: green;
}
</style>
</head>
<body>
<ul class="menu">
<li>First
<ul>
<li>Sub-First</li>
<li>Sub-Second</li>
<li>Sub-Third</li>
</ul>
</li>
<li>Second</li>
<li>Third
<ul>
<li>Sub-First</li>
<li>Sub-Second</li>
<li>Sub-Third</li>
</ul>
</li>
</ul>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.