CSS基础（复合选择器-三大特性）
Emmet语法
快速生成HTML
- 如果想快速生成多个标签，直接*n。
div*3👇
<div></div>
<div></div>
<div></div>
- 如果有父子级关系的标签，用>
ul>li👇
<ul>
<li></li>
</ul>
- 兄弟级，用+
div+p👇
<div></div>
<p></p>
- 如果生成带有类名或id名的，直接写.demo（类）或#id
p.one👇
<p class="one"></p>
- 如果生成div类名有顺序，用自增符号$
.demo$*5👇
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>
- 生成标签里面默认显示几个文字，用{}
div{nihao}*5👇
</div>
<div>nihao</div>
<div>nihao</div>
<div>nihao</div>
<div>nihao</div>
<div>nihao</div>
div{$}*5👇
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
快速生成CSS
输入对应样式字母缩写也可以
CSS复合选择器
👆基础选择器的组合
后代选择器
又称为包含选择器，可以选择父元素里的子元素。如ol里有li，ul也有，但只选用ol里的，可使用。若有多个ol，则将选中的ol作类，再选择该类去修改。
/* 先元素1再元素2，中间用空格隔开，也可以是元素3.2必须是1的子代 */
<style>
ol li{
color: blue;
}
</style>
/*以nav为例*/
<style>
.nav li{
...
}
</style>
子选择器
只能选择某元素最近一级子元素。简单理解就是亲儿子，不能选孙子。
<style>
div>a{
...
}
</style>
<body>
<div>
<a>改变部分</a>
<ul>
<a>...</a>
</ul>
</div>
</body>
并集选择器
可以选择多组标签，同时为他们定义相同的样式。
<style>
div,
p{
...
}
</style>
伪类选择器
用于向某些选择器添加特殊的效果，比如指向链接即变色（链接伪类），或选择第一个，第n个元素（结构伪类）
链接伪类
注：后期学习时发现有趣的东西，：hover前加不加空格，是有不同的效果的。
-
当:hover有空格时，元素本身不会受到改变，会改变其子元素。
-
当:hover没有空格时，元素本身受到改变，但不会影响其子元素。
如div a :hover,影响a里面的子元素
div a:hover，只影响a，不影响其子元素。
<style>
/* 未访问过的链接 */
a:link {
color: blueviolet;
text-decoration: none;
}
/* 已访问过的链接 */
a:visited {
color: cyan;
}
/* 鼠标经过时的样式 */
a:hover {
color: red;
}
/* 选择鼠标按下还没有弹起的链接 */
a:active {
color: springgreen;
}
</style>
- 确保生效，按LVHA顺序声明：link-visited-hover-active
- a链接具有默认样式，需要单独指定样式，即不可直接改变body。
：focus伪类
用于选取获得光标的表单元素
<head>
<style>
/* 把获取光标的表单元素选取出来 */
input:focus {
color: springgreen;
}
</style>
</head>
<body>
<input type="text"></input>
<input type="text"></input>
<input type="text"></input>
</body>
CSS的元素显示模式
元素（标签）以什么方式进行显示。HTML一般分为块元素和行内元素。
块元素
行内元素
行内块元素
元素显示模式转换
一个模式的元素需要另一种模式的特性，比如增加链接a的触发范围。a本身是行内元素，改成块级元素才能改变宽度或高度。
<style>
a {
width: 150px;
height: 50px;
background-color: steelblue;
/* 转换为块元素 */
display: block;
}
div {
background-color: chartreuse;
/* 转换为行内元素 */
display: inline;
}
span {
width: 100px;
height: 100px;
background-color: darkorchid;
display: inline-block;
}
</style>
<body>
<a href="#">nihao</a>
<div>我是块级元素</div>
<span>行内元素转换为行内块元素</span>
</body>
</html>
模式转换案例
做成改侧边栏。每个方块鼠标放置则变色，为链接，且要改变为块元素才能改变大小。
核心思路：
- 将链接a转换成块级元素，链接可以独占一行，并且有宽度和高度。
- 鼠标经过a给链接设置背景颜色
<style>
a {
width: 230px;
height: 40px;
font-size: medium;
text-decoration: none;
color: white;
background-color: grey;
display: block;
text-indent: 2em;
/* 单行文字垂直居中
技巧：让文字行高等于盒子高度*/
line-height: 40px;
}
a:hover {
background-color: orangered;
}
</style>
</head>
<body>
<div>
<a href="#">手机 电话卡</a>
<a href="#">电视 盒子</a>
<a href="#">笔记本 平板</a>
<a href="#">出行 穿戴</a>
<a href="#">智能 路由器</a>
<a href="#">健康 儿童</a>
<a href="#">耳机 音响</a>
</div>
</body>
CSS背景
背景颜色
背景图片
背景平铺
背景图片位置
- 参数是方位名词
如果两个值都是方位名词，则与前后顺序无关。
如果只有一个方位名词，则另一个值默认居中对齐
top一定是y轴上，center一定是x轴
div{
background-image: url();
background-position: center;
}
- 参数是精确单位
第一个一定是x，然后才是y。
如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中。 - 参数是混合单位
第一个值是x坐标，第二个值是y坐标
背景图像固定
复合写法：
background：背景颜色 地址 平铺 滚动 位置
背景色半透明
选择其他颜色的半透明则改变前三个数字。只是背景半透明，内容不透明。
CSS三大特性
层叠性
div{
color: tomato;
font-size: 12px;
}
div{
color: thistle;
}
/* 颜色为蓝，字体不覆盖 */
继承性
子标签会继承父标签的某些样式，如文本颜色和字号。
给body设置样式，body中也可以被更改。
body{
font：12px/1.5;
}
1.5为修改行高为当前行高的1.5倍，可以不跟单位。
子元素可以根据自己文字大小自动调整行高。
优先级
- 选择器相同，执行层叠性
- 选择器不同，根据权重执行
<head>
<style>
.test {
color: red;
}
div {
color: salmon !important;
;
}
#demo {
color: royalblue;
}
</style>
</head>
<body>
<div class="test" id="demo" style="color: blue;">你好</div>
</body>
先显示salmon色，因为有了！impotant，若无，则为蓝色。
注意：继承的权重为0.若父盒子有id选择，但子盒子继承id权重为0，只有当没有其他选择器时才生效。
a链接浏览器默认了一个样式，a{color bule；…}，若修改body，则a为继承，被原有样式覆盖，所以不能修改a的样式。
权重叠加
复合选择器需要计算权重叠加。会叠加，但不会有进位
<head>
/*显示红色*/
<style>
/* ul li权重0001+0001=0002 */
ul li {
color: red;
}
/* li权重为0001 */
li {
color: green;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
</ul>
</body>
434
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
