Tag: css selectors

如何在CSS中select具有特定类名的“最后一个孩子”？

<ul> <li class="list">test1</li> <li class="list">test2</li> <li class="list">test3</li> <li>test4</li> </ul> 如何selectclass级名称列表中的“最后一个孩子”？ <style> ul li.list:last-child{background-color:#000;} </style> 我知道上面的例子不起作用，但有什么类似的这个工作吗？ 重要： a）我不能使用ul li:nth-child(3) ，因为它可能发生在第四或第五位。 b）没有JavaScript。 任何帮助将不胜感激，谢谢！

基于元素文本的CSSselect器？

可能重复： 是否有包含特定文本的元素的CSSselect器？ 有没有办法根据元素文本在CSS中select一个元素？ 即： li[text=*foo] <li>foo</li> <li>bar</li> 这可能不起作用 我希望答案是否定的，但是要提前感谢。 编辑：也只需要支持Chrome。

如何写：hover条件为：之前和之后？

如何写:hover和:visited条件为a:before ？ 我试图a:before:hover但它不工作

如何根据CSS页面中另一个元素的状态select一个元素？

我有元素可以反映不同的状态，或者由用户（ :hover ， :focus等）触发或由服务器操作（ data-status="finished" ， disabled等）。 我可以定位具有改变状态的元素，但是我似乎无法find一种方法来根据元素的状态来定位DOM中的其他元素。 例： <section> <div>Element 1</div> <div data-status="finished">Element 2</div> <div>Element 3</div> </section> <section> <div>Element 4</div> <div class="blink">Element 5</div> <div>Element 4</div> <div>Element 4</div> <div class="spin">Element 4</div> … </section> 或者只是使用适当的服务器端样式呈现元素。 有没有一个CSSselect器，让我指定哪些元素应根据目标元素的状态来select？ 就像是： div[data-status~=finished]:affect(.blink, .spin) 这也可以让我也瞄准与CSS只具有相同的父母的元素 ？

通配符*在CSS的类

我有这些div我正在与.tocolor风格，但我也需要唯一标识符1,2,3,4等，所以我把它作为另一个类tocolor-1 。 <div class="tocolor tocolor-1"> tocolor 1 </div> <div class="tocolor tocolor-2"> tocolor 2 </div> <div class="tocolor tocolor-3"> tocolor 3 </div> <div class="tocolor tocolor-4"> tocolor 4 </div> .tocolor{ background: red; } 有没有办法只有1classtocolor-* 。 我尝试使用通配符*在这个CSS，但它没有工作。 .tocolor-*{ background: red; }

为什么不能将供应商特定的伪元素/类组合成一个规则集？

在CSS中，可以使用特定于供应商的伪类和伪元素（以获得最佳的跨浏览器覆盖率）的组合来在input中设置placeholder文本的样式。 这些都具有相同的基本属性（即文本样式和颜色声明）。 然而，尽pipe我不可避免地要使用相同的风格，而不考虑浏览器供应商，但似乎不可能将这些风格结合到一个以逗号分隔的select器中（就像您希望使用两个select器的其他CSS一样）相同的样式）。 作为一个例子，我倾向于使用以下四个select器来定位占位符样式： input:-moz-placeholder input::-moz-placeholder input:-ms-input-placeholder input::-webkit-input-placeholder （尽pipe:-moz-placeholder 被弃用 ，而是支持::-moz-placeholder这只发生在FireFox 19的发布中，所以目前都需要这两种方法才能获得更好的浏览器支持）。 令人沮丧的是，声明和赋予每个（相同）风格会导致CSS内部的重复。 所以，为了确保占位符文本是右alignment和斜体的，我最终会得到： input:-moz-placeholder{ font-style: italic; text-align: right; } input::-moz-placeholder{ font-style: italic; text-align: right; } input:-ms-input-placeholder{ font-style: italic; text-align: right; } input::-webkit-input-placeholder{ font-style: italic; text-align: right; } 我真正想要做的就是把它们组合成一个单独的逗号分隔的规则集： input:-moz-placeholder, input::-moz-placeholder, input:-ms-input-placeholder, input::-webkit-input-placeholder{ font-style: italic; text-align: right; } 但是，尽pipe这样做很公平，但这似乎并不奏效。 这让我担心，我不了解CSS的一些基本部分。 任何人都可以解释为什么发生这种情况？

如何在CSSselect器中使用带有冒号“：”的JSF生成的HTML元素ID？

我一直在用一个简单的使用JSF的Java EE项目。 <h:form id="phoneForm"> <h:dataTable id="phoneTable"> </h:dataTable> </h:form> 我试图通过#phoneTable { … }设置CSS，但它不起作用。 在检查客户端的HTML源代码后，看起来JSF生成的HTML表格以id="phoneForm:phoneTable"forms获取客户端ID。 我无法通过#phoneForm:phoneTable { … }来应用CSS，因为冒号表示#phoneForm:phoneTable { … }的开始并导致错误。 我怎样才能在CSSselect器中使用它？

什么是“+”（加号）CSSselect器是什么意思？

例如： p + p { /* Some declarations */ } 我不知道这是什么意思。 有什么区别，只是定义一个没有+ p的风格？

什么是“〜”（代字符/ squiggle / twiddle）CSSselect器是什么意思？

search~字符并不容易。 我正在查看一些CSS，并发现这一点 .check:checked ~ .content { } 这是什么意思？

点的CSS特异性

研究的特殊性我偶然发现了这个博客 – http://www.htmldog.com/guides/cssadvanced/specificity/ 它指出，特异性是CSS的点评分系统。 它告诉我们元素值1点，类值10点，ID值100点。 也就是说，这些分数是总计的，总量就是select者的特异性。 例如： 身体 = 1分 身体.wrapper = 11分 身体.wrapper #container = 111分 所以，使用这些点肯定下面的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 […]