小编Zee*_*atz的帖子

我试图用CSS创建粘性效果(没有svg).一切顺利,但我的父容器有一个contrast filter,我不能在我的子元素上使用颜色(对比度过滤器改变颜色).

是否有人知道只使用CSS制作此效果的基本方法,或者反转对比度滤镜以在子元素上获得正确的颜色？

我的代码:

body{
  background: #fff;
}

.blobs {
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background: #fff;
  width:400px;
  height:200px;
  margin:auto;
  filter:contrast(20);
  -webkit-filter:contrast(20);
}

.blob {
  background:black;
  width:100px;
  height:100px;
  position:absolute;
  left:50%;
  top:50%;
  margin-top:-50px;
  margin-left:-50px;
  border-radius:100%;
  transition: cubic-bezier(0.82, 0.1, 0.24, 0.99) 2.5s;
  -webkit-transition: cubic-bezier(0.82, 0.1, 0.24, 0.99) 2.5s;
  box-shadow: 0 0 30px 10px black;
}

.blobs:hover .blob:first-child {
  transform:translateX(-70px);
}

.blobs:hover .blob:last-child {
  transform:translateX(70px);
}

<div class="blobs">
  <div class="blob"></div>
  <div class="blob"></div>
</div>

当我为子元素着色时:

body{
  background: #fff; …

我不明白为什么以下代码没有期望的行为:

    .toggle {
      color: red;
    }
    
    :not(.list) .toggle {
      font-weight:bold;
    }

  <div class="container">
      <a href="#!" class="toggle">Toggle</a>
      <ul class="list">
        <li><a href="#!">Link 1</a></li>
        <li>
          <div class="container">
            <a href="#!" class="toggle">SubToggle</a>
            <ul class="list">
              <li><a href="#!">SubLink 1</a></li>
              <li>
                <a href="#!">SubLink 2</a>
              </li>
              <li><a href="#!">SubLink 3</a></li>
            </ul>
          </div>
        </li>
        <li><a href="#!">Link 3</a></li>
      </ul>
    </div>

我认为使用:not()会导致仅将"粗体"应用于主"切换"链接,而是对所有红色应用"粗体".为什么？

请注意,此代码嵌套了相同的类名,我不希望使用不同的css类来定位特定级别,我想仅使用后代选择器和其他运算符来定位元素

这里还有一个直接尝试的jsFiddle.

我试图将我的所有样式(css,scss)文件合并到一个文件中并进行编译.原因是因为存在基于另一个文件中的变量的文件,但现在我无法创建源图.

我究竟做错了什么？有更好的解决方案吗？

const gulp = require('gulp');
const debug = require('gulp-debug');
const sass = require('gulp-sass');
const concat = require('gulp-concat');  
const uglify = require('gulp-uglify');  
const csso = require('gulp-csso');
const autoprefixer = require('gulp-autoprefixer');
const addsrc = require('gulp-add-src');
const sourcemaps = require('gulp-sourcemaps');
const ngmin = require('gulp-ngmin');
const browserSync = require('browser-sync');

gulp.task('default', ['browser-sync'], function(){
    gulp.watch('app/**/*.scss', ['styles']);
    gulp.watch('app/**/*.js', ['app-scripts']);
    gulp.watch('app/components/**/*.html', ['components-html']);
    gulp.watch('app/views/**/*.html', ['view-html']);
    gulp.watch('app/index.html', ['copy-index-html']);
    gulp.watch('app/json/**/*.json', ['copy-jsons']);
});

gulp.task('styles', () => 
    gulp.src([
        'app/style/vendors/*.css',
        'app/style/utils/*.scss',
        'app/style/base/*.scss',
        'app/style/layout/*.scss',
        'app/components/**/*.scss',
        'app/views/**/*.scss'
    ])
    .pipe(concat('styles.scss'))
    .pipe(sass())
    .pipe(autoprefixer())
    .pipe(csso())
    .pipe(concat('styles.min.css'))
    .pipe(gulp.dest('dist/style'))
); …

我需要在不使用CSS的情况下完成一个站点.

一切顺利但我不知道如何用纯JS改变我的字体系列.

有谁知道如何使用JS导入字体？

谢谢!

我不知道为什么但是ngRepeat data-ng-animate=2在我的元素上添加了attr.为什么会这样？

我写这个:

 <div class="aip-main-con-item animate-repeat"
      ng-repeat="event in events | 
      filter : searchEvent | 
      orderBy : 'date'">
 </div>

我明白了:

<div class="aip-main-con-item animate-repeat ng-scope"
     ng-repeat="event in events |
     filter : searchEvent |
     orderBy : 'date'" 
     data-ng-animate="2"
     style="">
</div>

谢谢!

我有scss的多重转换问题@mixin.我试图@mixin用1-5种不同的属性创建动态转换.当我正在处理下面的代码时,会出现此错误:

错误:Mixin转换需要1个参数但通过3个参数.在style.scss的第758行,在style.scss的第758行的"transition"中使用--trace进行回溯.

这是我的代码:

@mixin:

@mixin transition($x){
    transition: $x;
    -webkit-transition: $x;
    -moz-transition: $x;
    -ms-transition: $x;
    -o-transition: $x;
}

@包括:

@include transition(visibility 0s ease 0.2s, opacity 0.2s ease, transform 0.3s ease);

我用这个黑客想出来了,但对我来说它看起来像是一个非常不洁净的解决方案:

@include transition(visibility 0s ease 0.2s + "," + opacity 0.2s ease + "," + transform 0.3s ease);

有没有更好的方法呢？

我在另一个解决方案中搜索了很长时间，以title=""根据:hover选择的属性制作工具提示。

我希望找到一种使用title=""属性并content:""动态更改我的属性的方法。

* {
   -webkit-font-smoothing: antialiased;
   font-family: "Trebuchet MS", Helvetica, sans-serif;
}

div {
  width: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}

button {
  cursor: pointer;
  position: relative;
  display: inline-block;
  background: rgb(25, 181, 206);
  color: #fff;
  padding: 5px 15px;
  border: none;
  font-size: 1em;
}
    
button::after {
  content: "I'm a css tooltip!"; /* <= dynamically title content …