是否有用于溢出的 css 伪选择器?

     2023-03-06     105

关键词:

【中文标题】是否有用于溢出的 css 伪选择器?【英文标题】:Is there a css pseudo selector for overflow? 【发布时间】:2012-10-24 04:08:33 【问题描述】:

我正在尝试根据其父 div 是否溢出来改变其样式。

.pDiv  display: block; width: 300px; height: 100px; border: 1px solid rgb(0,0,0); 
.cDiv  display: block; padding 4px; border-bottom: 1px solid rgb(0,0,0);
.pDiv:overflow .cDiv  border-bottom: none; 

<div class="pDiv"><div class="cDiv">child 1</div><div class="cDiv">child 2</div><div class="cDiv">child 3</div><div class="cDiv">child 4</div><div class="cDiv">child 5</div></div>

有可能做这样的事情吗?我会使用最后一个子伪选择器,但是子元素的数量可能会有所不同,所以我希望它仅在父 div 溢出时才删除最后一个子元素的边框底部。我也想要一个纯 CSS 解决方案,不要 JS!

【问题讨论】:

不幸的是,您必须为此使用 JS。 这可能会有所帮助:***.com/questions/9333379/… 【参考方案1】:

CSS 无法根据使用的或计算的任何类型的样式进行选择,所以你运气不好。

【讨论】:

呸,那是蹩脚的。基本上,当用户滚动到溢出的父 div 的底部时,我试图消除两个底部边框彼此重叠。猜猜我必须使用 JS,可惜没有简单的 CSS 解决方案:( 你的意思是它是Pleonasm?当然可以,但这绝对不是矛盾。 据我所知,CSS 无法选择已使用或计算的样式,这是正确的。但它可以 - 在某些情况下 - 选择计算状态,例如:hover 和 :active。所以我认为有朝一日 :overflowing 可能是一种可选择的状态。这将是非常好的:) @AdrianSchmidt 直到有人错误地启动了无限重新渲染循环,因为他们的 :overflowing 样式删除了溢出并且原始样式重新触发了溢出......等等。 @canon 嗯……是的……那是真的……这当然不是其他计算状态的问题。这可能就是为什么 CSS 也不能选择计算样式的原因?

当有一个类但没有另一个类时,用于 :before 伪元素的 CSS 选择器

】当有一个类但没有另一个类时,用于:before伪元素的CSS选择器【英文标题】:CSSselectorfor:beforepseudo-elementwhenthereisoneclassbutNOTanotherclass【发布时间】:2016-10-0823:50:54【问题描述】:我正在使用Bootstrap创建一个用户界面,其中我想... 查看详情

伪类选择器与伪元素选择器的区别

...有:作用:表示元素中的一些特殊的位置,常见的有:看是否添加了新的元素(只是从视觉效果上添加了,但并没有在文档树中真正的添加)有时一个冒号有时两个冒号,实际上是CSS不同版本的规定而已伪元素使用一个冒号为了... 查看详情

css选择器的1.13ui元素状态伪类选择器

参考技术A:enabled,指定元素处于可用状态时的样式,一般用于input,select和textarea  :disabled,指定元素处于不可用状态时的样式,一般用于input,select和textarea:read-only,指定元素为只读状态时的样式,FF为-moz-read-only,一般用于in... 查看详情

css伪元素:添加一些选择器的特殊效果

...udo-element{property:value;} :first-line伪元素"first-line"伪元素用于向文本的首行设置特殊样式。在下面的例子中,浏览器会根据 查看详情

css伪选择器使用总结——css中关于伪类和伪元素的知识总汇

CSS伪类用于向某些选择器添加特殊的效果,而CSS引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化。这里讲总结关于css伪类和伪元素的相关使用伪元素 :before/:before  在某个元素之前插入一些内容;::after/:... 查看详情

css:伪类和伪元素选择器

一、伪类选择器在页面中,有时候同一个元素在不同动作下有不同的样式。比如链接在没有点击的时候有个样式,在鼠标放上去有另外的样式,还有在点击完成以后又会又一个样式。这几种情况下这个链接的标签并没有变化,有... 查看详情

css选择器——伪元素

...素:first-letter:first-letter用来选择文本块的第一个字母。常用于给文本添加排版细节,例如首字母下沉。p:first-letter{color:#ff0000;font-size:xx-large;}:first-line:first-lin用来匹配元素的第一行文本,应用一些特殊的样式。p:first-line{color:#ff0000;... 查看详情

前端css的选择器伪元素选择器(代码片段)

 介绍常用的伪元素。after用得比较多的 first-letter用于为文本的第一个首字母设置样式。 <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="x-ua-compatible"content="IE=edge" 查看详情

css属性-伪类和伪元素的区别

...法呢?其实主要是为了区分伪类和伪元素 伪类:伪类用于向某些选择器添加特殊的效果伪元素:伪元素用于将特殊的效果添加到某些选择器是不是感觉特别懵逼?这两种有什么区别嘛。怎么还搞这么麻烦! CSS3这样设计... 查看详情

伪类和伪元素的区别(代码片段)

在css2中是这样定义二者的:CSS伪类用于向某些选择器添加特殊的效果。CSS伪元素用于将特殊的效果添加到某些选择器。伪类存在的意义是为了通过选择器找到那些不存在DOM树中的信息以及不能被常规CSS选择器获取到的信息。第... 查看详情

css伪元素是用来添加一些选择器的特殊效果

...ss:pseudo-element{property:value;}:first-line伪元素"first-line"伪元素用于向文本的首行设置特殊样式。在下面的例子中,浏览器会根据"first-line"伪元素中的样式对p元素的第一行文 查看详情

css3选择器——导图篇

css3选择器主要有:基本选择器,层次选择器, 伪类选择器, 伪元素选择器,属性选择器基本选择器 层次选择器 伪类选择器分为 动态伪类选择器,目标伪类选择器,语言伪类选择器,UI元素状态伪类选择器,... 查看详情

css伪元素选择器

...之前添加内容这个属性使用不是很频繁了解使用此伪元素选择器一定要结合content属性*/p:before{content:‘alex‘;}/*在....之后添加内容,使用非常频繁通常与咱们后面要讲到布局有很大的关联(清除浮动)*/p:after{content:‘& 查看详情

css都有哪些选择器

CSS中常用的选择器:(一)基本选择器(二)层次选择器(三)动态伪类选择器(四)目标伪类选择器(五)ui状态伪类选择器(六)结构伪类选择器(七)属性选择器(八)伪元素(一)基本选择器1.标签选择器:通过标签名获取... 查看详情

css伪类和伪元素选择器

伪类基于当前元素所处的状态或具有的特性,用于设置元素自身的特殊效果。a:link 规定所有未被点击的链接;a:visited 匹配多有已被点击过的链接;a:active 匹配所有鼠标按下未松开的元素;a:hover 匹配所有鼠... 查看详情

关于伪类选择器中一个冒号和两个冒号的区别(代码片段)

...安全。首先,阅读 w3c 对两者的定义:CSS 伪类用于向某些选择器添加特殊的效果。CSS 伪元素用于将特殊的效果添加到某些选择器。可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 查看详情

前端-css

...play属性css盒子模型padding内边距margin外边距float属性overflow溢出属性position属性z-index属性opacity透明属性CSS总结CSS(Cascadigstylesheet 查看详情

css3中的选择器(代码片段)

CSS3选择器是在CSS2.1选择器的基础上新增了属性选择器、伪类选择器、过滤选择器,减少了对HTML类名或ID名的依赖,避免了对HTML结构的干扰,使编写的过程更加轻松。根据所获取页面中的元素的不同,可以把CSS选择器分成五大类... 查看详情