【问题标题】：How to make exceptions to CSS rules?如何对 CSS 规则进行例外处理？
【发布时间】：2018-11-10 17:28:07
【问题描述】：

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

长话短说，我想告诉 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 的方式。您不会将element 应用于another element，而是将instructions 应用于元素。
@Plotisateur 那你能解释一下我将如何解决它吗？要链接图像，我需要将 img 元素放在 a 元素中，这当然会将我给 a 元素的 CSS 应用到 img 元素中，这是我想要阻止的。
所以如果我理解你，你有类似<a href=""><img src=""></a> 的东西，你希望你的a 的样式不适用于img 里面的样式？你能提供你的 HTML 吗？
我有两个想法：1）使用类而不是像 a 和 img 这样的顶级元素的样式，2）为“a img”创建一个样式并将其放在“a”的样式之后
你可以这样做：jsfiddle.net/s53nfxv2 也许？不幸的是，除了少数例外，没有办法根据其后代设置祖先元素的样式。

标签： html css

【解决方案1】：

当你写作时

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

您的意思是一个带有名为 img 的属性的链接。您可以做的是使用值为 img 的数据属性或类属性。您的代码将起作用：

HTML5

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

CSS

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

祝你好运。

编辑：

我弄错了正确的 CSS 是

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

【讨论】：

我都试过了，没有明显的变化。不过，谢谢。
您好，在您发布的 HTML 代码中，没有“img”值的属性。我刚读了一个href。

【解决方案2】：

基本上，

CSS 可以不影响目标元素 (img) 的“父”元素 (a)。

因此，CSS 不能根据元素是否（或不）包含任何子元素应用于元素，并且不能计算这些子元素中的任何一个是否存在。

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

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

您需要添加more CSS Specificity (huh?, what?)
或use Javascipt/Jquery
或HTML5 pseudo code。
或否定规则限定符 (:not) [MDN]（上面使用了更多的特异性）

This CSS Tricks Article 有点老了，但它是对 CSS 特定性的一个很好的概念介绍。
This link 也可能有用。

针对您的具体案例：

David's comment 符合要求。

我如何解决问题（一般概念）

我会使用: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>

【讨论】：

【解决方案3】：

您想要实现的是为a 设置一个样式，当img 标签在里面时不适用

写作

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>

【讨论】：

你说得对，我在第一个解决方案的实施上犯了一个错误。我编辑了我的帖子以更正它。

【解决方案4】：

你可以在给一个元素一个css类之后使用样式标签..

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

【讨论】：

这可行，但这不是 CSS 元素应该应用的方式

【解决方案5】：

非常好的代码

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

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。
这并没有提供问题的答案。一旦你有足够的reputation，你就可以comment on any post；相反，provide answers that don't require clarification from the asker。 - From Review