有没有办法将样式应用于包含多个类的元素？
<div class="foo" > foo </div>
<div class="foo bar" > foo bar </div>
<div class="bar" > bar </div>
我只想修改包含类"foo bar"的元素的样式.XPath信息就像是//div[contains(@class,"foo") and contains(@class,"bar")].纯CSS的任何想法,没有必要创建一个独特的类？
HTML看起来像这样:
<div id="content_wide">
<div class="photo-center borderless"><img src="http://example.com/travel-path-map.png" alt="" title="" /></div>
...但由于某种原因,我似乎无法像这样定位照片中心div:
#content_wide + .photo-center { margin-top:10px }
有趣的是,一个更通用的子选择器工作:
#content_wide > .photo-center { margin-top:10px }
思考？
你能选择一个具有特定id和某个类的CSS元素吗？
我认为这样的事情:
#id.class {
color: blue;
}
下面是一些CSS代码.
.form-field {min-height: 20px; margin-bottom: 10px; padding-top: 4px; width: 80px;}
.form-field TEXTAREA, INPUT[type='text'] {position: absolute; left: 100px; top: 0px; height: 15px;}
.form-field TEXTAREA {height: 80px;}
所以每次有一个input或者textarea在div.form-field该CSS应适用.
虽然只有一个INPUT[type='text'](甚至在外面.form-field)css得到应用.我如何阻止它这样做？
Netbeans,我的IDE,将这个CSS标记为不正确,但我无法分辨出问题.我找不到任何说明contains-element特定于CSS3的东西,但样式并没有出现在Firefox或Opera中.
CSS:
span:contains-element(input[type="radio"]) {
border:1px solid black;
}
HTML:
<span><input type="radio" name="amount" value="Cash amount"/>Cash amount</span>
这是我的HTML:
<header id="banner" class="body">
<h1><a href="#">New UGS Project! <br><strong>This is the sub-title</strong></a></h1>
<nav><ul>
<li><a href="#">home</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">contact</a></li>
</ul></nav>
</header><!-- /#banner -->
我的CSS:
#banner nav a:first-child:hover{
-moz-border-radius-topleft: 8px;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-bottomleft: 8px;
-webkit-border-bottom-left-radius: 8px;
}
我想只选择第一个链接"home"来应用边界半径.我正在努力使用这个CSS3选择器......
我正在与Vaadin合作,这是一个类似GWT的框架,用于开发丰富的Web应用程序.
现在我想在我的标记中设置生成的HTML标记元素的填充,我遇到了很大的问题......
这是标记从Firebug中获取的方式:
http://img39.imageshack.us/img39/2495/cssclassproblems.png
标签
所有有padding-top: 12px和padding-bottom: 12px,我真的想把这个填充改为2px,但我似乎无法让它工作.
我已经尝试过这些组合:
.v-formlayout-captioncell td {
padding-top: 2px;
padding-bottom: 2px;
}
v-formlayout-row td {
padding-top: 2px;
padding-bottom: 2px;
}
.v-formlayout-row th,
.v-formlayout-row td {
padding-top: 2px;
padding-bottom: 2px;
}
但是它们都没有对填充产生任何影响...对于CSS和HTML比我更好的知识的人请看看这个,并就如何编写CSS类来做我想做的事情发表意见.如果您希望我提供更多信息,请询问!=)
提前致谢!
编辑:感谢Taryn East提供了很好的和可以理解的答案,它确实教会了我一些关于CSS语法的新知识!但是,我遇到的最大问题似乎是我添加的填充参数被浏览器覆盖了.但是通过使用!importantCSS标志并将类编写为已修复的类:
.v-formlayout-row td {
padding-top: 2px !important;
padding-bottom: 2px !important;
}
我有一个生成以下HTML代码的脚本:
<table class="table">
<tr><td class="head">Title</td></tr>
<tr><td class="cat">Featured</td></tr>
<tr><td class="cat">Hello</td></tr>
<tr><td class="cat">Hello</td></tr></table>
<table class="table">
<tr><td class="head">Title</td></tr>
<tr><td class="cat">Featured</td></tr>
<tr><td class="cat">Hello</td></tr>
<tr><td class="cat">Hello</td></tr></table>
<table class="table">
<tr><td class="head">Title</td></tr>
<tr><td class="cat">Featured</td></tr>
<tr><td class="cat">Hello</td></tr>
<tr><td class="cat">Hello</td></tr></table>
我需要设计第一个猫类"精选"!我正在使用jquery,但我不知道选择正确的选择器？
我试过了
jQuery(document).ready(function($){
$(".table .cat:first").css("color","blue");
})
但我没有正确的工作,它只选择class ="cat"的第一个元素.
请原谅我的无知,但我一直在寻找这个,我无法弄清楚如何更改以下的href:
<a id="p2749244"class="nohover"onfocus="this.blur()"name="index"rel="history"onmouseout="this.className='nohover';"onmouseover="this.className='hover';"href="address">
我需要使用什么样的选择器才能做到这一点？提前致谢.
在我的样式表中编写和引用元素时,是
ul#display-inline-block-example li
和
#display-inline-block-example ul li
同一件事情？如果没有这个或另一个有什么问题？