2019/7/14
参考
CSS选择器
//标签选择器
p { clolor: red; }
//通配符选择器
* { color: #ff0000; }
//id选择器
#red {color:red;}
//类选择器
.center {text-align: center}
//交集选择器
//后代选择器
.box li { color: red }
//并集选择器
h1,h2,h3,p {
color: green;
}
//子元素选择器
div > p {
color: yellow;
}
//相邻元素选择器 +
//兄弟选择器 ~
//css属性选择器
<!-- 选择所有拥有class属性的h1标签 -->
h1[class] { color: red; }
<!-- 根据属性值选择 -->
p[id="aside"] { color: red; }
<!-- 属性名全包含 -->
p[class~="a"] { color: red; }
<!-- 属性模糊选择 -->
p[att^="val"] { color: red; }
p[att$="val"] { color: red; }
<!-- 属性模糊包含 -->
p[att*="val"] { color: red; }
//动态伪类选择器
:link :伪类将应用于未被访问过的链接。IE6不兼容，解决此问题，直接使用a标签。
:hover :伪类将应用于有鼠标指针悬停于其上的元素。在IE6只能应用于a连接，IE7+所有元素都兼容。
:active :伪类将应用于被激活的元素，如被点击的链接、被按下的按钮等。
:visited :伪类将应用于已经被访问过的链接
:focus :伪类将应用于拥有键盘输入焦点的元素。
//LoVeHAte原则
1.鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性，后面的属性会覆盖前面的属性定义；
2.鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性，后面的属性会覆盖前面的属性定义；
//UI状态伪类选择器
:enabled : 有效状态
:disabled : 非有效状态
:checked : 被选中状态
//结构伪类选择器
:root
:nth-child
:nth-last-child
:nth-of-type
:nth-last-of-type
:first-child
:last-child
:first-of-type
:last-of-type
:only-child
:only-of-type
:empty
//伪元素选择器
::first-line
::first-letter
::before
::after
//只适用于块级元素
Stylus 选择器
textarea
input
color #A7A7A7
&:hover
color #000
==>
textarea,
input {
color: #a7a7a7;
}
textarea:hover,
input:hover {
color: #000;
}
Stylus 变量
#logo
width: 150px
height: 80px
margin-left: -(@width / 2)
margin-top: -(@height / 2)
==>
#logo {
width: 150px;
height: 80px;
margin-left: -75px;
margin-top: -40px;
}
body
color: red
ul
li
color: blue
a
background-color: @color
==>
body {
color: #f00;
}
body ul li {
color: #00f;
}
body ul li a {
background-color: #00f;
}
Stylus 插值
table
for row in 1 2 3 4 5
tr:nth-child({row})
height: 10px * row
==>
table tr:nth-child(1) {
height: 10px;
}
table tr:nth-child(2) {
height: 20px;
}
table tr:nth-child(3) {
height: 30px;
}
table tr:nth-child(4) {
height: 40px;
}
table tr:nth-child(5) {
height: 50px;
}
Stylus 运算符
body
n = 5
foo: (n)em
foo: (n)%
foo: (n * 5)px
foo: unit(n + 5, '%')
==>
body {
foo: 5em;
foo: 5%;
foo: 25px;
foo: 10%;
}
Stylus 混合书写
border-radius(n)
-webkit-border-radius n
-moz-border-radius n
border-radius n
form input[type=button]
border-radius 5px
==>
form input[type=button] {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Stylus 方法
invoke(a, b, fn)
fn(a, b)
add(a, b)
a + b
body
padding invoke(5, 10, add)
padding invoke(5, 10, sub)
==>
body {
padding: 15;
padding: fn(5, 10);
}
Stylus 关键字参数
Stylus 内置方法
Stylus 多参数
box-shadow(args...)
-webkit-box-shadow args
-moz-box-shadow args
box-shadow args
#login
box-shadow 1px 2px 5px #eee
==>
#login {
-webkit-box-shadow: 1px 2px 5px #eee;
-moz-box-shadow: 1px 2px 5px #eee;
box-shadow: 1px 2px 5px #eee;
}
box-shadow()
-webkit-box-shadow arguments
-moz-box-shadow arguments
box-shadow arguments
#login
box-shadow #ddd 1px 1px, #eee 2px 2px
==>
#login {
-webkit-box-shadow: #ddd 1px 1px, #eee 2px 2px;
-moz-box-shadow: #ddd 1px 1px, #eee 2px 2px;
box-shadow: #ddd 1px 1px, #eee 2px 2px;
}
Stylus 注释
// one line
==>
/*
* multi-line
*/
==>
/*
* multi-line
*/
/*!
* multi-line buffered
*/
==>
/*
* multi-line buffered
*/
Stylus 条件
box(x, y, margin-only = false)
if margin-only
margin y x
else
padding y x
div
box(5px, 10px, true)
==>
div {
margin: 10px 5px;
}
Stylus 迭代
Stylus @import,@media,@font-face, @keyframes, @extend,@css
Stylus 自检API
