侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130555 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

css – 如何选择一个类“A”,但不是类“B”的div?

2022-06-30 星期四 / 0 评论 / 0 点赞 / 20 阅读 / 2124 字

我有一些div: <div class="A">"Target"</div><div class="A B">"NotMyTarget"</div><div class="A C">"Not

...我有一些div:

<div class="A">"Target"</div><div class="A B">"NotMyTarget"</div><div class="A C">"NotMyTarget"</div><div class="A D">"NotMyTarget"</div><div class="A E">"NotMyTarget"</div>

有没有一个CSS选择器,将得到我的div包含Target,但不是包含NotMyTarget的div?

解决方案必须在IE7,IE8,Safari,Chrome和Firefox上工作

编辑:到目前为止,尼克是最近的。它笨拙,我不喜欢的解决方案,但至少它的工作原理:

.A{   /* style that all divs will take */}div.B {  /* style that will override style .A */}
.

解决方法

. 您可以使用属性选择器来匹配只有一个类的div:
div[class=A] {  background: 1px solid #0f0;}

如果要选择另一个具有多个类的div,请使用引号:

div[class="A C"] {  background: 1px solid #00f;}

某些浏览器不支持属性选择器语法。像往常一样,“一些浏览器”是IE 6及以上的委婉语。

参见:http://www.quirksmode.org/css/selector_attribute.html

完整示例:

<!DOCTYPE html><html><head>  <style>    .A { font-size:22px; }    .B { font-weight: bold; border: 1px solid blue; }    .C { color: green; }    div[class="A"] {      border: 1px solid red;    }    div[class="A B"] {      border: 3px solid green;    }  </style></head><body>  <div class="A">"Target"</div>   <div class="A B">"NotMyTarget"</div>   <div class="A C">"NotMyTarget"</div>   <div class="A D">"NotMyTarget"</div>   <div class="A E">"NotMyTarget"</div> </body></html>

编辑2014-02-21:四年后::现在没有广泛提供,虽然在这个特定情况下详细:

.A:not(.B):not(.C):not(.D):not(.E) {  border: 1px solid red;}

不幸的是,这不工作在IE 7-8中指定的问题:http://caniuse.com/#search=:not

. ..

广告 广告

评论区