草庐IT

first-child

全部标签

html - CSS first-child 和 last-child 在同一个元素上使用时不起作用

我刚刚注意到CSS:first-child和:last-child在同一个元素上使用时不起作用。只用了一个。我想知道为什么会这样,CSS中是否有任何解决方法?这对我来说似乎是CSS错误-第一个元素也可以是最后一个元素。我在Google中找不到关于该主题的任何内容。每个教程都假定至少有2个元素。我正在寻找类似“第一个child也是最后一个child”的选择器。存在吗? 最佳答案 I'mwonderingwhyisthatandifthereisanyworkaroundtothatinCSS?ItseemslikeCSSbugtome

html - 具有 "overflow: hidden"溢出祖 parent 边缘的 Flexbox child

我正在尝试将两个子元素嵌套在一个包装器中,该包装器指定边距,以便在显示较窄时其内容与屏幕两侧之间有空间,而max-width则用于显示器很宽。第二个child有一些溢出应该是可见的,而第一个child应该严格留在包装器的内容框中。删除第一个child后,第二个child的行为将如预期。但是,当我添加第一个child时,它似乎完全忽略了包装器的边距,拉伸(stretch)了包装器的内容框并破坏了第二个child。将overflow:hidden应用到包装器可以修复边距问题,但会剪掉第二个子元素。将边距应用于第一个子项不会使其与父项一起折叠,因为它处于新的block格式上下文中。到目前为止

html - 使父 div webkit-filter 不影响 child

我正在使用一个非常漂亮的webkit滤镜来制作背景图像灰度,并将鼠标悬停在图像上时变为彩色。这是过滤器filter:none;-webkit-filter:grayscale(0);transition:opacity.3sease-in-out;-moz-transition:opacity.3sease-in-out;-webkit-transition:opacity.3sease-in-out;如您所见,甚至还有一个“过渡”属性,使图像可以平滑地从淡入淡出过渡到全彩色。我遇到的问题是我正在应用它的div也会影响位于div内的子文本,并将文本也变成灰度。这是一个问题,因为文本需要

html - parent 和 child 高度相同,为什么会有垂直滚动条?

我希望我的.sideBar和.contentHolder元素在.displayContainer中。问题是.displayContainer渲染了一个不必要的垂直滚动条。水平滚动条可以,但垂直滚动条就没必要了。我检查并发现.displayContainer和子元素具有相同的计算高度。那为什么会有垂直滚动条呢?谁能告诉我如何删除它?body,html{margin:0px;padding:0px;border:0px;height:100%;width:100%;}.displayContainer{height:100%;width:100%;overflow:auto;white-s

html - Flex child 未扩展到全高

这个问题在这里已经有了答案:Chrome/Safarinotfilling100%heightofflexparent(5个答案)关闭上个月。我的页面上有一个动态页脚,我希望它上面的内容可以缩放以到达页脚的顶部,这很好,但我遇到了问题:#snippet-container{height:300px;width:200px;}#page{display:flex;flex-flow:column;height:100%;}#content{flex:11auto;background:blue;}#content.test{width:100%;height:100%;backgroun

html - 在CSS中选择多个 child

关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗?通过editingthispost添加细节并澄清问题.关闭2年前。Improvethisquestion我正在尝试在css中为表格应用省略号类。所以有些列需要有这个省略号类。我在一个表中有多个列。我是通过css中的nth-child属性来做到这一点的,还有其他方法可以选择随机的多个child吗?我试过-.ListTaskTimetbodytr>td:nth-child(3)a{text-overflow:ellipsis;width:150px;display:block;overflow:hidd

javascript - CSS flex : last and first item in a row selector

我在尝试选择flex容器第一行的最后一个元素和最后一行的第一个元素时遇到问题。我的flex容器是flex-wrap:wrap;我所有的元素都是flex:auto;它们有不同的大小,通过flexauto我让元素适合在我的容器上对齐,我的Angular元素有各自的圆Angular。但是,问题是,我正在隐藏和显示带有事件的元素(比如单击),并且我需要在每次更改时将Angular元素设置为圆Angular,如果它有一个网格容器,我可以通过nth-child因为它永远不会改变列数。但是在flex中,每行的元素数量不同。我想出了一个Jquery解决方案(链接如下),但我认为它很吸引人而且很大,可能

html - 如何为某种元素的第一个 child 设计样式?

例如,我有这样的HTML:2216我如何为第一个child设计样式我是这样使用的:.pagea:first-child{color:red}但它没有运行。 最佳答案 使用first-of-type而不是first-child.pagea:first-of-type{color:red;}The:first-of-typeCSSpseudo-classrepresentsthefirstsiblingofitstypeinthelistofchildrenofitsparentelement.取自MDNDocumentation.您可

html - 如何修复 "Error: A charset attribute on a meta element found after the first 512 bytes."

我在验证我的网站时遇到此错误。Error:Acharsetattributeonametaelementfoundafterthefirst512bytes.这里是导致这个问题的代码: 最佳答案 将meta条目移动到所有其他条目之上,例如:你的问题在于你违反了W3CHTML5recommendation:Theelementcontainingthecharacterencodingdeclarationmustbeserializedcompletelywithinthefirst1024bytesofthedocument.无论

css - 父 div 没有扩展到 child 的高度

正如您将看到的,我有一个div(#innerPageWrapper)环绕着包含内容的div。#innerPageWrapper在视觉上也充当布局中的半透明边框。我的问题是#innerPageWrapper不会扩展以适应内部的child,更不用说扩展以填充页面的其余部分了。这是#innerPageWrapper的代码#innerPageWrapper{width:1100px;height:100%;display:inline-block;padding:050px050px;background:rgba(0,0,0,0.75)url(navShadow.png)repeat-xto