标签: css-selectors

只是玩:before和:after.

看来我不能用它/用input按钮？以为我可以使用它确实为必填字段显示星号.不一定是我要做的,只是一个选择

input {
    position: relative;
}
input:after {
    content: ''; 
    background: url(accept.png) 0 0 no-repeat; 
    height: 16px; 
    position: absolute; 
    right: -20px; 
    top: 5px; 
    width: 16px;
}

相同的代码工作正常 li

li {
    clear: both; 
    margin: 0 0 10px; 
    position: relative;
}
li:after {
    content: ''; 
    background: url(accept.png) 0 0 no-repeat; 
    height: 16px; 
    position: absolute; 
    right: -20px; 
    top: 5px; 
    width: 16px;   
}

jquery/javascript中最快的是什么？

$('#myID .myClass')

要么

$('.myClass')

什么是最好在CSS中使用？

#myID .myClass{}

要么

.myClass{}

我现在看到我应该更好地解释.抱歉!

Ofceauce ID是CSS和JavaScript中更快的选择器.但有时你需要使用类,因为有多个选择器.

例如,我有我的大HTML文档.在页面中间我有:

<div id="myID">

<a class="myClass">link1</a>

<a class="myClass">link1</a>

<a class="myClass">link1</a>

</div>

如果我想要定位所有"myClass".那么在定位类之前定位ID会更好吗？(然后我不必对整个HTML文档进行domtravel)例如:

这会是:

$( '#身份识别码').找到(" MyClass的)

要快于:

$(" MyClass的)

我错过了什么,或者这个例子的行为 - http://dabblet.com/result/gist/1716833 - 在Webkits/Fx中有点奇怪吗？

有一个带标签的输入和以下选择器:

input:hover + .target {
    background: red;
}

当你将label附件悬停input在input自身上时,会触发这种风格.甚至更多:label包含for和input包含在a 之间有区别label - 如果你input先将鼠标悬停在然后将光标直接移动到.target- 那么奇怪的悬停不会在包装版本中触发.

这只是在Firefox和Safari/Chrome中重现,但在Opera中没问题.

所以,问题是:如果在规范的某个地方描述了这个问题？我找不到任何适当的地方来描述它并告诉我们哪种行为是正确的.

我有一个像这样的结构:

<div id="holder">
    <div id="first"></div>
    <div class="box">I'm the first</div>
    <div class="box">Nothing special</div>
    <div class="box">Nothing special</div>
    <div class="box">Nothing special</div>
    <div class="box">Nothing special</div>
    <div class="box">Nothing special</div>
    <div class="box">Make this background orange!!!</div>
    <div id="last"></div>
</div>?

我需要最后一个.box元素才能拥有橙色背景.

.box:last-child{}不会工作,因为它不是最后一个孩子.除了只.box包含元素中的's' 之外,还有什么方法可以做到这一点吗？这个问题确实代表了我正在尝试做的事情,但我也想知道是否有一种方法来匹配选择器的最后一个匹配元素.

http://jsfiddle.net/walkerneo/KUa8B/1/

额外说明:

• 没有javascript
• 没有给最后一个元素一个额外的类

根据CSS文档:http: //www.w3.org/TR/CSS21/cascade.html#specificity

特性由(除其他外)定义选择器中的属性和伪类的数量来定义.

所以,我的问题是,是否可以通过一遍又一遍地重复相同的类名来提高特异性？

例如:

将

.qtxt.qtxt.qtxt.qtxt.qtxt
{
}

具有更高的特异性

.qtxt.lalgn
{
}

要么

.lalgn .qtxt//(space added to create child selector)
{
}

？

我并排放置了25%宽的物品.我clear:both在每四个元素之后添加一个.但是我需要在元素之间插入一个图形分节符.它必须在里面<ul>.为了有效,我将"section-break"(下面样本中的第一个li项)包装成一个<li>.

<ul>
    <li class="year"><h1>THIS IS A SECTION Break and 100% wide</h1></li>
    <li>This is a article and only 25% wide</li>
    <li>This is a article and only 25% wide</li>
    <li>This is a article and only 25% wide</li>
    <li>This is a article and only 25% wide</li>
</ul>

我希望每个第四个元素都是换行符,所以我用...

ul li:nth-of-type(4n+1) { clear: both; }

但是我希望li.year不受这种行为的影响,所以我尝试了这个

ul li:not(.year):nth-of-type(4n+1) { clear: both; }

现在<li>我上面的示例代码中的最后一个浮动到下一行但是不应该发生,因为第一行<li>不是浮动文章之一但包含标题.

是否可以堆叠:not和nth-of-type()选择到对方？

Android视图是否具有与CSS类选择器等效的东西？像R.id这样的东西,但可用于多个视图？我想隐藏一些视图,而不依赖于它们在布局树中的位置.

如何将特定的CSS样式应用于一组元素中的每个(为了参数)奇数元素,同时考虑一组被排除的元素？

此问题在此处复制(显示在codepen中):

http://codepen.io/houdmont/pen/VLOBBG

.foo应用了一类的一系列元素:

<a href="#" class="foo">1. Blue</a>
<a href="#" class="foo">2. Green</a>
<a href="#" class="foo">3. Blue</a>
<a href="#" class="foo bar">4. Hidden (blue)</a>
<a href="#" class="foo bar">5. Hidden (blue)</a>
<a href="#" class="foo bar">6. Hidden (blue)</a>
<a href="#" class="foo">7. Green</a>

当.bar被施加类,元件被隐藏.

我希望应用的剩余元素.foo被设置为奇数/偶数.

尝试如下:

.bar {
    display: none;
}

/**
 * This clearly doesn't work as I'd hoped it would.
 */
.foo:not(.bar):nth-of-type(even) {
    color: green;
}

理想情况下,我希望第七个元素是绿色的,即使它是一个"奇怪的"元素,如果我能够用类排除元素.bar那么它将是第四个元素,因此被认为是"偶数",将颜色设置为绿色.

这可能与CSS有关吗？

我正在努力实现以下目标：

<table>
  <tr class="odd:bg-white even:bg-slate-100">
    <td>name</td>
    <td>title1</td>
  </tr>
  <tr class="odd:bg-white even:bg-slate-100">
    <td>name</td>
    <td>title1</td>
  </tr>
  <tr class="odd:bg-white even:bg-slate-100">
    <td>name</td>
    <td>title1</td>
  </tr>
</table>

但无需在每个子标签上输入 css tr，而是在table标签上输入一次。

像这样的东西：（顺便说一句，我无法让它工作）

<table class="--odd:bg-white even:bg-slate-100 [&:nth-child(odd)]:bg-gray-400">
  <tr>
    <td>name</td>
    <td>title1</td>
  </tr>
  <tr>
    <td>name</td>
    <td>title1</td>
  </tr>
  <tr>
    <td>name</td>
    <td>title1</td>
  </tr>
</table>

现在我正在做类似的事情来实现它，但如果可能的话，我想用顺风类来完成这一切

<style lang="postcss">
    div.plan-details :nth-child(odd) {
        @apply text-zinc-500;
    }
    div.plan-details :nth-child(even) {
        @apply text-zinc-900;
    }
</style>

也尝试过这个，但没有成功。

我有这个顺风游戏示例，其中包含两个示例

我正在寻找一个跨浏览器兼容的 CSS 选择器，以防止打开模式时正文滚动。

目前，我将 CSS:has伪类与选择器一起使用：

body:has(dialog.active) {
  /* prevent scroll stuff*/
}

但是，Firefox 不支持此选择器。

是否有替代的 CSS 选择器可以达到相同的结果？请注意，我无法在页面上添加或修改任何 JavaScript 或 HTML，因此解决方案必须纯粹基于 CSS。

预先感谢您提供的任何帮助。