<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.parent {
border: 1px solid red;
height: 60px;
margin: 5px;
}
.son {
border: 1px solid red;
height: 20px;
}
.descendant {
border: 1px solid red;
height: 10px;
background-color: green;
}
/*
元素选择器:其中E是元素,也是选择器(E表示element元素的意思)
E {...}
=============================================================
class选择器:其中E是元素选择器,E.class是元素选择器和类选择器的复合选择器
E.class {...}
比如:div.son
=============================================================
属性选择器:E表示元素选择器
E[attr=value]或E[attr]
比如:div[id=abc]
=============================================================
子选择器:其中selector1、selector2都是有效的选择器
selector1>selector2 {...}
*/
.parent>div.son {
background-color: yellow;
}
</style>
</head>
<body>
<div class="parent">
<div class="son">
<div class="descendant"></div>
</div>
<div class="son"></div>
</div>
</body>
4种属性可以相互组合达到想要的效果。
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.parent {
border: 1px solid red;
height: 60px;
margin: 5px;
}
.son {
border: 1px solid red;
height: 20px;
}
.descendant {
border: 1px solid red;
height: 10px;
background-color: green;
}
/*
元素选择器:其中E是元素,也是选择器(E表示element元素的意思)
E {...}
=============================================================
class选择器:其中E是元素选择器,E.class是元素选择器和类选择器的复合选择器
E.class {...}
比如:div.son
=============================================================
属性选择器:E表示元素选择器
E[attr=value]或E[attr]
比如:div[id=abc]
=============================================================
子选择器:其中selector1、selector2都是有效的选择器
selector1>selector2 {...}
*/
.parent>div.son {
background-color: yellow;
}
</style>
</head>
<body>
<div class="parent">
<div class="son">
<div class="descendant"></div>
</div>
<div class="son"></div>
</div>
</body>
</html>
transform:2D转3D
translate(tx, ty) | |
该函数设置html组件横向移动tx距离,纵向移动ty距离。如果ty省略那么,默认是0。 | |
translate(tx) -> translateX(tx) | |
translate(ty) -> translateY(ty) |
rotate(angle)单位是deg | |
该函数设置html组件顺时针旋转angle角度 |
scale(sx, sy); | |
该函数设置设置HTML组件上横向缩放比为sx,纵向缩放比为sy,如果只写一个参数,sy省略,默认是1。 | |
另外如果你写scale(sx) 也可写作 scaleX(sx) | |
scale(sy) 也可写作scaleY(sy) |
skew(sx, sy) | |
该函数设置html组件沿着x轴倾斜sx角度,沿着y轴倾斜sy角度 | |
skewX(sx) skewY(sy) |