三、还在问频繁使用class和id烦恼吗?一篇文章教你——html5教程 前段大G > 首页 > html5 css3教程 >
一、选择器进阶
后代选择器：空格（可以选择后很多代，儿子，孙子，重孙子都可）
语法：选择器1 选择器2{css}
<head>
<style>
div p {
color:red;
}
</style>
</head>
<body>
<div>
<p>div的儿子p标签</P>
</div>
</body>
子代选择器：>（只能选中儿子，即后一代）
语法：选择器1>选择器2{css}
并集选择器：,（逗号，选择多组标签）
语法：选择器1,选择器2{css}
交集选择器：什么都不加，直接连着写
语法：选择器1选择器2{css}
伪类选择器：hover(鼠标悬停的时候改变的样式)
语法：选择器：hover{css}
其他伪类伪元素
Emmet语法：简写语法，快速生成代码
输入 回车以后
div 快速生成div双标签
.box 快速生成类名为box的div双标签
p.box 快速生成类名为box的p双标签
#box 快速生成id为box的div双标签
div+p 快速生成div和p标签，同级关系
ui>li*3 快速生成ul和li标签，父子关系，三个li
ui>li{111}*3 快速生成ul和li标签，父子关系，三个li，li包裹111
ui>li{$}*3 快速生成ul和li标签，父子关系，三个li，li包裹1,2,3
单词首字母 快速生成css属性名
w300+h200+bgc 快速生成css宽度300高200颜色，颜色需快速生成之后自己替换
二、背景相关属性
背景色：background-color（参考前面的常用颜色取值方法）
背景图：background-image:url();（小括号内无引号）
背景平铺：background-repeat:repeat（默认）,no-repeat（不平铺）,repeat-x（横铺）,repeat-y（竖铺）
背景位置：background-position：水平方向位置 垂直方向位置
取值方式：英文
水平方向：left,center,right
垂直方向：top,center,botton
取值方式：坐标
background-position：50px 100px;(正数向右下移动，负数相反)
背景相关属性连写
复写格式：background:color image repeat position（可不按该顺序，position中的取值为英文则也可以颠倒顺序，如果是坐标则不行）
image和背景的区别：背景需要盒子
三、元素显示模式
块级元素（div,p,h系列,ul,li,dl,dt,form,header…）
独占一行
可以设置宽高并生效（宽度默认和父级一样）
行内元素（a,span,b,u,i,s…）
不换行
不可以设置宽高，不生效
行内块元素（input,textarea,button,select…特殊的，img有行内块的元素特点，但在谷歌浏览器中显示结果是inline）
一行可以显示多个
可以设置宽高
元素显示模式转换
display：block（块级），inline-block（行内块），inline（行内）；
html嵌套规范注意点：
p标签不要嵌套div,p,h等块级元素
a标签不能嵌套a标签
四、css特性
继承性(子级继承父级的样式)
文字控制属性都能继承，例如color,font系列，text系列，line-height
a标签的color会继承失败，因为a标签自己有默认属性，如果需要修改也需要在a中修改，
h系列的font-size会继承失败，因为h系列有自己的字号属性，修改同上
层叠性
不同属性作用于一个标签则都生效
相同属性作用于一个标签则后面的覆盖前面的
样式冲突时，当选择器优先级相同时，才能通过层叠性并判断结果
这篇三、还在问频繁使用class和id烦恼吗?一篇文章教你——html5教程，文章就结束了，有不懂的地方可以联系站长。希望每个前端人员都有可以找到一个好工作，谢谢观看，祝您生活愉快。
2023-11-21 14:58
文章点击量：
作者：【前端大G】
文章标签：
三,、,还在,问,频繁,使用,class,和,烦恼,吗,一,
