标签: pseudo-class
:添加动态内容时为空伪类
我已在此sitepoint页面和quirksmode页面中读到有关新:empty伪类的信息.
Sitepoint表示,即使附加了动态内容,空样式仍然会生效.值得注意的是,firefox就是这样做的人.
Quirksmode说当它填充一些元素或文本时,它会丢弃空状态.此站点上的演示可在我的浏览器中运行(chrome 19).所以我假设只有firefox会出错.
但是我在我的插件中有这段代码,它动态填充一个带有项目的列表,它似乎不起作用,这里是一个附加列表项的小提琴,即使你点击按钮,项目也不会出现,直到您尝试在控制台中调试它(当您单击<li>元素树中时,它们会神奇地出现).
为什么会发生这种情况,是否有一种"强行抛弃"空洞风格的工作？
我知道还有其他方法可以做我在小提琴中做的事情(目前正在做其中一种"其他方式"),但这种:empty方法要容易得多.
更新:
添加了删除项目按钮.删除最后一项时,列表应该消失 - 仍然不起作用.嗯..我会尝试检查另一个浏览器.
固定
临时修复/替代使用:empty和display:none是使元件具有零width,height,borders,margins,和paddings.另外,position:absolute将其从流动中移除.
推荐指数
解决办法
查看次数
检测伪类:从javascript无效
有没有办法通过Javascript 检测元素:invalid上的伪类的"外观" input？
换句话说,当:invalid伪类出现在input元素上时,如何触发某些Javascript代码运行？
推荐指数
解决办法
查看次数
在CSS中组合伪选择器？
我的意思是,如果我需要,例如,悬停链接中的选定文本是红色的,我可以在CSS样式中使用以下代码吗？
.abc:hover:selection{color:red}
和
<a href="123" class="abc">4567890</a>
当我选择它的一部分时,那个链接会在我悬停它时变成红色,并且这种伪类合并的正确语法是什么？
推荐指数
解决办法
查看次数
CSS第一个没有类的元素
我有一些列表项,第一个是特色类,过了一些没有.有了CSS,我想选择列表中没有特色类的第一个项目......
代码如下:
<ul>
<li class="featured"></li>
<li class="featured"></li>
<li></li>
<li></li>
<li></li>
</ul>
我尝试了以下但没有效果:
ul li:not(.featured):first-child {
/* Do some stuff here */
}
关于如何在不诉诸jQuery的情况下做到这一点的任何想法？
更新 如果能够提供帮助,那么添加非要素类的能力确实存在.例如:
<ul>
<li class="listing featured"></li>
<li class="listing featured"></li>
<li class="listing"></li>
<li class="listing"></li>
<li class="listing"></li>
</ul>
推荐指数
解决办法
查看次数
使用CSS设置跨度中的第n个字母的样式
我有:
<span id="string">12h12m12s</span>
而且我正在寻找h,m并且s比文本的其他部分更小.我听说过nth-lettercss 中的伪元素,但它似乎不起作用:
#string:nth-letter(3),
#string:nth-letter(6),
#string:nth-letter(9) {
font-size: 2em;
}
我知道我可以使用javascript来解析字符串并用周围的span标签替换字母并设置标签样式.但是,字符串每秒更新一次,似乎解析通常是资源密集型.
推荐指数
解决办法
查看次数
IE 11 tr:主动选择器坏了吗？
我可以选择并突出显示IE中的td元素,但不能使用tr:active突出显示tr中的所有td.这在FireFox和Chrome中可以正常使用. 这是一个JsFiddle示例,我在CSS中做错了什么？
还在做......
在Chrome,Safari,Opera和FF ......
HTML
<body>
<br />
<div id="rowCount">
<table class='t2'>
<tr>
<th>Click a Cell should highlight all in the row</th>
</tr>
<tr>
<td>tr:active td</td>
<td>td:active</td>
</tr>
</table>
</div>
</body>
CSS
table {
cursor: default;
border: 1px solid black;
background-color: transparent;
}
div {
z-index: 0;
display: block;
border:4px solid #CC3300;
width: 80%;
background-color: #4D70DB;
}
th{
text-align: left;
}
td{
border: 1px solid #000000;
}
tr:hover td {
border:1px solid #CC3300;
}
tr:active td{
background-color: #CC3300; …推荐指数
解决办法
查看次数
css flexbox包装:伪类的模拟,用于选择主/交叉轴上的开始/结束项目？
Flexbox是一件好事.但是为了更多功能,当使用flex包装时:它需要伪类,第一个孩子或最后一个孩子或nth-child的类似物.
如果项目在主轴的末端,或者它被包裹,现在它在主轴的开头,那将是非常舒适的.
例如,我想要这个:
.flexbox
{
display: flex;
flex-flow:row wrap;
}
.flexbox .item:flex-start
{
/*items in the left of container selector*/
}
.flexbox .item:flex-end
{
/*items in the right of container selector*/
}
.flexbox .item:flex-cross-start
{
/*items on the top of container selector*/
}
.flexbox .item:flex-cross-end
{
/*items on the bottom of container selector*/
}
但遗憾的是 - 没有一个带有弹性主题的伪类.
问题:我可以编写css选择器(没有JS),确定wrap-flex-container中的元素,它们位于主/交叉轴的开始/结束,还是没有？
subquestion:为什么没有flexbox的伪类,是否存在一些概念上的矛盾？
推荐指数
解决办法
查看次数
悬停时<li>标签内的非法<br>或<p>的替代方案？
有没有人建议在<li>包含悬停弹出伪类的标签中创建段落类型的行空间？
我<span>弹出一个弹出a:hover的文件,我希望弹出的文本分为两段.它适用<br>于FF,但我想做正确的事(现在我发现它是错的!)......
HTML:
<div id="rightlist">
<ul>
<li><a href="">List item
<span>
words words words that are "paragraph" 1 of List item
<br><br>
different words that make up "paragraph" 2 of List item
</span></a></li>
CSS:
#rightlist {
margin-top: 10px; margin-right: 5px; width: 387px ; height: 239px ;
background-color: #7EBB11 ;
display: table-cell;
z-index: 100 ;
float: right ;
}
#rightlist ul {
text-align: left;
margin: 0;
margin-top: 6px;
font-family: sans-serif;
font-size: 20px ;
color: …推荐指数
解决办法
查看次数
CSS伪类困惑:活跃
我在这里看CSS:主动选择器.
:活动选择器样式链接到活动页面
这让我想到了,HTML/CSS术语中的"活动页面"到底是什么......
此时我去了w3docs部分:5.11.3动态伪类:: hover,:active和:focus.
:在用户激活元素时应用:active伪类.例如,在用户按下鼠标按钮并释放它的时间之间.
所以我使用了其中一个w3shool尝试它的页面并将一个例子组合在一起,用下面的代码代替,你可以剪切并粘贴并尝试.
<html>
<head>
<style type="text/css">
:focus,:active
{
outline-offset: 10px;
outline: solid;
}
</style>
</head>
<body>
<p>Click the links to see the background color become yellow:</p>
<a href="http://www.w3schools.com">w3schools.com</a>
<a href="http://www.wikipedia.org">wikipedia.org</a>
<button type="button">Click Me!</button>
<form>
<input type="text"/>
</form>
</body>
</html>
表单字段适用于:焦点.但是按钮或链接不适用于:活动.
这是为什么？是否有关于"活动页面"的内容我不理解w3schools所谈到的.
谷歌搜索时,我看到了这个很好的提示,但我不认为这是相关的.
推荐指数
解决办法
查看次数
make css:hover只影响父元素
推荐指数
解决办法
查看次数
标签 统计
pseudo-class ×10
css ×9
css3 ×4
hover ×2
html ×2
javascript ×2
flexbox ×1
line-breaks ×1
list ×1
popup ×1
styling ×1