如何在该DIV上添加CSS

如何解决如何在该DIV上添加CSS

我有一个div以下的结构，我想在第一个.column元素上添加css，而不是其同级元素

<div class="row" id="team">
   <div class="column">
     <div class="row">
        <div class="column">
        A
        </div>
        <div class="column">
        B
        </div> 
        <div class="column">
        C
        </div>
    </div>
   </div>
</div>

我想仅在.column div之后的第一个#team中添加CSS。那么如何为该.column选择一个类而不为内部.column选择一个类？

解决方法

您将使用直接后代/子组合器“>”，它实际上是说-以直接从.column父div降级的#team类为目标。

在下面的内容中-我在目标.column div周围而不是嵌套子级.column div周围放置边框。

并且如果还有其他div是该特定div的同级兄弟，那么您也可以使用：first-child伪选择器。

#team > .column:first-child {...}

表示-以.column div（直接后代）和#team div的第一个孩子为目标。

#team > .column {
  border: solid 1px red;
}

<div class="row" id="team">
   <div class="column">
     <div class="row">
        <div class="column">
        A
        </div>
        <div class="column">
        B
        </div> 
        <div class="column">
        C
        </div>
    </div>
   </div>
</div>

,

在这种情况下，最具体的选择器是#team>.column，在父子之间使用>，以确保嵌套div的类也具有.column受影响。

#team .column在这种情况下不起作用，因为它还会选择嵌套在较低实例中的.column div。

顺便说一句：您提到“兄弟姐妹”，这有点令人困惑，因为该元素没有任何兄弟姐妹...

#team>.column {
  background: yellow;
}

<div class="row" id="team">
  <div class="column">
    <div class="row">
      <div class="column">
        A
      </div>
      <div class="column">
        B
      </div>
      <div class="column">
        C
      </div>
    </div>
  </div>
</div>

,

好的，所以我认为您可能已经混淆了HTML的“父/子”结构。

您可以使用

var gulp = require('gulp');
var sass = require('gulp-sass');
cssbeautify = require('gulp-cssbeautify');
var browserSync = require('browser-sync').create();


//compile sass
gulp.task('sass',function (done) {
    gulp.src("public/scss/*.scss")
        .pipe(sass().on('error',sass.logError))
        .pipe(gulp.dest("public/css"))
        // Use stream since browsersync only cares about when files are finished compiling
        .pipe(browserSync.reload({stream: true}));
        done();
});

//beautify css
gulp.task('css',function() {
    return gulp.src('public/css/*.css')
        .pipe(cssbeautify())
        .pipe(gulp.dest('public/css/'));
});


//watch task
gulp.task('watch',gulp.series('sass','css',function(){

    browserSync.init({
        server: './public'
    });

    gulp.watch("public/scss",gulp.series('sass'));
        gulp.watch("public/css",gulp.series('css'));
    gulp.watch('*.html').on('change',browserSync.reload);
}));

但是，我不知道您是否知道可以向HTML元素添加任意数量的类。您可以有很多类来轻松区分组件，并可以使用CSS或JS来抓取它们。

为简便起见，您可以将另一个类添加到要添加另一种单独类样式的元素中，如下所示。 然后，您可以为该类添加CSS样式。

#team > .column:first-child {
}

<div class="row" id="team"> //this is parent
   <div class="column main">       // a child that I've added the 
                                  //  class of .main to
     <div class="row">        // a grandchild
        <div class="column">  // then great grandchildren
        A                     //these are siblings
        </div>                  
        <div class="column">  //these are siblings
        B
        </div> 
        <div class="column"> //these are siblings
        C
        </div>
    </div>
   </div>
</div>