发表于: 2018-08-28 20:59:45

1 799


Today

1.解决一个 问题 

input 一个radio 的时候没有设置好 name  , 在选中的时候出现 可以多选 的问题

解决 : 相同目录下的radio 设置相同的name


2.解决 选中 radio 的同时选中 前面的小圆点

input:checked+span {
border: #1d7ad9 solid 0.4rem;
}

+  是css的相邻选择符。

关系选择符只有四种,是 空格  + >  ~

:在伪类选择器里会用


‘+’选择器则表示某元素后相邻的兄弟元素,也就是紧挨着的,是单个的。而‘~’选择器则表示某元素后所有同级的指定元素,强调所有的。


CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解


3.sass 的两种源码后缀 sass 和 scss  .scss 和css 比较相似, .sass 是一种类 ruby 的写法.

对于一个 Sass 用户,只需要理解 Sass 扩展部分如何工作的,就能完全理解 SCSS。大部分扩展,例如变量、parent references 和 指令都是一致的;唯一不同的是,SCSS 需要使用分号和花括号而不是换行和缩进


4.安装sass 发现 this 

因域名备案问题,.org 域名无法继续提供 RubyGems 镜像服务,我们提供 .com 代替 .org 的域名,其他一切不变!!

防火墙可真他妈很棒棒呢

安装sass 和compass 

Compass是Sass的工具库。 
Sass本身只是一个编译器,Compass在它的基础上,封装了一系列有用的模块和模板,补充Sass的功能。他们之间的关系,有点想JavaScript和jQuery的关系。


5.在vscode 上安装sass编译插件 easysass,修改保存路径要改成绝对路径才能用


6.sass的嵌套:

#content {
article {
h1 { color: #333 }
p { margin-bottom: 1.4em }
}
aside { background-color: #EEE }
}


其实和前面媒体查询 差不多 ,只要写一个@media( 括号内要求一致的 属性名放在同一个大花括号){}



但是有些场景下不行,比如你想要在嵌套的选择器 里边立刻应用一个类似于:hover的伪类。为了解决这种以及其他情况,sass提供了一个特殊结 构&。在:hover前的空格表示父元素下所有子元素hover 后都产生效果

7.父选择器的标识符&;

article a {
color: blue;
&:hover { color: red }
}

&指代 article a

编译后 article a:hover   前面不会产生空格


8.群组选择器嵌套:

.container {
  h1, h2, h3 {margin-bottom: .8em}
}

9.子选择器嵌套:

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }  dl > {    dt { color: #333 }    dd { color: #555 }
  }  nav + & { margin-top: 0 }
}

10.属性嵌套:

nav {
border: 1px solid #ccc {
left: 0px;
right: 0px;
}
}


11. sass变量操作:
sass 的语法是css3的超集

1.直接操作变量,即变量表达式

2.通过函数: a 跟代码块无关的内置函数,称为 functions  (极少使用)

                   b.可重用代码块  

mixin  @include 调用 只是放在那,用的时候@ include 直接拿来用


 @extend 调用 是一种继承 

.error {
color: red;
}
.serious-error {
@extend .error;
border: 2px ;

}

如果只使用 error的部分样式, 吧 .error 换成 %error


12.分析任务4页面,吧相同或相似 样式的放在一个@mixin 对于 需要变动的地方引用$具体引入块时改变参数即可

        完成任务4 的改写


Tomorrow

1.任务12


2.继续学习sass  less

Gain

1.选择器 兄弟选择器

2.sass 熟悉

3.

/* 我是标准注释 */ 

// 我是静默注释

标准注释大多数情况下(一种例外:设置输出风格为compressed)是会生成到最终的CSS中的,而静默注释的话,只是Sass的注释,是不会被生成到CSS文件中的。

4.placeholder属性是css3中新增加的属性,IE9和Opera12以下版本的CSS选择器均不支持占位文本

不同浏览器下修改placeholder 属性 ,比如这里修改了颜色:

::-webkit-input-placeholder {
color: #999999;
}
:-moz-placeholder {
color: #999999;
}
:-ms-input-placeholder {
color: #999999;
}


5.这里又遇到 单冒号 和双冒号 :



Pain

1. 基本查资料解决了


返回列表 返回列表
评论

    分享到