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;
}

<强> FIDDLE

旁注：不是使用*选择器 - 您可以定位特定的子元素，或者更好 - 为子元素添加类名

<小时/> 那么为什么原来的css没有 - 正如问题中所述 - 工作？

：not（）伪类只能接受simple selector。

来自规范：

  

一个简单的选择器是一个类型选择器，通用选择器，    attribute selector ，类选择器，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');
}

这是一个 demo 来说明这一点。

Answer 2

我认为解决问题的关键是使用adjacent sibling selector。您可以按照以下原则选择元素：

.sibling#one + .sibling#two {
    /* style every .sibling#two that is preceded by a .sibling#one */
}

我做了一个快速示例here，使用边框代替带有线条和div的图像作为按钮。我希望这会有所帮助，祝你好运！

Answer 3

如果您只想要图标前后的行，而不是使用通配符*，然后尝试取消选择按钮，只需单独定位图标即可。假设图标具有类.class

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

或如果图标为<img>，则相应的css为

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

问题已解决（因为您还没有提供更多信息而无法更具体）。