Question

我在选择合适的选择器时遇到困难。

让我尝试解释最好的方法：

我正在一个无法更改HTML和Javascript的项目中，它具有动态HTML和其他原因。

在项目上，<img>标签上有图像。

但是，我需要在两种布局之间更改颜色，并且正如您在HTML / CSS上所看到的那样，唯一可行的方法是隐藏<img>标签并为锚点设置背景，带有标题。

因此，现在，当我更改布局时，图像也会更改，但是还有其他一些事情，单击此图像会隐藏菜单并再次更改图像。

现在，当图像标题更改时，我需要隐藏锚点的背景。

这是单击图像之前的HTML

<div id="div-mh-ico">

<ul id="ul-icone-mh" class="icones">
    <li>
        <a href="#" class="mh-icon" title="Esconder menu horizontal" onclick="hideMenuHorizontal();">
            <img title="Esconder menu horizontal" id="imgHideMenu" src="images/ico_hidemh.png" width="16" height="16">
        </a>
    </li>
</ul>

这是我点击图片后的HTML

<div id="div-mh-ico">

<ul id="ul-icone-mh" class="icones">
    <li>
        <a href="#" class="mh-icon" title="Esconder menu horizontal" onclick="hideMenuHorizontal();">
            <img title="Exibir menu horizontal" id="imgHideMenu" src="images/ico_showmh.png" width="16" height="16">
        </a>
    </li>
</ul>

CSS

我隐藏了用于其他布局的原始图像

#ul-icone-mh li a img {
    visibility: hidden !important;
}

并设置新图像

a[title="Esconder menu horizontal"] {
box-sizing: border-box;
background-image: url(../images/ico_hidemhc.png);
background-size: 16px;
background-repeat: no-repeat;
}

当我单击它时，图像保持不变，但是当标题更改时，我需要隐藏该图像并添加另一个图像。

有什么想法我能做什么？

Answer 1

您不仅仅需要正确的CSS选择器。问题是旧的绊脚石没有父选择器。

需要更多的思考和工作。

img { height:50px; width:50px }

ul {padding: 0; list-style:none;}

.icones a::after {
  content: '';
  height:50px; width:100px;
  background-image: linear-gradient(to right, #00FF00 50%, #0000FF 50%); 
  display:inline-block;
}

.icones a {
  height:50px; width:50px;
  display:block;
  white-space:nowrap;
  overflow:hidden;
  font-size:0;
}
.icones a img[title='Esconder menu horizontal'] {
  margin-left: -50px;
}

.icones a img[title='Exibir menu horizontal'] {
  margin-left: -100px;
}

  <div id="div-mh-ico">
    <ul id="ul-icone-mh" class="icones">
        <li>
            <a href="#" class="mh-icon" title="Esconder menu horizontal" onclick="hideMenuHorizontal();">
                <img title="Esconder menu horizontal" id="imgHideMenu" src="http://placehold.it/200/ff0000" width="16" height="16">
            </a>
        </li>
    </ul>
  </div>
  <div id="div-mh-ico">
    <ul id="ul-icone-mh" class="icones">
        <li>
            <a href="#" class="mh-icon" title="Esconder menu horizontal" onclick="hideMenuHorizontal();">
                <img title="Exibir menu horizontal" id="imgHideMenu" src="http://placehold.it/200/990000" width="16" height="16">
            </a>
        </li>
    </ul>
  </div>

在这里，我将图像从16x16px增加到了50x50px，以便于观看，但原理是相同的。

对于HTML引用的两个图像，我使用了两个不同的红色阴影块。

对于两个CSS覆盖图像，为简单起见，我使用了线性渐变来制作一个块，该块是图像的高度和宽度的两倍。左半部分为绿色，右半部分为蓝色。您要为要显示的两个图像使用sprite。 Sprite的左半部分将包含“ Esconder ...”替换图像，Sprite的右半部分将包含“ Exibir ...”替换图像。

为了简化起见，我还展示了这两种情况，而不是在单击时在两种情况之间切换。

想法是将图像的左边缘设为负值，以将其移出a元素。紧随其后的伪元素包含精灵，并通过图像的宽度或图像宽度的两倍移入该空间，以显示两种情况下的不同内容。

因此，对于“ Esconder ...”案，我们有一个绿色框，对于“ Exibir ...”案，有一个蓝色框。

Answer 2

不清楚要完成什么，但是如果您要根据图像更改锚点，那么仅使用CSS根本不可能实现。

您可以基于父元素来定位子元素，但是目前不能基于CSS中子元素来定位父元素。

执行此操作的唯一方法是影响HTML呈现这两个选项的方式或使用Javascript。

对于这种选择器，有一些不同的建议规格，但尚未实现。

由于img标签具有动态标题，因此这是您可以使用CSS定位的唯一对象。如果您无法通过定位img来完成任务，那么就无法在您指定的限制内完成任务。

选择器： https://www.w3.org/TR/CSS2/selector.html

支持proposed spec用于父选择器： https://caniuse.com/#feat=css-has

Answer 3

因此，如果我理解正确，则标题为“ esconder”，您想隐藏默认图像并插入自己的图像。否则，您想显示原始图片（标题为“ exibir”时）。

您已经根据标题a正确地确定了如何定位a[title="Esconder menu horizontal"]标签。然后，您需要做的就是仅将图像排除在此标签内时将其排除，然后将其替换为您自己的图像。然后，您还需要为其指定一个明确的大小，并声明a标签，该标签现在直接具有一定大小的背景图像。像这样：

a[title="Esconder menu horizontal"] img { display: none; }
a[title="Esconder menu horizontal"] {
  box-sizing: border-box;
  background-image: url(../images/ico_hidemhc.png);
  background-size: 16px;
  background-repeat: no-repeat;
  height: 16px;
  width: 16px;
  display:inline-block;
}

您会注意到我在您现有的样式中添加了几行：

display:inline-block告诉浏览器，此元素应像内联元素一样遵循流程，但应具有块类型的语义。默认情况下，anchor标签是一个内联元素，这意味着它没有明确的大小或宽度-只是其子元素强制执行的内容。既然您已经不愿看到这个孩子，那么锚标签实际上会折叠成0x0大小。
height:16px; width:16px告诉浏览器该图像的大小。我根据您设置的background-size属性猜测了这些尺寸。由于我们已经使用display属性告知浏览器此元素具有明确的大小，因此我们现在告诉它该大小是多少。

无法获得正确的CSS选择器

3 个答案: