0基础学习网页结构编程

目录

一、伪类选择器

二、伪元素选择器

三、继承

四、选择器的权重

五、元素间的转换

---

一、伪类选择器

伪类（不存在的类，特殊的类）
定义：不真实存在的类，它表示元素的一种状态，是一种特殊的类
例如：第一名，倒数都一名，鼠标悬浮，鼠标点击等
语法使用':'开头

①常见的伪类选择器
:first-child{}     :first-of-type{}          第一个元素

:last-child{}      :last-of-type {}        最后一个元素

:nth-child（数字){}     :nth-of-type(){}       第几个元素
特殊值（）：
2n或者even       偶数元素
2n+1或者odd   奇数元素
n                       所有元素
child      所有子元素中排序
of-type  同类型选择器中选择

② 否定伪类选择器(除去.....)
语法  ：not(){}

③a标签伪类选择器
：link  没有访问过的状态
：visisted  访问过的状态
注意：
1、只适用于a标签（超链接）独有的的伪类
2、由于隐私问题link和visited只能设置字体颜色

④鼠标移入状态选择器（针对所有的元素）
：hover{}  鼠标移入的状态

⑤鼠标点击状态选择器（针对所有的元素）
：active{}  鼠标点击后的状态

二、伪元素选择器

语法  '::'开头常用的伪元素选择器
：：first-letter{}   第一个字母

：：first-line{}      第一行

：：selection{}     鼠标选中的内容

：：before{ content：“ ..... ” }      在元素的最前面使用，必须配合content使用

：：after{content：“......”}        在元素的最后面使用，也要配合content使用
 

三、继承

定义：给父元素或者祖先设置有关样式，它会继承到子元素或者后代上
优势：一般情况下，样式的继承是对我们开发有利的，不需要额外的调整。
注意：不是所有的样式都能继承，一般情况布局样式不可以
共同的祖先元素,设置统一的字体大小、字体颜色、行高、字体 

四、选择器的权重

样式冲突：给同一个元素用不同的选择器设置相同的样式名，不一样的样式值，最终看选择器的权重显示相应的效果

选择器的权重

内联选择器                                                               1000
id选择器                                                                    100
class选择器/属性选择器                                               10
元素选择器                                                                   1
通配选择器                                                                   0
继承样式                                                                      没有权重

注意：
1、如果选择器的权重一样，那么谁靠下谁生效。

2、组合选择器的话要让所有选择器的权重相加，最终谁大听谁的。

3、所有的选择器权重相加，最高也不会超过上一等级的选择器权重，如再多类选择器相加也无法超过id选择器。

4、在并集选择器当中（群组选择器）中，权重是各算各的，最终谁大听谁的。

5、特殊值： ！important   是最高的权重，但要慎用，一般情况下测试使用，测试是否是选择器权重问题。

6、父子选择器，祖先后代选择器和交集选择器一样使用。

注意：
如果样式设置不成功
1、你没选中
2、权重问题   可以用！important测试

五、元素间的转换

块元素
1、独占一行
2、宽度是其父元素或祖先元素内容区的宽度
3、高度是被内容撑开的（可以自定义宽高！！！）

行内元素
1、不会独占一行
2、宽高都是被内容撑开的，行内元素不可以自定义宽高

行内块元素
兼具块元素和行内元素的特点，既不会独占一行，可以设置宽高

display实现元素之间的转换
可选值：
block  将元素转化成块元素
inline  将元素转化成行内元素
inlink-blocjk  将元素转化成行内块元素
none     隐藏某个元素

补充：list-style：none   去li项目符号
text-decoration：none  去除a标签下划线
text-decoration：underlin  增加下划线