如何防止样式传播到下一个LI元素？
要防止样式传播到下一个LI元素，可以使用以下方法：
- 使用伪类选择器：可以通过给当前LI元素添加伪类选择器，例如
:after或:before，并设置其样式为clear:both，以防止样式传播到下一个LI元素。 - 使用清除浮动：如果样式传播是由于浮动元素引起的，可以在每个LI元素的末尾添加一个空的div元素，并设置其样式为
clear:both，以清除浮动，防止样式传播。 - 使用flex布局：将LI元素的父容器设置为flex布局，并使用
flex-wrap: wrap属性，可以确保每个LI元素都在单独的行上，从而避免样式传播。 - 使用inline-block布局：将LI元素的display属性设置为
inline-block，可以使每个LI元素都在单独的行上，从而防止样式传播。 - 使用CSS选择器：可以使用CSS选择器来选择特定的LI元素，例如给每个LI元素添加一个特定的class或id，并在样式表中使用该选择器来设置样式，以避免样式传播。
总结起来，以上方法都是通过设置特定的样式或使用特定的布局方式来防止样式传播到下一个LI元素。具体选择哪种方法取决于具体的需求和情况。
相关·内容
1回答
我的引导菜单如下(这是许多菜单项中一个菜单项的代码片段)：
<!-- Code for Navigable menu (mobile) -->
<nav class="navbar navbar-default" role="navigation">
<div class="container commonWidth">
<button type="button" style="width: 100%" class="navbar-toggle&#
浏览 5提问于2014-10-29得票数 1
回答已采纳
2回答
我想通过单击父列表项来切换单个子项的可见性。
我有一个这样的文件树：
<div id="browser">
<ul><li class='folder'>Musik
<ul><li class='folder'>Alben
<ul><li class='folder'>100JahreEAV
<ul>
<li class='file'>
浏览 2提问于2012-11-13得票数 1
回答已采纳
我正在从一个json文件中生成一个嵌套列表，我将该json文件转换为一个数组树。在这里，我想使用数组树创建一个下拉列表，其中onSidebarComponent根据该树显示数据。我使用数组映射并将数据推入数组并显示它们。
但是每当我点击第一个索引数据时，它就会触发一个单击事件。每当我单击叶子节点数据时，它就会触发3次事件。另一方面，我不知道如何动态显示和隐藏单个列表数据。为了更好的理解，我给出了我的代码和一些截图。
以下是代码：
import React, { Component } from 'react';
import './App.css';
imp
浏览 0提问于2018-06-12得票数 3
回答已采纳
1回答
我有一个简单的清单：
<li onClick={handleRowClick}>
<input type="checkbox" onClick={handleCheckboxClick} />
...
</li>
当我在li上的任何地方单击(除了它的复选框子)时，handleRowClick就会执行。
当我单击checkbox时，总是按照以下顺序执行：
row
row
checkbox
这是我尝试过的
在每个复选框上使用：复选框，li，以及在每个复选框上都调用e.stopPropagation()的e.stopPropagation()：
浏览 4提问于2021-04-30得票数 3
我的jQuery代码托管在这里，非常想知道为什么它会产生永不结束的循环。
HTML
<ul id='user_menu'>
<li>
<a class='shopping_cart'>click this</a>
</li>
</ul>
jQuery
$('#user_menu > li').click(function() { $(this).children('a:first').click(); } );
$('.shopp
浏览 2提问于2015-03-09得票数 1
回答已采纳
3回答
我试图绑定UL上的处理程序，以检测何时在LI内单击div，然后触发LI中的超链接单击事件。
注意:我只希望单击.col2来触发事件。
我得到了太多的递归错误，因为超链接的单击事件触发了UL上的单击事件。
我试过stopPropagation，但它似乎不起作用，有什么想法吗？
$('#ul_search').on('click', 'div.col2', MyClickHandler);
function MyClickHandler(e) {
e.stopPropagation();
var control = $(this)
浏览 4提问于2013-09-09得票数 0
回答已采纳
我的结构是这样的
<div id="categoryTree">
<ul>
<li id="cat_15"> <a class="hasSubCat" href="javascript:void(0);"><img src="images/icons/folder.gif" border="0" alt="Folder" title=" Folder ">North India<
浏览 3提问于2015-05-13得票数 1
回答已采纳
6回答
日安！请帮助，如果在嵌套元素中触发单击事件，则使用嵌套的函数，则调用函数和外部父级。如何为内部举办一次活动？
<ul>
<li><a href="#">Item</a></li>
<li><a href="#">Item 2</a>
<ul>
<li><a href="#">Subitem 1</a></li>
浏览 4提问于2013-04-08得票数 0
1回答
下面的代码显示有两个嵌套列表。外边有文字装饰:直通式属性，另一种无直通式.我怎么才能移除这条内线--首先还是不应用它？！！我要“外”一词的直通式，而不是“内”字。
<DOCTYPE html>
<header><style>
ol li {text-decoration:line-through; color:red;}
ol li ul li{text-decoration:none; color:pink;}
</style></header>
<body>
<ol>
&l
浏览 0提问于2013-10-22得票数 3
回答已采纳
我一直在使用示例为我的对象构建树。如您所见，它基于构建树的嵌套ul模型：
<ul class="tree">
<li>
Animals
<ul>
<li>Birds</li>
<li>
Mammals
<ul>
<li>Elephant</li>
浏览 3提问于2016-05-06得票数 0
回答已采纳
1回答
这是一个简单的问题。我正在使用引导v3.2.0在导航条下拉菜单上创建一个复选框列表。
我只是在想，在点击每个复选框后，是否有一种方法不将复选框断开。
我提供了小提琴：
<div class="input-group">
<div class="input-group-btn">
<button tabindex="-1" class="btn btn-default&
浏览 0提问于2014-10-10得票数 7
回答已采纳
2回答
我有以下html。我的click事件被附加到id "Treedrop“的父跨度上，但是每当我展开、折叠或选择节点时，它都是在展开或折叠树后调用'treedrop‘单击事件，我尝试执行event.stopPropagation()。但这不起作用。即使我单击“搜索”文本框，它也在调用“treedrop”单击事件函数。
HTML:
<div class="1row">
<div id="treedrop" class="select2 select2-container select2-container--default s
浏览 3提问于2017-09-04得票数 0
我用的是来自tinymce的列表插件。
我已经创建了一个函数，它将向列表中的一个li元素添加一个类。如果我将类添加到列表中的最后一个元素中，编辑器在按enter时添加的每个新li元素都将具有相同的类。
我尝试过研究内容过滤，但在那里，我似乎只能阻止任何li元素都有一个类。
如何使tinymce在没有类的情况下添加新的li元素？
现在发生了什么：
<ul>
<li>asd</li>
<li>asd</li>
<li class="optional">asd</li> (upda
浏览 2提问于2021-09-14得票数 0
回答已采纳
1回答
如何单独针对list元素，例如，我要做的是：
Html：
<ul class="roundabout-holder">
<li class="roundabout-moveable-item"></li>
<li class="roundabout-moveable-item"></li>
<li class="roundabout-moveable-item roundabout-in-focus"></li>
&
浏览 0提问于2014-09-26得票数 1
回答已采纳
2回答
我有一个菜单，当我点击到页面的/#0来指示它已经打开时，我想知道的是如何阻止它显示，或者找到另一种打开菜单的方法。下面是菜单触发器html：
<header class="cd-header">
<a href="#0" class="cd-3d-nav-trigger">
Menu
<span></span>
</a>
</header>
我的完整javascript文件可以在这里找到
jQuery(document).
浏览 6提问于2016-09-13得票数 0
回答已采纳
4回答
我里面有简单的div和复选框。这两个元素都绑定了onClick事件。首先在内部元素so复选框上触发，然后在div上触发。我的问题是:在第一次事件上升到下一次单击之前，是否有可能停止DOM上的任何其他事件？换句话说，我可以在复选框onClick中停止触发div事件吗？
<div onclick="divOnClic(this);" style="width: 200px; height: 200px ; background-color: red">
<input type="checkbox" onclick="
浏览 6提问于2014-02-22得票数 0
回答已采纳
1回答
我试图用下拉信息选项卡制作一个表格，当你滚动一个术语时，这些选项卡就会出现。我最初的方法是使这些信息选项卡不使用display : none css规则显示，然后当用户将鼠标悬停在相应的文本上时，信息选项卡将显示为display: block属性。
我的问题是，我无法理解如何覆盖包含/父元素的默认行为，而表调整大小以适应新出现的元素，然后在用户滚动时调整大小以恢复正常。我试验了z索引(将td设置为z索引:1，info选项卡设置为z索引:2)以及visibility:hidden -> visibility:visible vs display:none -> display:blo
浏览 2提问于2020-12-18得票数 0
回答已采纳
1回答
我用JS构建了这个简单的滑块，但是我对编程不是很有经验，我想知道在这段代码中可以改进什么，如何干燥它，或者如何将一些OOP范式应用到它，其中有什么不好的地方，什么是糟糕的实践……如果你要构建这个简单的滑块，你会如何接近它？
JSFIDDLE
<div class="container">
<button id="prev">Prev</button>
<!-- -->
<button id="next">Next</button>
<d
浏览 0提问于2015-04-09得票数 2
回答已采纳
4回答
继承父文本装饰
、、
这很简单，但我刚刚想到；而且，我不敢相信我对文本装饰继承无能为力。
我明白，如果有一个<div>，里面的所有东西都必须加下划线。但是对于具有单独类或id的嵌套<div>，即使选择了(none)也要继承？！？我才不信呢。这也发生在文本样式上，但不是颜色。
#hello {
font-weight: bold;
}
#me {
text-decoration: underline;
color: #cc33cc;
}
.home {
text-decoration: none !important;
color: black;
}
<p id=
浏览 0提问于2015-05-22得票数 0
给定以下标记：
<ul>
<li>apple</li>
<li class="highlight">orange</li>
<li>pear</li>
</ul>
ul和li的宽度都显示为100%。如果我对列表项应用background-color，突出显示会拉伸整个页面的宽度。
我只想背景高亮伸展作为最宽的项目(可能有一些填充)。如何将li%s(或者ul%s)宽度约束为最宽项的宽度？
浏览 3提问于2008-10-31得票数 16
回答已采纳
我在使用slideToggle()时确实遇到了问题。下面的DOM元素不会被向下推，它们只是重叠。我试过很多版本。我使用jquery创建标记，从jquery中填充标记内容，因此我遍历JSON为每个元素创建HTML标记：
var project_infos = '';
jQuery(document).ready(function(){
$.getJSON('project.json', function(data){
project_infos += '<div class=\"row\">'
浏览 3提问于2015-10-23得票数 0
回答已采纳
1回答
我有两个问题。第一个是，当用户点击一个链接(比如关于我们)时，整个菜单就会关闭。这是一个糟糕的用户体验。我希望它保持打开状态，因为它已经打开了。 第二个问题是，一旦打开，用户就不能关闭活动的主菜单(比如Terms，Private或Sub Main)。我们如何解决这两个问题？ JSFiddle演示：https://jsfiddle.net/edvh0nsk/ HTML： <div class="container">
<div class="row">
<div class="col">
浏览 32提问于2019-05-17得票数 0
回答已采纳
7回答
有时候我发誓我快要疯了。今天就是这样的一天。我认为我的CSS在这里是相当直接的，但它似乎就是不起作用。我遗漏了什么？
我的CSS看起来像这样：
ul > li {
text-decoration: none;
}
ul > li.u {
text-decoration: underline;
}
ul > li > ul > li {
text-decoration: none;
}
ul > li > ul > li.u {
text-decoration: underline;
}
我的HTML看起来像这样：
浏览 4提问于2009-12-01得票数 36
回答已采纳
1回答
我用的是的小麻烦但主要的问题
当我点击链接一个不打开的href，这些代码似乎正确吗？
所以我要插入所有的css，js -这些可能会触发这个不可打开的链接。但在我看来，只使用href应该工作得很好，对吧？
我不确定这只发生在我身上，还是其他人身上？
[].slice.call(document.querySelectorAll('.dropdown .nav-link')).forEach(function(el){
el.addEventListener('click', onClick, false);
});
function onClick(
浏览 2提问于2020-06-20得票数 2
回答已采纳
1回答
我将这段代码应用于有序列表中，以使十进制编号为粗体。
ol {
list-style: none;
counter-reset: counter1;
}
ol li {
counter-increment: counter1;
}
ol li::marker {
content: counter(counter1) ". ";
font-weight: bold;
}
问题是，它也会自动应用于后续的列表，该列表应该具有不同的列表样式。
ol ul li {
list-style: lower-latin;
}
问题是，是否有任何方法只将粗体样式应用于
浏览 5提问于2022-01-12得票数 0
我可以让我的下拉导航保持在顶部使用绝对定位，但它挤压左边和顶部的一切都在导航后面。
如何使我的导航停止将所有其他内容与position:absolute属性重叠？我的导航元素在我的CSS中，所以看不见的<div>不能工作。
以下是我的header.php文档中的HTML：
<center><nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/arcade">Arc
浏览 0提问于2013-10-01得票数 1
我有一个数组，它有4个子数组，我正在尝试从每个数组中检索数据，并延迟一个scond，以及从数组中检索每个元素的时间延迟1秒。
我做了一个函数，它可以工作，但数据的顺序不正确，任何人纠正这个函数，以获得适当的有序数据，每个延迟1秒。
我也知道我的功能更大一些。任何给我实现同样结果的捷径。
功能：
var ar = [
[
Object= { el:'li', x:0, y:294},
Object= { el:'li', x:150, y:294},
Object= { el:'li'
浏览 4提问于2012-11-19得票数 0
回答已采纳
4回答
我一直在尝试学习html中的水平列表。我有以下代码，
CSS：
#list li
{
text-decoration:none;
display: inline;
list-style-type: none;
padding-right: 20px;
}
</style>
HTML：
<div >
<ul id="list">
<li>Store </li>
<li>Mac </li>
<li>IPod </l
浏览 3提问于2012-01-17得票数 0
回答已采纳
我有一个嵌套在一层的click事件。当我单击子对象时，预期的函数会被调用，但父对象的函数也会被调用。以下是代码
<li class="task-item" *ngFor="let task of tasks" (click)="showTask(task.name)">
<input type="checkbox" [ngModel]="task.taskStatus" (ngModelChange)="changeTaskStatus($event)" />
<
浏览 4提问于2016-12-29得票数 49
回答已采纳
我试图阻止WordPress中菜单项的默认单击操作。我可以将类添加到菜单项中，但类位于-li元素上。
<li class="noclick"><a href="http://google.com">Google</a></li>
我的第一次尝试是：
<script type='text/javascript'>
$('.noclick').click(function(e) {
e.preventDefault();
});
</sc
浏览 5提问于2013-12-04得票数 0
回答已采纳
伙计们，我在点击事件上遇到了问题。我所做的是有一些ul和一些li's，而且这个ul是嵌套列表。我将单击事件绑定到可以正常工作的列表项，但为什么相同的单击事件处理嵌套列表项。如何取消那个活动。
$('.item').on('click',function(e){
alert('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul&g
浏览 0提问于2018-03-17得票数 1
回答已采纳
4回答
CSS菜单上的额外间距
、、、
我的CSS菜单有个奇怪的问题。链接上方有一个巨大的空间。
我尝试了从css中删除所有的页边距和填充设置，但仍然什么都没有。我唯一能去掉额外间距的方法是删除所有的李。
有人能看出我做错了什么吗？
<div id="test_nav">
<div id="test_subnav">
<ul id="test_ul">
<li><a href="#" target="">Test 1</a></
浏览 7提问于2014-02-27得票数 0
回答已采纳
这些天我在学习CSS ..
我正在使用嵌套的Ul li，你能告诉我如何针对每个li实现相同的背景图像吗？代码如下：
<ul class="display_BG_Blue_arw">
<li>Coffee</li>
<li>Tea
<ul class="display_BG_Red_arw">
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
浏览 3提问于2012-10-04得票数 0
1回答
我正在尝试编写一个类似Facebook的“邀请朋友”选项的代码。我喜欢它，因为它使用默认的复选框，而不是模拟每个项目的选择的背景。
问题是，如果需要(文本太大)，我不知道他们是如何将文本(朋友的名字)分成两行的！
我有一个简单的例子来说明我想要实现的目标。下面是HTML：
<div class="modal">
<div class="modal-body">
<ul class="unstyled">
<li class="store_selectable">
浏览 1提问于2012-05-19得票数 0
我有与选择框和输入字段和固定导航栏图标(页脚菜单)的长页面。当用户点击导航栏项目并且选择框在导航栏下时，选择框会展开并在点击时做出反应-导航栏不会做出反应。每一个答案都将非常感谢。
代码示例：
<div data-role="content">
<form id="profileForm">
<label for="sex">Pohlavie:</label>
<select name="sex" id="sex"
浏览 2提问于2013-02-08得票数 0
当我双击/treble/etc单击.next按钮时，脚本正在运行，我需要它在彼此之后排队？如何才能在重新启动之前完成该功能？
HTML
<ul id="one" class="first selected">
<li class="pic_one"></li>
<li class="pic_two"></li>
<li class="pic_three"></li>
&
浏览 1提问于2012-11-03得票数 4
回答已采纳
我创建了一个DIV，它的右上角必须有两个链接(菜单和选项)：
<div class="Clear">
<ul class="Clear">
<li><a>Menu</a></li>
<li><a>Options</a></li>
</ul>
<h2>Header</h2>
<p>Text</p>
</div>
为了将u
浏览 2提问于2013-06-06得票数 0
回答已采纳
3回答
我正在尝试让jquery幻灯片菜单工作，但我现在没有想法了。如何在点击子菜单项时停止菜单折叠？
这是我到目前为止得到的- js- part，导航代码，最后是相关的css部分：
<script type="text/javascript">
$(document).ready(function() {
$('ul .sub').hide();
$("li:has(.sub)").click(function() {
$("ul", thi
浏览 1提问于2013-06-07得票数 0
回答已采纳
4回答
我试图触发一个点击事件内的锚标签‘李’。当单击“li”时，我想在“li”中触发一个标签。下面给出了我的html和jQuery。在jquery下面显示此错误。
“太多的递归..”
<li><a href="link">link text</a></li>
$(document).ready(function(){
$("#menu-top li").click(function(){
$(this).children('a').click();
});
});
请帮帮我。谢谢
浏览 2提问于2015-04-29得票数 0
回答已采纳
我有一个带有切换的ul li子列表。
ul
li a.trigger
ul.sub_list li
li
li
事件-单击。
当我单击a.trigger时，将显示ul.sub_list。来隐藏ul.sub_list。我需要单击a.trigger或html元素。
问题是当用户单击ul.sub_list items时，如何从hide() ul.sub_list中停止html。
示例：
这就像是facebook的通知。
浏览 0提问于2011-12-02得票数 2
回答已采纳
2回答
我的WordPress菜单有问题。在我插入jquery之后，我的链接(在菜单和侧栏中)将无法工作。该怎么办呢？谢谢!
我的代码：
HTML
<ul class="menu">
<li class="menu-item">
<a href="#">Link text</a>
<ul class="sub-menu">
<li><a>Text</a></li>
<li>
浏览 9提问于2013-12-15得票数 1
回答已采纳
7回答
我试过了，但我想不出如何设计这些元素的样式：
<div class="tabs">
<ul class="tabsNavigation">
<li><a href="#tab1">Tab1</a></li>
<li><a href="#tab2">Tab2</a></li>
<li><a href="#tab3">Tab3</a></li>
<
浏览 3提问于2011-02-10得票数 0
回答已采纳
2回答
我不想让我的页面从左向右滚动。我希望我的页面看起来像它看起来像滚动完全向左。我已经尝试使身体宽度100%，但我不确定这是我应该做的。
<!doctype html>
<html>
<head>
<title>Noam's BBC</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /&
浏览 0提问于2015-09-11得票数 0
我看到了一个有趣的导航列表示例(css省略了)，
<nav class="navigation">
<ul>
<li><a href="#">Profile</a></li><!--
--><li><a href="#">Settings</a></li><!--
--><li><a href="#">Noti
浏览 3提问于2022-01-26得票数 1
回答已采纳
1回答
我有以下脚本，它似乎只有1种工作方式：
initDownloadVersionSwitch: function() {
$(document).on("click", ".download-version-list li:not(.active)", function() {
var i = $(this),
t = i.parent(),
o = t.prev(".download-version-items"),
浏览 1提问于2016-02-25得票数 0
回答已采纳
4回答
例如：
您拥有以下内容：
<ul>
<li>zero</li>
<li>one</li>
<li class="selected">two</li>
<li>three</li>
<li>more elements</li>
</ul>
CSS：
.selected:previous {
color: red;
}
.selected:next {
color: green;
}
这有可能吗？
浏览 0提问于2012-03-16得票数 17
回答已采纳
3回答
我有一个菜单结构，它应该在滚动时突出显示每个项目，然后一些菜单项在单击时向下展开为下拉菜单。行为正常，但问题是。
在<li class="dropdown">中，a:标记的样式正在覆盖我指定的任何内容。即使我的风格后来出现了。
我可以‘强迫’它与“！重要”旗帜放置在每一个元素，但我真的不想走这条路。“subnav”类是单击下拉菜单的父菜单项时应该是可见的样式。如果基本超链接锚值一直都在强制覆盖，那么如何才能正确地显示子导航类呢？
这使用了jQuery 1.3
剧本：
<script type="text/javascript">
浏览 4提问于2010-03-10得票数 0
回答已采纳
1回答
我在Kendo ( JavaScript one，而不是MVC)中使用Kendo上下文菜单。它提供了一个属性，当用户选择一行网格时，我将使用该属性来打开上下文菜单。现在，我需要使用模板在网格单元格中添加一个链接，但单击该链接时，我需要一个JavaScript函数来运行，而不是打开上下文菜单。下面是显示行和蓝色链接的片段，它不是调用JavaScript函数，而是打开上下文菜单。上下文菜单被设置为在左侧单击而不是右边打开，因为客户端希望它对于iPad是这样的。
如果单击该链接，是否无论如何要绕过上下文菜单打开，最好是在提及上下文菜单的filter属性时排除链接或锚标记。我提到过这样的菜单
浏览 2提问于2016-01-18得票数 4
回答已采纳
我正在开发一个用于学习的网站。我在右上角创建了一个菜单按钮，如下面的截图所示。
下面的屏幕截图显示了当菜单按钮被触发时页面的外观。
您可以看到在展开的菜单面板中有3个分区。我正在尝试使用javascript onmouseout在将鼠标移出DIV时自动隐藏菜单。但一旦鼠标指针到达中间灰色的div，菜单就会隐藏。虽然这个灰色的div是菜单面板的子级，但菜单一到达这个灰色的div就会隐藏起来。如何克服这个问题？
<div class="menupanel">
<div class="menulist">
浏览 4提问于2020-08-27得票数 2
2回答
我有一个列表，我希望在元素之后选择所有“相似”项(即具有相同类)：
<ul>
<li class="x">foo</li>
<li class="y" id="b">foo</li> <!-- From this... -->
<li class="y">foo</li> <!-- ...can I select this?... -->
<li class="y">
浏览 3提问于2017-01-18得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
