标签: pseudo-class

我的团队正在讨论在链接到我们网站上的各种媒体文件类型之后想要插入图标的最佳做法.示例将链接到PDF并希望插入图标图像以让用户知道它是PDF.这同样可以用于视频或音频文件.

我建议使用CSS,将一个类放在并使用:after之后创建一个元素.

我记得IE6和IE7不支持伪CSS类,但除此之外,还有更好的做法吗？

如果链接在无序列表中,我知道图标图像可用于替换子弹字符,但我不确定段落或其他HTML元素.

在这个JSFiddle中,最后一个.tab类没有得到正确的border-radius效果(右上角的圆角).

我认为我的逻辑是正确:last-child的.tab,.tabbed在这种情况下选择最后一个.

我究竟做错了什么？

CSS:

body {
    background: black;
    color: white;
    padding: 5px; }

.tabbed {
    height: 550px;
}

.tabbed .tab {
    padding: 6px 14px;
    background: rgba(255,255,255,0.25);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 0px;
    border-left-width: 0;
    float: left;
}

.tabbed .tab:first-child {
    border-radius: 3px 0 0 0;
    border-left-width: 1px;
}

.tabbed .tab:last-child {
    border-radius: 0 3px 0 0;
}

HTML:

<ul class='tabbed'>
    <li class='tab'>Menu 1</li>
    <li class='tab'>Menu 2</li>
    <li class='tab'>Menu …

我想知道如何设置css伪类,特别是悬停所以当我将鼠标悬停在元素上时,就像带有id的div一样,具有id的不同div的属性会被更改？

所以通常是这样的:

#3dstack:hover {
  listed properties
}

我不确定将它悬停在带有id的div上3dstack会有什么变化,并让它更改另一个div.

我有一些看起来像这样的HTML:

<div class="SomeContainer">
    <div class="MyClass"></div>
    <div class="MyClass"></div>
    <div class="MyClass"></div>
    <div class="MyOtherClass"></div>
</div>

我使用以下CSS

.MyClass{...}
.MyClass:last-child{box-shadow:0px 5px 10px black;}

我错误地认为 last-child在特定类的最后一个子操作但是它实际上在容器的最后一个子节点上操作(如果它是同一类).

有方便的方式吗？我知道我可以在MyClassdiv 周围添加一个包装器,并将阴影的CSS添加到包装器中,但我想知道是否有更好的方法来实现它.

谢谢.

我已经在使用SASS一段时间了,并且已经使用了@if @else等一些很好的函数.但是我在Mixin上有以下两段代码:

&:last-child { float: right; margin-right: 0; } 
&:only-child { float: left; margin-right: 0; }

这显然将这两段代码应用于我包含此特定Mixin的每个元素.有没有办法动态检查元素是否为:last-child /:only:带有@if语句的子项或任何其他方法？

就像是:

@if :last-child == True { float: right; margin-right:0; }

希望我已经解释得那么好了.

谢谢

我有一个非常奇怪的CSS问题我想解决.

我正在寻找其是否有任何HTML元素不具备display: none的(在其任何有效形式)内嵌style属性.

一些例子:

• <foo style="display:none" />
• <foo style="display: none" />
• <foo style="display : none" />
• <foo style="display : none" />
• <foo style="bar:baz; display:none" />

我一直在修补:not() 否定伪类,但下面的选择器显然是无效的:

:not([style*='display'][style*='none'])

看起来你不能在一个单独的组合中组合其他选择器 not()

我知道,即使它有效,这可能会造成类似事情的误报<foo style="border: none; display: inline" />,但我对此有点不错.

那么......除了硬编码一堆变化之外,还有什么方法可以做我想做的事情吗？

我真的不想诉诸于此:

:not([style*='display:none']):not([style*='display :none']):not([style*='display: none']:not([style*='display : none']):not([style*='display:  none'])...

更新:

comments(:not([style*=display]):not([style*=none]))中建议的选择器实际上对我不起作用

考虑以下:

1. <p></p>
2. <p style=""></p>
3. <p style="border: none;"></p>
4. <p style="border: none;"></p>
5. <p style="display: inline;"></p>
6. <p style="border: none; display: inline"></p>
7. <p style="display: none;"></p> …

我有一个css三角形:

.triangle {
    display: block;
    height: 95px;
    position: relative;
}

.triangle::before, .triangle::after {
    content: ' ';

    width: 0;
    height: 0;

    position: absolute;

    border-style: solid;
    border-color: transparent;
}

.triangle::before {
    border-width: 10px 50px 85px 50px;
    border-bottom-color: #F5EACB;

    z-index: 2;
}

.triangle::after {
    border-width: 10px 56px 94px 56px;
    border-bottom-color: #FFFFFF;

    left: -6px;
    top: -6px;

    z-index: 1;
}

我想在以下情况下更改.triangle ::的border-bottom-color属性:hover应用于.triangle类.用css可以做到这一点吗？

我觉得它看起来像这样:

.triangle:hover .triangle::before {
    border-bottom-color: red;
}

或这个:

.triangle:hover .triangle::first-child {
    border-bottom-color: red;
}

但事实并非如此.

我不想使用js解决方案,因为文档的其余部分是纯css.

我有一个div和里面div有多个p标签.我需要使用css对它们进行编号.p标签的数量可能会有所不同.

使用:nth-child()和::before我可以做这样的事情

div p:first-child::before {
  content: '1 '
}
div p:nth-child(2)::before {
  content: '2 '
}
div p:nth-child(3)::before {
  content: '3 '
}
div p:nth-child(4)::before {
  content: '4 '
}
div p:nth-child(5)::before {
  content: '5 '
}

<div>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
</div>

如果有大量元素,我该如何实现它.在css里面有没有任何关于子编号的方法:nth-child(),就像这样.

div p:nth-child(n)::before {
  content: n
}

n子号码在哪里 .我知道编号可以使用list完成,但我需要知道是否有任何方法可以在css选择器中获取子num.

当我读到CSS和HTML时,我会跨越伪元素这个词.

对于伪意味着什么,我没有找到一个很好的简短解释.有人可以向我解释一下吗？

我正在学习:not()伪类,它没有按预期工作.

我想把所有文字的颜色都换成红色.mind.由于某种原因,这不会阻止.mind元素变红.

:not(.mind) {
  color: red
}

<div class='parent'>
  <div class='child'>One</div>
  <div class='child'>Two</div>
  <div class='child'>Three</div>
  <div class='child'>One</div>
  <div class='child'>Two</div>
  <div class='child'>Three</div>
  <div class='child'>One</div>
  <div class='mind'>mind</div>
  <div class='child'>Three</div>
  <div class='child'>
    <p>First paragraph</p>
  </div>
</div>