css显示图标的分隔符图标

Question

我有一个类似下面的场景,在图标(十字符号)之前和之后显示间隔(线),而不是在按钮之前和之后显示间隔(线)(带取消文本).我怎样才能做到这一点......

我的Css文件是

.Container > *:first-child::before,
.Container > *::after 
{
    display: inline-block;
    content: url('../Content/Images/Line.png');
}

1. 我的所有图标,按钮(带取消文本)都在容器div中

2. 我们可以限制按钮前后的显示行(使用取消文本)吗？

我尝试了下面的代码,但没有用.

.Container > *:not(input[type="button"]):first-child::before,
.Container > *:not(input[type="button"])::after 
{
    display: inline-block;
    content: url('../Content/Images/Line.png');
}

Answer 1

编辑:

假设这样的演示标记:

<div class="container">
    <span>x</span>
    <span>x</span>
    <span>x</span>
    <input type="button" value="Cancel" />
    <input type="button" value="Cancel" />
    <span>x</span>
    <span>x</span>
    <span>x</span>
</div>

..您可以使用以下CSS来实现您的需求:

CSS

.container > *:not([type="button"]):first-child::before,
.container > *:not([type="button"])::after 
{
    /*content: url('../Content/Images/Line.png');*/
    content: ''; /* if line image is used, this is not necessary */
    background: #555; /* if line image is used, this is not necessary */
    display: inline-block;
    width: 1px;
    height: 100%;
    vertical-align: middle;
    margin: 0 8px;
}

小提琴

旁注:代替使用*选择器 - 您可以定位特定的子元素,或者甚至更好 - 为子元素添加类名

那么为什么你的原始CSS(如问题中所述)不起作用？

:not()伪类只能接受一个简单的选择器.

从规格:

简单的选择器是类型选择器,通用选择器, 属性选择器,类选择器,ID选择器或伪类.

因此,虽然非伪类可以接受如下的属性选择器::not([type="button"]),在您的代码中,您已将它与元素选择器组合 - 即.input---- :not(input[type="button"])- 这就是代码不起作用的原因.

所以这将有效:

.Container > *:not([type="button"])::after 
{
    display: inline-block;
    content: url('../Content/Images/Line.png');
}

..但这不会:

.Container > *:not(input[type="button"])::after 
{
    display: inline-block;
    content: url('../Content/Images/Line.png');
}

这是一个演示来说明这一点.