1.后代选择器
形式:父代+空格+子代
div span{
color: red;
}
2.子代选择器
只选择其子代一个
父代>子代>子代>…
div>span>p{
color: red;
}
3.并集选择器
选中多种标签设置相同格式,
选择器1,选择器2,选择器3,…
div,p,span{
color: red;
}
4.交集选择器
符合多个条件，生效。用.隔开
p.box{
color: red;
}
5.伪类选择器
选中某个元素状态设置样式
最常见的是鼠标悬停时标签的样式
格式，标签:hover
a:hover{
color: red;
text-decoration: underline;
}
.box:hover{
color: green;
}
6.超链接伪类
超链接自带蓝色和下划线样式。我们可以改变超链接的样式。
a:link{
/* 访问前 的样式*/
color: forestgreen;
}
a:visited{
/* 访问后 */
color: red;
}
a:hover{
/* 鼠标悬停 */
color: aqua;
}
a:active{
/* 点击时 */
font-weight: 30px;
}
1.继承
子类默认继承父类的文字属性，子类如果有自己样式，也不会继承父类
<style>
/* <!-- 子集默认继承父级的文字控制属性 --> */
body{
font-size: 30px;
}
</style>
<body>
/*以下三个样式继承父类body的样式*/
<div>div</div>
<p>p</p >
<span>span</span>
<!-- 有自己样式，不会继承父类 -->
<!-- a默认蓝色，不会继承父类的颜色，继承父类的字号 -->
<a href=" ">a</a >
<h1>h1</h1>
</body>
2.层叠性
<style>
div{
color: red;
font-size: 30px;
}
div{
color: green;
font-weight: 700;
}
</style>
<body>
<!-- 相同属性会覆盖，后面的覆盖前面的 -->
<!-- 不同属性会叠加，不同的css都会生效 -->
<!-- 所以这个标签是绿色 -->
<div>div</div>
</body>
3.优先级
当一个标签用了多个选择器,选中标签范围越大,优先级越低。
/* 通配符<标签<类<id<行内标签<!important */
*{
color: aqua !important;
}
div{
color: red;
}
.box{
color: green;
}
#text{
color: yellow;
}
</style>
<body>
<div class="box" id="text" style="color: violet;"> div</div>
＜/body>
4.优先级－叠加计算
<style>
/* 优先级从高到低 */
/* 行内样式，id选择器个数，类选择器个数,标签选择器个数 ，从左到右依次比较*/
/* ！important优先级最高 */
/* 继承优先级最低 */
/* 0,0,2,1 */
.c1 .c2 div{
color: blue;
}
/* 0,1,0,1 */
div #box3{
color: green;
}
/* 0,1,1,0 优先级最高 */
#box1 .c3{
color: orange;
}
</style>
<body>
<div id="box1" class="c1">
<div id="box2" class="c2">
<div id="box3" class="c3">
颜色
</div>
</div>
</div>
</body>
所以颜色为橘色
5.优先级－1
继承优先级最低
<style>
div p{
color: blue;
}
/* 继承。优先级最低 */
.father{
color: red;
}
</style>
<body>
<div class="father">
<p class="son">
文字
</p >
</div>
</body>
文字标签继承father效果，不生效，用专用的后代选择器效果div p。文字颜色为蓝色
6.优先级－2 综合
<style>
/* 0，2，0，0 */
#father #son{
color: blue;
}
/* 0，1，1，1 */
#father p .c2
{
color: black;
}
/* 0，0，2，2 */
div.c1 p.c2{
color: red;
}
/* 继承 */
#father{
color: green !important;
}
/* 继承 */
div#father.c1{
color: yellow;
}
</style>
<body>
<div id="father" class="c1">
<p id="son" class="c2">
文本
</p >
</div>
</body>
文字样式为蓝色。
使用一些快捷键可以大幅度提高工作效率
<!-- div. 类标签-->
<div class=""></div>
<!-- div# id选择器-->
<div id=""></div>
<!-- div+p 同级标签-->
<div></div>
<p></p >
<!-- div>p 父子级标签-->
<div>
<p></p >
</div>
<!-- div*3 多个相同的标签-->
<div></div>
<div></div>
<div></div>
<!-- div{niaho} 有内容的标签-->
<div>nihao</div>
1.默认平铺
div p{
width: 400px;
height: 400px;
color: red;
font-size: 30px;
/* 背景图默认平铺的效果 */
background-image: url(./demo2/2.jpg);
}
2.平铺方式(bgr)
div{
width: 400px;
height: 400px;
color: red;
background-color: pink;
background-image: url(./demo2/2.jpg);
/* 背景图平铺方式 */
/* 四个任选其一 */
/* 不写就是默认 */
/* 默认效果，平铺 */
background-repeat: repeat;
/* 不平铺 */
background-repeat: no-repeat;
/* 水平平铺 */
background-repeat: repeat-x;
/* 垂直平铺 */
background-repeat: repeat-y;
}
| 默认平铺 | repeat |
|---|---|
| 不平铺 | no-repeat |
| 水平平铺 | repeat-x |
| 垂直平铺 | repeat-y |
3.背景图位置(bgp)
div{
width: 400px;
height: 400px;
background-image: url(./demo2/3.jpg);
color: red;
background-color: pink;
background-repeat: no-repeat;
/* 背景图位置 */
/* 第一个参数代表水平位置，正数向右，负数向左 */
/* 第一个参数代表垂直位置，正数向下，负数向上 */
/* background-position: center ; 水平,垂直都居中*/
/* background-position: center 50px; */
/* background-position: 50px 50px; */
/* 关键字可以只写一个，另一个方向默认居中 */
background-position: bottom;
}
4.缩放背景图(bgs)
div{
width: 400px;
height: 300px;
background-color: pink;
background-image: url(./demo3/1.jpg);
background-repeat: no-repeat;
/* 缩放背景图 */
/* contain 如果图的宽高跟盒子宽高一样，可能会导致留白 */
/* background-size: contain; */
/* 完全覆盖盒子 cover*/
/* background-size: cover; */
/* 如果100%，表示图片宽度和图片宽度一样，图片高度按图片比例等比缩放 */
background-size: 100%;
}
| 缩放背景图 | contain |
|---|---|
| 完全覆盖背景图 | cover |
| 等比背景图 | 数字+% |
5.背景图固定(bga)
不常用
body{
background-image: url(./demo3/1.jpg );
background-repeat: no-repeat;
background-position: center top;
/* 背景图固定 */
background-attachment: fixed;
}
6.混合属性
一个背景图可用多个属性
div{
width: 1400px;
height: 1400px;
/* 无先后顺序 */
/* 属性值：背景色，背景图，背景平铺方式，背景图位置/背景图缩放 */
background: pink url(./demo3/1.jpg) no-repeat center top/cover;
}
注意:彼此通过空格相连，
背景图位置与背景图缩放由于有共同的格式，故需要用/划开
一共有三种显示模式
块元素，行内元素，行内块元素
分别div span img 为代表
div{
width: 100px;
height: 100px;
background-color: burlywood;
}
span{
width: 100px;
height: 100px;
}
img{
width: 100px;
height: 100px;
}
</style>
<body>
<!-- 块元素 -->
<!-- 独占一行 -->
<!-- 宽度默认是父级的100% -->
<!-- 添加宽高属性生效 -->
<div>div</div>
<div>div</div>
<!-- 行内元素 -->
<!-- 一行有多个，由内容撑开他的尺寸 -->
<!-- 添加宽高不生效 -->
<span>ll</span>
<span>jjjjjjjjjj</span>
<!-- 行内块元素 -->
<!-- 一行共存多个， -->
<!-- 宽高默认内容展开 -->
< img src="./demo3/1.jpg" alt="">
< img src="./demo3/1.jpg" alt="">
＜/baby>
用display
div{
width: 100px;
height: 100px;
background-color: burlywood;
display: inline-block;
}
span{
width: 100px;
height: 100px;
display: block;
}
img{
width: 100px;
height: 100px;
display: block;
}
</style>
</head>
<body>
<!-- block 块级 -->
<!-- inline-block 行内级 -->
<!-- inline 行内 -->
<!-- 块元素 -->
<div>div</div>
<div>div</div>
<!-- 行内元素 -->
<span>ll</span>
<span>jjjjjjjjjj</span>
<!-- 行内块元素 -->
< img src="./demo3/1.jpg" alt="">
< img src="./demo3/1.jpg" alt="">
</body>
| 块 | block |
|---|---|
| 行内 | inline |
| 行内级 | inline-block |
| 背景位置 | background-position |
|---|---|
| 平铺方式 | background-repeat |
| 缩放背景图 | background-size |
| 背景图固定 | background-attachment |