进阶】"/>
CSS【进阶】
目录
一、复合选择器
二、并集选择器
三、交集选择器
四、hover伪类选择器
五、VScode的Emmet语法
六、CSS属性:背景相关
七、元素显示模式
八、拓展:HTML标签嵌套规范
九、CSS三大特性
十、谷歌排错方法
一、复合选择器
1.后代选择器
作用:根据HTML标签的嵌套关系,选择父元素后代中满足条件的元素
选择器语法: 选择器父 选择器后代 { }
结果:
-
在选择器父所找到标签的后代中,找到满足选择器后代的标签
注意点:
-
后代包括:儿子、孙子、重孙子........
-
后代选择器中选择器父和选择器后代之间通过空格隔开
-
若找不到父选择器,自然后代也找不到 (因此在父多的时候,一定要看仔细了,如果实在不行就debug)
<style>
div p {color: red;//div里面的所有p标签都被渲染
}
</style>
<p>哈哈哈</p>
<div><p>嘎嘎嘎<p>顶顶顶顶 </p></p>
</div>
//若删除div标签,则都不被渲染
2.子代选择器
作用:根据HTML标签的嵌套关系,选择父元素子代中满足条件的元素
选择器语法: 选择器父 > 选择器子 { }
结果:
-
在选择器父所找到标签的儿子中,找到满足选择器子的标签
注意:
-
子,是指儿子只代表第一代儿子
-
子代选择器中,选择器父和选择器子通过 > 隔开
-
若找不到父选择器,自然子代选择器也找不到
<style>
div > p{color: red;//div标签里面的子p标签被渲染
}
</style>
<p>哈哈哈</p>
<div><p>嘎嘎嘎<p>顶顶顶顶 </p></p>
</div>
//若删除div标签,则都不被渲染
二、并集选择器
作用:同时选择多组标签,设置相同的样式
选择器语法:选择器1 , 选择器2 { }
结果:
-
找到 选择器1 和 选择器2 选中的标签,设置样式
注意:
-
并集选择器中的每组选择器之间通过 , 隔开
-
并集选择器中的每组选择器可以是 基础选择器 或 复合选择器
-
并集选择器中的每组选择器通常一行写一个,提高代码可读性
<style>
a,
span,
div > p{color: red;//以上3组选择器选中的标签都被修饰
}
</style>
<p>哈哈哈</p>
<div><p>嘎嘎嘎<p>顶顶顶顶 </p></p>
</div>
<a>点击我</a>
<span>得瑟得瑟</span>
三、交集选择器
作用:选中页面中 同时满足 多个选择器的标签
选择器语法:选择器1选择器2 { }
结果:
-
(既又原则)找到页面中 既 能被选择器1选中,又能被选择器2选中的标签,设置样式
注意:
-
交集选择器中的选择器之间是紧挨着的,没有东西分隔
-
交集选择器中如果有标签选择器,则标签选择器写在最前面
温馨提示:开发中常用于类名相同且在同一个父里面的情况
<style>p.box
</style>
<div>
<p class="box">这是'p'</p>
<div class="box">这是'div' </div>
</div>
四、hover伪类选择器
作用:选中鼠标 悬停 在标签上的标签
选择器语法: 选择器:hover {css}
注意:
-
伪类选择器选中的元素的某种状态
<style>
p:hover{color: red;//当鼠标悬停在p标签上面时,字体颜色变为红色
}
</style>
<p>悬停选择器</p>
五、VScode的Emmet语法
作用:通过简写语法,快速生成代码
语法:
-
标签选择器: div == > <div></div>
-
类选择器: .red ==> <div class="red"></div>
-
id选择器: #one ==> <div id="one"></div>
-
交集选择器: p.red#one ==> <div class="red" id="one"></div>
-
子代选择器: ul>li ==> <ul> <li></li> </ul>
-
创建多个: ul>li*2 ==> <ul> <li></li><li></li></ul>
-
内容文本: ul>li{li的内容} ==> <ul> <li>li的内容</li> </ul>
-
css属性: 例如 fw ==> font-weight: 以此类推.....
-
css快速: 例如 w200+h100 ==> width: 200,height: 100
-
以此类推.....
六、CSS属性:背景相关
1.背景颜色
属性名:background-color
属性值:
1.颜色单词
2.rgb( , , ) 、 rbga( , , , )
3. #16进制数
<style>
div{background-color: red;background-color: rgb(1,2,3);background-color: rgb(1,2,3,0.2);background-color: #ccc;
}
</style>
<div>背景学习</div>
2.背景图片
属性名:background-image
属性值:url('图片的路径')
<style>
div{background-image: url('1.jgp');
}
</style>
<div>背景学习</div>
3.背景平铺
用于盒子比背景图片大时,图片该如何填充盒子的方式
属性名:background-repeat
属性值:
repeat 默认值,水平和垂直方向都平铺
no-repeat 不平铺,最常用
repeat-x 沿着水平(x轴)方向平铺
repeat-y 沿着竖直(y轴)方向平铺
<style>
div{background-image: url('1.jgp')//盒子300x300,图片100x100,默认垂直和水平平铺了background-repeat: no-repeat;//不平铺盒子background-repeat: repeat-x;//水平平铺background-repeat: repeat-y;//竖直平铺
}
</style>
<div>背景学习</div>
4.背景位置
由于图片插入背景图片且不平铺的情况下,默认为左上角,因此需要改动位置
属性名:background-position
属性值: 水平方向位置 垂直方向位置
1.单词方位
水平方向:left,center,right
垂直方向:top,center,bottom
2.数字+px (坐标)
以左上角为圆点(0.0)
x,y坐标
注意:
-
方位和坐标可以混用&且超出了盒子的位置不显示&单词方位可以不按顺序来,数字坐标一定要按顺序
<style>
div{background-image: url('1.jgp');background-repeat: no-repeat;background-position: center center;background-position: 12px 12px;background-position: 10px bottom;background-position: left 10px;
}
</style>
<div>背景学习</div>
5.复合属性
属性名:background
属性值:由这些组合color,image,repeat,position
<style>
div{background: red url('1.jpg') no-repeat right bottom;
}
</style>
<div>背景学习</div>
6.img标签和background-image属性的区别
background-image属性作为背景图片,受到盒子限制,不覆盖
img标签作为图片,不受任何盒子限制,会覆盖
两个不是一个级别的,按照重要级: img标签 > background-image属性
七、元素显示模式
学习元素显示模式的作用:用于网页排版
1.块级元素
显示特点:
1.独占一行(一行只能显示一个)
2.宽度默认是父元素的宽度
3.高度默认由内容撑开
4.可以设置宽度和高度
代表标签:
-
div、h系列、p、ul、li、ol、li、dl、dt、form、header、nav、footer....
2.行内元素
显示特点:
1.一行可以显示多个,不独占一行
2.宽度和高度默认由内容撑开
3.不可以设置宽度和高度
代表标签:
-
span、a、b、u、i、s、strong、ins、em、del......
3.行内块
显示特点:
1.一行可以显示多个,不独占一行
2.宽度和高度默认由内容撑开
3.也可以设置宽度和高度
代表标签:
-
input、textarea、button、select......
-
特殊情况:img标签有行内块元素特点,但是Chrome调试器调试工具中显示结果是inline
4.元素显示模式转换
目的:改变元素默认显示模式,让元素符合布局要求
属性:display
属性值:
block 转换成块级元素(常用)
inline 转换成行内元素(少用)
inline-block 转换成行内块元素(常用)
<style>
div{display: inline; //将块模式转换为行内模式
}
span{display: inline-block; //将行内模式转换为行内块模式
}
input{display: block; //将行内块模式转换为块模式
}
</style>
<div></div>
<span></span>
<input type="text"></input>
八、拓展:HTML标签嵌套规范
规则:
一般将块级元素作为大容器,来嵌套:文本、块级元素、行内元素、行内块元素....
注意事项:
p标签不要嵌套div、p、h等块级元素
a标签内部可以嵌套任意元素,但是a标签不能嵌套a标签
九、CSS三大特性
1.继承性
特性:子标签有默认继承父标签样式的特点(子承父业)
常见可以继承的属性(一般是控制文字和文本的属性)
1.color
2.font家族
3.text-indent、text-align
4.line-height
5......
注意:
-
可以通过调试工具来判断样式是否可以继承
-
如果标签有浏览器赋予的样式,此时继承仍然存在,但是会失效,例如a标签浏览器赋予蓝色字体(color失效),h系列标签浏览器赋予字体大小(font-size失效)-----优先级的关系
说白了就是 浏览器赋予的>父继承的
<style>
div{color: red; //hhh和ggg都变成红色,span标签文字内容颜色被继承
}
</style>
<div>
hhh
<span>ggg<span>
</div>
2.层叠性
特性:
1.给同一个标签设置 不同 的样式,此时样式会层层叠加,共同作用在同一标签上
2.给同一个标签设置 相同 的样式,此时样式会覆盖,写在后面的覆盖前面的
注意:当样式冲突时,只有当选择器优先级相同时,才能通过层叠性判断结果,也就是说层叠性用于同一级别选择器选中的发生层叠,不同级别的选择器按照高级别选择器为主
<style>
div{color: red;font-size: 12px;
}
div{color: blue; //覆盖redfont-weight: 700; //叠加
}
</style>
<div>
大大
<div>
3.优先性(重点)
特性:不同类型选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低的选择器样式
优先级公式:
-
继承<通配符<标签<类<id<行内式
温馨提示:不需要死记优先级,按照选中的精准度判断即可,越精准的优先级越高
知识补充: !important
!important属性值具有提高该属性的优先级,可以将其提高至最高优先级
!important写在属性值的后面,分号的前面,例如color: purple !important;
!important不能提升继承的优先级,只要是继承优先级就是最低
实际开发中不建议使用!important
<style>
</style>
#study{color: red;
}
.stu{color: blue;
}
div{color: purple !important;//加了!important字体变成紫色
}
*{color: green;
}
body{color: yellow;
}
<body>
<div class="stu" id="study" style="color:black;">优先级的学习</div>
</body>
权重叠加计算
我们知道,前面我们只学习了基本选择器的优先级,还没学习多个选择器的优先级,多个选择器的优先级通过权重叠加计算来判断
场景:如果是多个选择器,此时需要通过权重叠加计算方法,判断哪个复合选择器会生效
权重叠加公式:(每一级之间不存在进位)
( 0 , 0 , 0 , 0 )
行内式个数 id选择器个数 类选择器个数 标签选择器个数
比较规则:
先比较第一级数字,如果比较出来了,之后统统不要看,以此类推第二个、第三个、第四个数字
温馨提示:!important如果不是继承,则权重最高,天下第一,也不用去使用权重计算了
<style>
//(0,1,0,1) 第一
div #one{color: orange;
}
//(0,0,2,0) 第二
.father .son{color: skyblue;
}
//(0,0,1,1) 第三
.father p{color: purple;
}
//(0,0,0,2) 第四
div p{color: pink;
}
</style>
<div class="father"><p class="son" id="one">权重叠加学习</p>
</div>
练习题1
<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;
}
//这是继承最低,!important也不生效
#father{color: green !important;
}
//这是继承最低
div#father.c1{color: yellow;
}
</style>
<div id="father" class="c1"><p id="son" class="c2">权重叠加练习1</p>
</div>
练习题2
<style>
//(0,0,0,2) //第一
div div{color: skyblue;
}
//(0,0,0,1) //第二
div{color: red;
}
<style>
<div><div><div>权重叠加练习2</div></div>
</div>
练习题3
<style>
//(0,0,0,3) //第二
div div div{color: red;
}
//(0,0,1,0) //第一
.one{color: pink;
}
<style>
<div><div><div class="one">权重叠加练习3</div></div>
</div>
练习题4
<style>
//(0.0,2,1) 第三
.c1 .c2 div{color: blue;
}
//(0,1,0,1) 优先级一样则为层叠性,第二
div #box3{color: green;
}
//(0,1,0,1) 优先级一样则为层叠性,第一
#box1 div{color: yellow;
}
</style>
<div id="box1" class="c1"><div id="box2" class="c2"><div id="box3" class="c3">权重叠加练习4</div></div>
</div>
练习题5
<style>
//继承最低,离span第一亲。按第一亲的来
div p {color: red;
}
//继承最低,离span第二亲
.father {color: blue;
}
</style>
<div class="father"><p class="son"><span>权重叠加练习5</span></p>
</div>
十、谷歌排错方法
开发中,如果写css代码的时候,需要修饰的地方没有效果,则使用谷歌调试工具去选中你要修饰的的地方,看看css样式有没有问题,然后再对应去解决问题
温馨提示:出现红色下划线一般是语法有错误
更多推荐
CSS【进阶】
发布评论