草庐IT

first-child

全部标签

HTML fieldset允许 child 无限扩展

我想在fieldset中放置一个可滚动的框,但我遇到了一个怪癖,我想不出办法解决它。当您将可滚动的div放在fieldset中时,fieldset会扩展而不是使可滚动元素滚动。这是atestcase.以下无限扩展(嘘):Loremipsumdolorsitamet,consecteturadipiscingelit.Sedloremarcu,sodalesnongravidaeget,vehiculavitaenulla.Quisqueturpisjusto,consecteturutegestasat,pulvinarnecdiam.Donecporttitorlobortiseli

html - 溢出的 flex child 尊重 parent 在 Chrome 中的最大高度,而不是在 Firefox 中

我有一个带有max-height的flexbox容器。它有两个child,水平flex,其中一个有overflow:auto。在Chrome中,溢出的child一旦达到容器的最大高度就会停止增长并滚动。在Firefox中,它会溢出容器。我正在针对最新的Chrome(目前为59)进行开发,但必须支持Firefox40+,因此我正在使用Firefox40进行测试。作为引用,caniuse.com报告FF40fullysupportsflexbox.这显然在较新的FF版本中可以正常工作,但在我使用的FF40中则不能,因此对于无法访问较旧FF的用户,这里是我所看到的行为的屏幕截图:火狐40Ch

javascript - 如何从 anchor child 获取父 div id

IfALLDASHBOARDencountersanerror这里我想获取dividwizard-ruleonclickanchor标签。我该怎么做?anchor标签现在只是获取anchor标签本身的ID。但不是其父元素的ID。 最佳答案 使用parentNode访问你的idIfALLDASHBOARDencountersanerror 关于javascript-如何从anchorchild获取父divid,我们在StackOverflow上找到一个类似的问题:

javascript - Jquery 找到一个类型的第一个直接 child

我正在寻找一种方法来查找某个元素的第一个直接子元素,并且属于精确类型。让我们想象一下这个标记:StuffStuff2Stuff3所以在这里,我要得到的是“Stuff2”第一段是直子。如果使用jquery,我会执行类似$('#mainDiv').find('p:first');的操作,我会在第一个div中获取段落。我需要的是忽略嵌套子项并只采用第一个直接子项。我应该怎么做? 最佳答案 使用直接后代选择器$('#mainDiv>p:first')甚至children()$('#mainDiv').children('p').first(

javascript - 使用 jQuery 找到 child 的索引?

如果我有这样的html结构:我有一个通过($('#parent.child')).click()定义的点击处理程序然后我点击类为second的div(first,second,third只是添加了类以使演示更清晰)是否有一种简单的方法来获得数字1,因为它是第二个child?(基于0的索引)?类似于$(this).index 最佳答案 看看jQueryAPI。你建议的方法,index,完全正确:$('#parent.child').click(function(){varindex=$(this).index();});来自文档:If

javascript - 扩展高度以包括绝对定位的 child

我正在为CMS构建一个html/javascript主题设计器。元素是绝对定位的,可以通过鼠标移动/调整大小,和/或包含可编辑的文本,其高度可以由行数决定。但是,我遇到了一个问题,即父元素的高度不会扩展以包含其绝对定位的子元素。最小代码(也在JSFiddlehere上):div.layer{position:absolute}div.layer1{width:400px;border:1pxsolid#ccc}div.layer2{top:15px;left:100px;width:100px;border:1pxsolidblue}containershouldexpandtothe

html - flex 盒子。避免高度比 parent 长的 child (列方向)

这个问题在这里已经有了答案:Whydon'tflexitemsshrinkpastcontentsize?(5个答案)关闭6年前。我正在使用flexbox为网站搭建一个基本的UI。与通常的电子邮件布局非常相似。出于某种原因,列式布局的flexbox容器(.content-main,plumcolor)的高度比它的父级高,我不希望它这样。我做了一个codepensnippet以显示此行为。html,body{width:100%;height:100%;background:lightblue;box-sizing:border-box;}*{box-sizing:border-box;

javascript - 如何防止拖拽 child ,但允许拖拽 parent ?

我有一个用户可以拖动的div,在那个div里面是一个带有一些文本的跨度,我想让用户选择(因此他们不能拖动它)。如何允许拖动div而不允许拖动span?dragstart事件在div上。我可能忽略了一些简单的事情。我在div上尝试了draggable=true,在span上尝试了draggable=false。那没有用。尝试在dragstart上返回false,但也没有用。dragstart(大致):varjTarget=$(e.target);if((jTarget.is('div.header')||(jTarget.parents('div.header'))&&!jTarget.

html - 使 flex child 等于网格列内父级的高度

我正在尝试构建一个定价表,其中每一列都包含一张卡片。我希望所有卡片都拉伸(stretch)到其父(.col)元素的高度。注意:我正在使用Bootstrap4,并尝试使用现有的网格系统(为了保持一致性)和这个特定的标记来实现这一点。我无法让卡片增长到其父容器的高度。这甚至可以用当前的标记实现吗?基本标记是这样的:blahblahblahblahblah这是我的笔:https://codepen.io/anon/pen/oZXWJB 最佳答案 将flex-grow:1;添加到您的.card规则中。HTML标记很好。.row{displa

html - 如何在内联样式中添加 nth-child() 样式?

如何在将内联样式应用于元素(显然包含多个元素)时添加nth-child(n)声明。例如,假设我有一个包含三个p元素的div。一般的样式表规则是这样的:divp:nth-child(2){color:blue;}但是,如何在将内联样式应用于包含的div的同时将第二段颜色设置为蓝色? 最佳答案 内联样式属性仅适用于具有该属性的元素。因此,例如,如果您在div上有样式属性,则样式将仅适用于该div(尽管有继承属性和冲突样式)。您不能在另一个元素上使用内联样式属性来定位不同的元素。即使您将样式属性应用于p元素,您也无法根据伪类有条件地应用内