css随堂笔记（二）

css   sub注释

注释不能嵌套

sub生成结构代码快捷

复合选择器

1。后代选择器

语法：选择器1 选择器2 选择器3  {

属性名：属性值

}

2.子代选择器

子代选择器语法：

选择器1>选择器2>选择器3  {

属性名：属性值；

}

注意：子代选择器只能选择直接子元素（只能选择儿子）

3.交集选择器

交集选择器语法：

选择器1选择器2选择器3{

属性名：属性值；

}

注意：如果交集选择器中存在标签选择器，标签选择器一定要写在最前面

4.并集选择器

并集选择器语法：

选择器1，选择器2，选择器3{

属性值：属性名；

}

注意:并集选择器使用最多的时候是在css样式初始哈。

5.其他选择器

伪类选择器

用于向某些选择器添加效果

分类：

1.链接伪类选择器

2.结构伪类选择器

链接选择器：1。：link  链接颜色   只对a标签有用

2. ：visited  点击完成后颜色  只对a标签有用

3. :hover  鼠标悬停的时候的颜色  对所有的元素都                                               有效果

4. :active  鼠标按住的时候的颜色   对所有的元素都                                             有效果

如果同时使用四个伪类选择器，他们是有顺序的。

顺序是： :link  :visited :hover :active

结构伪类选择器

结构伪类选择器：

:first-child  选择第一个子元素

:last-child   选择最后一个子元素

:nth-child(n) 选择第任意一个子元素，n：选择的元素

在结构上的位置       odd表示奇数，even表示偶数

属性选择器

1.E[attr=value]: 表示选择的元素有attr属性的他值是value，即可

　　　　　　　　2.E[attr]: 表示元素有这种属性即可

　　　　　　　　3.E[attr$=val]：表示以value这个元素attr是以value结尾

　　　　　　　　4.E[attr^=val]: 表示以value这个元素attr是以value开头

　　　　　　　　5.E[attr*=val]: 表示value这个属性中有val这个值即可

css元素的常见显示方式----displace

1。行内元素

特点  :

1。一行可以显示多个

　　　　　　2.不能设置有效宽高

常见的行内元素：span a em ins del strong

displace:inline

2。块级元素

displace:block

特点：

1。独占一行

　　　　　　　　2.可以设置有效宽高

常见的块级元素：div h1 h2 h3 h4 h5 h6 p ul li ol dl dt dd

3。行内块元素

displace:inline-blok

特点

1.一行显示多个

　　　　　　　　2.可以设置有限宽高

常见的行内块元素：input img texrarea select

常见元素显示方式的转换

注意：1.行内块转行内元素是没有意义的所有我们一般不这么转换

行内转块级：displace：block

块级转行内：displace：inline

行高 inlne-height

行高

自己定义：文字大小+上间距+下间距

css定义：两条基线之间的距离

1：盒子的高度=行高   盒子中的文本内容垂直居中

　　　　2：盒子高度》行高  盒子的文本偏上

　　　　3：盒子的高度《行高  盒子中的文本偏下

css三大特性

1。层叠性

对同一个元素的同一个属性，后面的样式会覆盖前面的样式，优先级高的会覆盖优先级低的

2。继承性

子元素会继承父辈元素的样式

继承的特殊情况

1。a标签不继承颜色属性

2。h系列的标签不继承font-size和font-weight

3。优先级

优先级：

1.继承<通用选择器<标签选择器<类选择器<id选择器<行内样式<!important(只能作用到单个属性的优先级，而不是整个选择器）

4。复合选择器权重的计算

权重的计算

（n,n,n,n）

从左到右：

第一个n代表!important个数。

　　　　　　　　　　　　第二个n表示id选择器的个数。

　　　　　　　　　　　　第三个n代表类选择器的个数。

　　　　　　　　　　　　第四个n表示标签选择器的个数

比较

从左边第一个n开始，如果第一个n大，那么就是这个选择器的权重高，后面的不需要再比较，如果第一个n相等，比较第二个n，如果第二个n大，那么就是这个选择器的权重大，后面的不需要比较。后面以此类推

　　　　　　　　　　　   继承的权重几乎为0，可以忽略不计

注意：判断一个样式是否作用到该元素，首先看选择器是否选中元素    对于复合选择器，我们一般从右到左