Question

div.entry-content:not(body.single div.entry-content)
{
    font-family: 'Droid Sans', sans-serif;
    margin-top:10px;
    line-height: 114%;
    font-size:15px;
}

上面的css根本不会影响任何元素....我希望div.entry-content中body个single元素的类型与其他元素的格式不同div.entry-content元素..

body.single div.entry-content
{}

和

div.entry-content
{}

似乎工作得很好......但是

div.entry-content:not(body.single div.entry-content)
{}

似乎不是

Answer 1

您需要重写选择器行以按照您的预期方式工作：

body:not(.single) div.entry-content {
  font-family: 'Droid Sans', sans-serif;
  margin-top:10px;
  line-height: 114%;
  font-size:15px;
}

This CSS Tricks page详细阐述了这样一个事实：你只能在:not伪类中使用一个简单的选择器，它们在脚注中定义如下：

一个简单的选择器被分类为类型选择器，通用选择器，属性选择器，类选择器，ID选择器或伪类选择器。

Answer 2

我希望div.entry-content中存在的body个元素类single的样式与其他类型不同 div.entry-content元素

如果您真的想使用:not()选择器，那么您需要执行以下操作：

＆＃13;

body:not(.single) div.entry-content {
  font-family: 'Droid Sans', sans-serif;
  margin-top: 10px;
  line-height: 114%;
  font-size: 15px;
  /* demo*/
  background: red
}

＆＃13;

<body>
  <div class="entry-content">test
  </div>
</body>

＆＃13;

single

中的课程body

＆＃13;

body:not(.single) div.entry-content {
  font-family: 'Droid Sans', sans-serif;
  margin-top: 10px;
  line-height: 114%;
  font-size: 15px;
  /* demo*/
  background: red
}

＆＃13;

<body class="single">
  <div class="entry-content">test
  </div>
</body>

＆＃13;

在MDN中查看有关:not

的更多信息

否定CSS伪类:not(X)是一种功能符号以简单的选择器X为参数。它匹配一个元素没有参数表示。 X不得包含另一个否定选择器。

Answer 3

＆＃13;

body:not(.single) div.entry-content {
    font-family: 'Droid Sans', sans-serif;
    margin-top: 10px;
    line-height: 114%;
    font-size: 20px;
    color:white;
    background:green;
}

＆＃13;

  <div class="single">
         this is the single div
         <div class="entry-content">
           write some text inside entry content
         </div>
     </div>

＆＃13;

：not（）不能按预期工作

3 个答案: