我想定位页面上的所有h标签.我知道你可以这样做......
h1,
h2,
h3,
h4,
h5,
h6 {
font: 32px/42px trajan-pro-1,trajan-pro-2;
}
但使用高级CSS选择器有更有效的方法吗？例如:
[att^=h] {
font: 32px/42px trajan-pro-1,trajan-pro-2;
}
(但显然这不起作用)
如何在父元素上悬停时更改子元素的样式.如果可能的话,我更喜欢CSS解决方案.有没有任何可能的解决方案:悬停CSS选择器.实际上,当面板上有悬停时,我需要更改面板内选项栏的颜色.
希望支持所有主流浏览器.
如何将样式应用于空输入框？如果用户在输入字段中键入内容,则不应再应用该样式.这在CSS中可行吗？我试过这个:
input[value=""]
有没有办法将Class'样式应用于只有一级td标签？
<style>.MyClass td {border: solid 1px red;}</style>
<table class="MyClass">
<tr>
<td>
THIS SHOULD HAVE RED BORDERS
</td>
<td>
THIS SHOULD HAVE RED BORDERS
<table><tr><td>THIS SHOULD NOT HAVE ANY</td></tr></table>
</td>
</tr>
</table>
当用户鼠标悬停其类名为的元素时,我正在尝试应用背景颜色"reMode_hover".
但是如果元素也有,我不想改变颜色"reMode_selected"
注意:我只能使用CSS而不是javascript,因为我在某种有限的环境中工作.
为了澄清,我的目标是在悬停而不是第二个元素上着色第一个元素.
HTML
<a href="" title="Design" class="reMode_design reMode_hover">
<span>Design</span>
</a>
<a href="" title="Design"
class="reMode_design reMode_hover reMode_selected">
<span>Design</span>
</a>
我尝试下面希望第一个定义可行,但事实并非如此.我究竟做错了什么？
CSS
/* do not apply background-color so leave this empty */
.reMode_selected .reMode_hover:hover
{
}
.reMode_hover:hover
{
background-color: #f0ac00;
}
研究特异性我偶然发现了这个博客 - http://www.htmldog.com/guides/cssadvanced/specificity/
它指出特异性是CSS的点评系统.它告诉我们元素值1分,类值10分,ID值100分.它也是最重要的说这些点总计,总量是选择器的特异性.
例如:
body = 1 point
body .wrapper = 11 points
body .wrapper #container = 111 points
因此,使用这些点肯定会使以下CSS和HTML导致文本为蓝色:
CSS:
#a {
color: red;
}
.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o {
color: blue;
}HTML:
<div class="a">
<div class="b">
<div class="c">
<div class="d">
<div class="e">
<div class="f">
<div class="g">
<div class="h">
<div class="i">
<div class="j">
<div class="k">
<div class="l">
<div class="m">
<div class="n">
<div class="o" id="a">
This should …我想为输入元素应用一些css,我想只对未被禁用且不是提交类型的输入执行此操作,下面的css不起作用,也许如果有人可以解释我必须如何添加它.
input:not(disabled)not:[type="submit"]:focus{
box-shadow:0 0 2px 0 #0066FF;
-webkit-box-shadow:0 0 4px 0 #66A3FF;
}
我正在使用内联CSS(即style属性中的CSS )制作HTML电子邮件签名,我很好奇是否可以使用:before和:after伪元素.
如果是这样,我将如何用内联CSS实现这样的东西？
td { text-align: justify; }
td:after { content: ""; display: inline-block; width: 100%; }
是否可以使用内联样式的伪类？
例:
<a href="http://www.google.com" style="hover:text-decoration:none;">Google</a>
我知道上面的HTML不起作用但有类似的东西吗？
PS我知道我应该使用外部样式表,我这样做.如果可以使用内联样式完成,我只是很好奇.
CSS 2.1 :after和CSS 3 ::after伪选择器之间是否存在任何功能差异(::after旧浏览器不支持)？是否有任何实际理由使用新规范？