小编Jer*_*dah的帖子

我很困惑为什么这个例子不起作用:

CSS:

p {
  color: red;
}

div:not(.exclude) p {
  color: green;
}

HTML:

<div>
  <div class="exclude">
    <p>I should be red</p>
  </div>
  <div>
    <p>I should be green</p>
  </div>
</div>

最终的结果是两者<p>都是绿色的,但我预计第一个是红色的.这是一个JSFiddle.

有趣的是,我找到了三种不同的方法来使它工作:

1. <div>从HTML中删除顶级
2. 将顶级更改<div>为其他元素(例如<section>)
3. div在第二个CSS选择器的开头添加一个额外的(div div:not(.exclude) p)

另一个奇怪的方法来打破它:

4. 使用溶液2为基础,包裹另一个<div>围绕<section>

据MDN称:

此选择器仅适用于一个元素; 你不能用它来排除所有的祖先.例如,body :not(table) a仍将应用于表内的链接,因为<tr>它将与:not()选择器的部分匹配.

这是有道理的,但我认为这不会发生在这里.由于它<div class="exclude">和它的直接子之间没有任何东西<p>,它应该触发规则而不管它嵌套在里面.我错过了什么？如果有人能帮助我理解这一点,我真的很感激.

我正在使用带有gulp,gulp-jade和gulp-data的Jade模板引擎,以两种语言构建一个非常基本的单页网站.结果应该是静态HTML文档,没有进一步的服务器端或客户端处理.是否可以根据我在我中定义的语言从JSON文件加载网站内容index.jade,以及最好的方法是什么？

我当前的尝试导致错误:

gulpfile.js:

gulp.task('views', function () {
  return gulp.src('app/**/*.jade')
    .pipe($.data(function(file) {
      return require('./app/data/text.json'); // load language file
    }))
    .pipe($.jade({pretty: true, basedir: 'app/'}))
    .pipe(gulp.dest('.tmp'));
});

text.json:

{
  "de": {
    "foo": "deutsch"
  },

  "en": {
    "foo": "english"
  }
}

index_en.jade:

extends /_layouts/default.jade

var lang = "en"

block content

    h1 #{lang.foo} // load text from json

当我运行gulp时,这会导致以下错误:

Cannot read property 'foo' of undefined

我不介意将JSON拆分为每种语言的不同文件,如果这样可以使事情变得更容易,但我不知道如何从内部包含适当的文件index_en.jade.

一些背景:

我应该注意到我正在扩展一个默认布局文件(default.jade),它本身包含一些类似的东西,header.jade并且footer.jade尽可能地将模板系统保持为DRY.这些文件也需要多语言,这就是为什么我想lang="en"在my index_en.jade …