标签: pseudo-class

我试图在自动生成的HTML文档中隐藏以下元素:

  <p id="sitspagedesc" class="sitspagedesc">

    </p>

在某些页面中,<p>标记将包含内部值,但在其他页面中,它只能包含空格,如示例中所示.我需要找到一种隐藏它的方法,以便仅使用CSS隐藏它,因为更改HTML不是一种选择.

我试图隐藏它使用

.sitspagedesc:empty
{
display:none;
}

但是这不起作用,大概是因为元素包含的空格.

有没有人有什么好主意？

谢谢 :)

我正在尝试用css创建圆圈,但是之前不要使用伪类::

这应该是那样的(对于地铁站列表):

.subway-item{
 // css for text item going after circle
 }
.subway-item::before{
   width:15px;
   border-radius: 15px;
   -moz-border-radius: 15px;
   -webkit-border-radius: 15px;
   background-color:#69b6d5;
}

我知道可以在文本之前使用附加元素或使用图像.但是想知道是否可以在::之前使用这些属性

将样式:before和:after伪类应用于样式化组件的正确方法是什么？

我知道你可以使用

&:hover {}

将:hover伪类应用于样式化组件.

这是否适用于之前和之后的所有伪元素？

我已经尝试使用&:before和&:after策略一些相当复杂的例子,我不确定我的尝试是否工作,因为我的例子有问题,或者它不能像那样工作.

有人对此有一些了解吗？谢谢.

有什么方法可以让我的:not()伪类在Internet Explorer 7/8中工作？是否有任何javascript可以做与CSS3相同的事情:not()？

我有一些以下的HTML代码:

<ul>
    <li>number 1</li>
    <li>number 2</li>
    <li>number 3</li>
    <li>number 4</li>
    <li>number 5</li>
    <li>number 6</li>
    <li>number 7</li>
    <li>number 8</li>
    <li>number 9</li>
    <li>number 10</li>
</ul>

如何使用CSS3伪类做任何li这是不是第一个元素或最后一个有一个background-color的tomato的例子吗？似乎我可以使用:not选择器.

CSS语言伪类允许我们为不同的语言指定不同的样式,如下所示:

html:lang(en) .foo { ... }

但是,这在IE7中不起作用,所以我一直在使用属性选择器:

html[lang="en"] .foo { ... }

他们似乎做同样的事情,但有任何微妙的差异吗？如果没有,为什么CSS甚至有一个语言伪类,当属性选择器做同样的事情？

我想制作一个菜单,其中每个项目用·分隔.要实现这个我用

menu li:before {
    content: "· ";
}

这是膨胀,但它也会在第一个项目之前生成一个点.因此,我也想使用:first-child伪类.我可以这样做吗？

我想知道如何用更少的css做以下事情:

.btn {
  color : black;
}

.btn:hover {
  color : white;
}

.btn-foo {
  .btn;
  &:hover {
    .btn:hover;
  }
}

当然这只是一个例子,需要指出的是,如果有任何方法来扩展伪类,以避免:hover在我需要的地方重新键入伪类的属性.我知道我可以为此创建一个mixin,但我想知道我是否可以避免它.

谢谢

我正在尝试将<div>后续的样式设置为空<ul>.

这是我正在测试的简单代码:(操作系统是win7)

基本的jsFiddle DEMO

HTML:

<button class="btnAdd">add new LI</button>
<button class="btnRemove">remove last LI</button>
<ul></ul>
<div>Should be red if UL is empty</div>

CSS:

ul:empty + div {
    color:red;    
}

jQuery :(与问题无关,仅用于测试目的)

$('.btnAdd').on('click', function () {
    $('ul').append('<li>LI</li>');
});

$('.btnRemove').on('click', function () {
    $('ul').find('li').last().remove();
});

预期行为:

在所有主要的浏览器,添加元素时<ul>,空的风格集<ul>以下<div>不宜应用.删除所有时<li>,应将样式重新应用于目标<div>.

目前的行为:

• Firefox处理它没有问题,得到预期的结果.
• 当UL不再为空时,Chrome会删除后续DIV的红色,但当UL再次为空时不会重新应用它(从UL中删除所有LI)
• IE10/11:empty默认只应用CSS 伪类,不对任何添加或删除的内容做出反应

谷歌搜索它,我发现了一些解决方法,但大多数似乎已过时,没有解决问题,至少我找不到.

对于chrome,我发现:empty为UL 设置一个CSS规则修复它,但实际上我不知道发生了什么:(ul:empty {}你这是一个空的CSS规则吗？!)< …

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