标签: pseudo-class

我使用:: after创建了一个底部箭头的div.这是HTML代码:

<div class="sidebar-resources-categories">Topics</div>
<div class="text-content">ok ok</div>

这是CSS:

.sidebar-resources-categories{
    height: 50px;
    margin-bottom: 20px;
    background-color: #e8e8e8;
    font-weight: 600;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
}
.sidebar-resources-categories::after{
    content: '';
    position: absolute;
    left: 42%;
    top: 100%;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #e8e8e8;
    clear: both;
}

结果如下:

我希望箭头位于灰色div的最底部.我不希望div和底部箭头之间有内容.你知道我怎么做吗？

如标题中所述,我如何自定义这些元素？它们似乎使用透明背景,这在大多数背景调色板上很难查看

我在IE 8-10中发现了一个令人恼火的错误,它会阻止父母的活动状态被触发.看来,如果父元素的子元素是click事件的目标,则不会触发父元素上的活动状态.

这是一个有效的例子.如果单击<li>元素内的文本,则不会更改颜色.如果单击子项<li>以外的任何位置<p>,元素将变为蓝色.

这是一个问题,因为它几乎使得css:active伪状态在IE中无用,如果该元素有任何子元素.

有没有人以前遇到过这个问题,甚至更好地找到了解决方法呢？

CSS:

button:active {
/* active css */
}

button:disabled {
  opacity: 0.5;
}

HTML:

<button disabled="disabled">Ok</button>

当我单击按钮时,浏览器会添加按钮:活动状态使其看起来像被单击(即使它被禁用).我发誓,我想:只有在按钮启用时才会添加活动状态.我错过了什么？

我一直在学习SVG并且发现了这篇内容丰富的文章.作者说

大多数CSS选择器可用于选择SVG元素.除了通用类型,类和ID选择器之外,SVG还可以使用CSS2的动态伪类(:hover,:active和:focus)和伪类(:first-child,:visited,:link和:lang)进行样式化.其余的CSS2伪类,包括那些与生成的内容有关的伪类(例如:: before和:: after),不属于SVG语言定义,因此对SVG的样式没有影响.

这位作者在网上有很多文章,看起来很有见识.然而,声明"剩余的CSS2伪类......对SVG的样式没有影响"使人们对CSS3伪类感到疑惑.以我在Codepen上生成的这个例子(FF作为浏览器).

<svg width="220" height="220" xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="10" width="100" height="100" />
    <rect x="110" y="110" width="100" height="100" />
</svg>

<style>
    svg { border: 3px dashed #999 }
    svg > rect:hover { fill: green }
    rect:nth-child(even) { fill:red }
</style>

CSS3 :nth-​​child伪类在这里工作得很好(填充第二个矩形红色).另一个例子:用另一个CSS3伪类选择器替换上面的:nth-​​child规则,a :not rule(所有其他保持不变):

rect:not([x="110"]) { fill:red } // fills the 1st rectangle red

我找到了这个参考,但它对我没有帮助.

CSS3伪类与SVG元素的兼容性是什么？

注意:我假设这些伪类规则仅适用于SVG 可渲染元素.

我将很多 CSS 变量分配给 :root 但这些变量在我的 :before 元素中无法访问。我在网上找不到任何关于此的信息。

当检查 :before 元素的父元素时，我在谷歌开发工具的样式面板底部看到所有 :root 变量。请参阅下面的屏幕截图。

我的CSS

    &__meta {
    padding: 10px 0;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 14px;
    color: var(--text-color);

    &-author {
        margin-right: 15px;
    }
    &-primary-cat:before {
        content: '';
        display: inline-block;
        width: 5px;
        height: 5px;
        background-color: var(--text-color);
        border-radius: 50%;
        vertical-align: middle;
        margin-right: 5px;
    }
}

Chrome 开发工具父 CSS

Chrome 开发工具 :before CSS - 除背景颜色之外的所有样式均按预期应用于 :before 元素

我有如下结构:

<div class="wrapper"...>
   <a href="#"...>blah</a>
   <div class="post"...>stuff</div>
</div>

它会在动态页面中重复几次.我想用两种颜色替换div类"post"的背景颜色,但CSS的nth-child伪类似乎只适用于直接顺序的项​​目.

有没有办法(CSS,Javascript,jQuery等),我可以交替div背景颜色？

根据W3 Schools,声明锚元素上的伪类的顺序非常重要.

为什么是这样？还有其他人吗？

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

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

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

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

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

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

我有一个类似于下面在SharePoint站点中说明的表.我无法修改表,因为它是动态生成的,但我可以添加外部CSS来覆盖它的样式.我需要只显示第二列并隐藏第一,第三和第四列.

隐藏第一列的伪类是

table#student tr td:first-child { display: none; }

请帮我伪类或任何其他技巧隐藏第三和第四列.

<table id="student">
    <tr>
        <td>Role</td>
        <td>Merin</td>
        <td>Nakarmi</td>
        <td>30</td>
    <tr>
        <td>Role</td>
        <td>Tchelen</td>
        <td>Lilian</td>
        <td>22</td>
    </tr>
    <tr>
        <td>Role</td>
        <td>Suraj</td>
        <td>Shrestha</td>
        <td>31</td>
    </tr>
</table>