相关疑难解决方法(0)

我正在尝试选择链接到没有子图像标记的外部网站的所有锚标记.如果我将图像作为链接,它会在这些图像旁边添加一些小的外部链接图标,但我不希望这样.

这是我到目前为止:

a[href^="http://"]{
  background:transparent url(..icon/external.png) center right no-repeat;
  display:inline-block;
  padding-right:18px;
}

作为额外的奖励,我如何使用"https://"链接？

我使用display:inline-block为按钮设置了mixin.我试图找到最终会使用mixim的任何类的父类,所以我可以在那里添加font-size:0px行以确保我不需要对我的HTML进行调整以避免不必要的每个按钮之间的空间.

这是一个例子......我想要的.父类接收font-size:0px行.

@mixin button() {
    display:inline-block;
    font-size: 1em;
    //other stuff to make a pretty button
    && { font-size: 0px; }
}

.parent{
    .child {
        @include button();
    }
}

我有以下代码：

<h3 class="hideIfDivEmpty">title</h3>
<div id="divId"></div>

我想当 div 为空时隐藏 h3 元素。我愿意更改 html 结构，但 h3 必须位于 div 之外，因为它的内容是动态更改的。

有没有办法在 CSS 中做到这一点？

我有这样的HTML结构:

<svg>
   <path/>
</svg>
<img/>

有没有办法做"display:block;"之类的事情.到<img />时<path />悬停,仅限CSS？

~ 适用于以下兄弟选择器.

怎么可以选择.content引用该类的类.select？

HTML

<ul>
  <li> <a>content</a> </li>
  <li> <a class="select">selected li</a> </li>
  <li> <a>content</a> </li>
</ul>
<div class="content">
  selected content
<div>

CSS(不工作)

ul > li > a.select ~ .content {
  /* something */
}

我的HTML代码看起来像那样

<div class="div1">
    <span class="sp1"></span>
    <span class="sp2"></span>
    <img class="img1" src="sss.png">
    <a class="a1" href="test.aspx">aaaa</a>
    </img>
</div>

代码还包含几个没有图像的框,css可以填充包含img标记的框

就像在这个CSS

.div1 > img {
    padding: 1px 0px 5px 0 !important;
    margin: 0;
}

但是这个css填充了图像,我想填充div

所以基本上我想选择具有特定子元素的元素。现在我有选择器来选择链的子元素：

const el = document.querySelector('#leftMenu ul > li > a:not(.active) + ul > li.active')

现在要获取我感兴趣的元素，我必须这样做：

const x = el.parentNode.parentNode;

有什么方法可以直接从选择器本身获取这个元素吗？

我有一个 CSS 规则，告诉所有链接都具有蓝色背景颜色和白色文本颜色。但是，如果我有一个带有链接的图像，则 a 规则会在背景颜色中为它们提供一点蓝色下划线。我希望这是有道理的。

长话短说，我想告诉 a 属性适用于除 img 元素之外的所有内容。这是我现有的 CSS 代码。

a {
  background-color:#0078D7;
  color:white;
}

我已经尝试添加“：not（img）”，但它没有改变任何东西。该代码就在这里。

a:not(img) {
  background-color:#0078D7;
  color:white;
}

任何帮助表示赞赏。

更新：这是我现有 HTML 的一个片段。单击图像时，它会按照预期将用户发送到图像的完整视图。

<a href="../images/infobox.png"><img src="../images/infobox.png" width="300px"></a>

我有这样的CSS。

我想根据卡中元素的数量动态地将卡的位置更改为居中或右对齐：

.section {
  display: flex;
  flex-wrap: wrap;
  background-color: #ffabaf;
  max-width: 80vw;
}

.card {
  width: 90px;
  height: 90px;
  background-color: #afafbb;
  border: 3px solid;
}

<div class="section">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

例如，当卡片元素的数量为3个或更少时，我想像这样将元素居中：

.section {
  display: flex;
  flex-wrap: wrap;
  background-color: #ffabaf;
  max-width: 80vw;
  justify-content: center;
}

.card {
  width: 90px;
  height: 90px;
  background-color: #afafbb;
  border: 3px solid;
}

<div class="section">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

当卡片元素的数量为4个或更多时，我想像这样将元素向左或向右对齐：

.section {
  display: flex; …

所以我有一个盒子：

<div class="box">Box</div>

有时这个盒子可能会被包裹在 a 标签中：

<a href="#"><div class="box">Box in an A tag</div></a>

LESS 中有没有一种方法可以专门针对作为 父级的 A 标签.box？

例如

a {
   color: red;
}

a [that is a parent of .box] {
   color: blue;
}