如何对CSS规则进行例外处理？

Question

如何对CSS规则进行例外处理？

4

我有一条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>

- NotRollo

这不是正确的 CSS 写法。你不能将一个“元素”应用于“另一个元素”，而是要为一个元素应用“指令”。 - Plotisateur

@Plotisateur，那你能解释一下我该怎么修复它吗？为了链接一个图片，我需要将img元素放在a元素内部，这当然会将我给a元素的CSS应用到img元素上，而这正是我想要避免的。 - NotRollo

1

我有两个想法：1）使用类代替像a和img这样的顶级元素的样式，2）为“a img”创建一个样式，并将其放置在“a”的样式之后。 - ecg8

任何应用于img标签后的a标签样式都会覆盖从a标签继承的img样式。例如，请参见此fiddle https://jsfiddle.net/d6jo5qmz/4/。特别注意光标从红色到灰色部分的变化。 - WC2

2

你可以像这样做：https://jsfiddle.net/s53nfxv2/，也许？不幸的是，除了少数例外之外，没有办法根据其后代元素来设置祖先元素的样式。 - David Thomas

显示剩余3条评论

5个回答

2

基本上，

CSS 无法影响目标元素（img）的“父”元素（a）。

因此，无法根据元素是否包含任何子级来应用 CSS，并且无法计算这些子级是否存在。

因此，在锚点 CSS 定义中，它包含图像的事实无法表达。

为了解决这个问题，我们有几个选项：

你需要添加更多的CSS特异性 (啥？, 什么？) 或者使用JavaScript/Jquery 或者 HTML5伪代码。或者负规则限定符 (:not) [MDN]（使用更高的特异性）。

这是一段英文文本，大意为：

这篇CSS Tricks文章有点旧，但是是CSS Specificity的一个很好的概念介绍。
这个链接也可能会有用。

针对你的特定情况：

David的评论适合你的要求。

我如何解决这个问题（通用概念）

我将使用:not运算符并根据需要选择某些情况来解决您的问题。

CSS：

a {
  /* Rules for ALL anchors, primarily for anchors that contain images etc. */
  background-color:none;
  color: green;
}

/* Followed by rules ONLY for anchors that do NOT contain the .img class */
/* These will overwrite the above rule on the applicable elements */
a:not(.img){
  background-color:#0078D7;
  color:white;
}

HTML：

<a href="/images/infobox.png" class='img'><img src="/images/infobox.png" width="300px"></a>
<a href='https://www.google.com'>Goooooogle me!</a>

这里是一个可工作的演示：

    a {
      background-color:none;
      color: green;
    }

    a:not(.img){
      background-color:#0078D7;
      color:white;
      font-size: 1.2rem;
      letter-spacing:0.15;

    }

<div>
    <a href="https://i.pinimg.com/474x/f6/98/d5/f698d58d7201bbdb19d66377f13a3704--german-soldier-german-army.jpg" class='img'><img src="https://i.pinimg.com/474x/f6/98/d5/f698d58d7201bbdb19d66377f13a3704--german-soldier-german-army.jpg" width="300px"></a><br><BR>
    <a href='https://www.bing.com'>Goooooogle me!</a>
</div>

- Martin

0

你想要实现的是，当 img 标签在内部时，a 具有不适用的样式。

编写：

a:not(img)

没有意义的是，一个 a 元素不能同时成为一个 img 元素。

所以你走对了方向，但用错了方法。

你需要使用类来代替使用 :not 选择器。

因此我们有：

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

在你的HTML中，只需在a标签内部有img标签时放置一个class=img：

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

- Plotisateur

你说得对，我在第一个解决方案的实现上犯了一个错误。我编辑了我的帖子来进行更正。 - Patrik

0

你可以在给元素添加 CSS 类之后使用样式标签。

<a href="google.com" class="cssClass" style="color=red" />

- osman katib

这个可以工作，但这不是应用 CSS 元素的正确方式。 - Martin

-2

非常好的代码

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="kula.css"> 
</head>
<body>
    <header>
        <div class="container-fluid bg-primary text-center">
            <div class="row">
                <div class="col">   
                    <img src="images/fehertigris.jpg" alt="Fehér Tigris" class="img-thumbnail kep" >
                </div>
                <div class="col-md-7">
                    <div class="row">
                        <h1 class="display-2 cim">Fehér tigris<h1></h1>
                    </div>
                    <div class="row">
                        <h2 class="cim">Ragadozó</h2>
                    </div>
                            
                    
                </div>
            </div>
            
        </div>
    </header>
    <main>
        <article class="bg-secondary">          
                <p>A fehér tigris a tigris (Panthera tigris) fehér színváltozata, vagyis nem taxon. 
                A természetben igen ritkán fordul elő, mivel feltűnő színe miatt a fehér egyedek 
                túlélési képessége kisebb, mint normál színezetű fajtársainak.
                </p>

                <p>A fehér tigrisek nem albínó tigrisek. Kék szemük és rózsaszín orruk van, bundájuk krémesen fehér, 
                amit csokoládé, vagy feketeszínű csíkok tarkítanak. Hosszuk körülbelül 2,4-3,1 méter, tömegük 
                hozzávetőlegesen 100–285 kg. Bundájuk ritkább, mint a szibériai tigrisé, a homokszín erőteljesebb, 
                a csíkok sötétebbek. A színüket egy velük született szokatlan génnek köszönhetik. Megfigyeltek 
                már olyan bengáli tigrist, melyeknek bundája csak részben volt fehér.
                </p>                
        </article>
        <article >
                <h3>Elterjedése</h3>
                <p>Délkelet-Ázsiában, India középső és déli részein, nagyon ritkán fordulnak elő. Az első fehér tigrist 
                1951-ben fogták be Közép-Indiában, és Mohannak nevezték el. Tőle származik a jelenleg fogságban 
                élő összes fehér tigris, mintegy 250 darab. Magyarországon négy helyen tartják: a Nyíregyházi 
                Állatparkban, a győri Xantus János Állatkertben, a felsőlajosi Magán Állatkertben és a 
                Pécsi Állatkertben.</p>             
        </article>
        <article class="bg-secondary">              
                <h3>Jellegzetességei</h3>
                <p>
                     <img src="images/kistigris.jpg" class="img-thumbnail kistigris">
                     A fehér tigris feltűnő fehér színét egy recesszív allél dupla megjelenése okozza, körülbelül minden
                    10 000. születésre jut egy fehér kölyök. Ezen fenotípus megjelenése azonban beltenyésztéssel is 
                    elérhető. A különös az, hogy csak a bengáli tigrisnél fordul elő ez a jelenség. Bár a fehér tigris
                    nagyon szép, a vadonban egyáltalán nem előnyös ez a bunda, hiszen a tigrisek egész élete azon múlik, 
                    mennyire jól tudnak elrejtőzni. Részeben ez bizonyítja, hogy a fehér színt okozó allélt létrehozó 
                    mutáció a bengáli tigris populációban történt, és innen nem terjedt át más alfajokra, hiszen a 
                    szibériai tigris környezetében sokkal kevésbé volna hátrányos a fehér szín, így sokkal kisebb 
                    volna a recesszív allél arányát csökkentő szelekciós hatás is. Ezért ha a szibéria tigris populációja 
                    rendelkezne a recesszív alléllal, akkor nagyobb arányban kellene előfordulnia a fehér egyedeknek, 
                    mint a bengáli tigris esetében, de ez nem így van, sőt néhány megkérdőjelezhető forrást kivéve nem 
                    is dokumentáltak fehér szíbériai tigrist. És mivel a fehér szín más, a szibériai tigrisénél 
                    hátrányosabb környezetben élő alfajnál nem fordul elő, feltételezhető, hogy a fehérséget okozó 
                    allél a bengáli tigrisnél jelent meg.
                </p>
        </article>
        <article class="bg-primary">
            <div class="container-fluid">
                <div class="row text-center">
                    <div class="row">   
                        <h3>További képek</h3>
                    </div>
                    <div class="row">
                        <div class="col"><img src="images/tigris01.jpg" class="img-thumbnail kep1"></div>
                        <div class="col"><img src="images/tigris02.jpg" class="img-thumbnail kep1"></div>
                        <div class="col"><img src="images/tigris03.jpg" class="img-thumbnail kep1"></div>
                    </div>
                
                    
                    
                
                </div>
            </div>                  
        </article>
    </main>
</body>

- guba zeteny

当前您的答案不够清晰，请[编辑]以添加更多细节，帮助其他人理解它是如何解决问题的。您可以在帮助中心找到有关如何编写好答案的更多信息。 - Community

这并没有回答问题。一旦您拥有足够的声望，您将能够评论任何帖子；相反，提供不需要询问者澄清的答案。- 来自审核 - AndrewF

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Patrik · Accepted Answer

当你编写代码时，应该注意以下几点：

a:not([data-attr="img"])

你是指一个带有img属性的链接。你可以使用data-attribute或class attribute并将其值设置为img。这样，你的代码就可以正常工作了。

HTML5

<a data-attr="img" href="...">

CSS

a:not([data-attr="img"])

希望您好运。

编辑：

我犯了一个错误，正确的CSS是

a:not([data-attr="img"])