HTML学习分享（一）

HTML学习小结（一）

1.css的全称是什么？

2.样式表的组成

3.浏览器读取编译css的顺序？

 

（1）HTML基本选择器

1.通配符选择器 * { margin: 0; padding: 0; border: none; }

2.元素选择器 body { background: #eee; }

3类选择器 .list { list-style: square; }

4.ID选择器 #list { width: 500px; margin: 0 auto; }

5.后代选择器 .list li { margin-top: 10px; background: #abcdef; }

 

 

（2）HTML基本选择器扩展

1.子元素选择器 #wrap > .inner {color: pink;}

也可称为直接后代选择器,此类选择器只能匹配到直接后代，不能匹配到深层次的后代元素

2.相邻兄弟选择器 #wrap #first + .inner {color: #f00;}

它只会匹配紧跟着的兄弟元素

3.通用兄弟选择器 #wrap #first ~ div { border: 1px solid;}

它会匹配所有的兄弟元素(不需要紧跟)

4.选择器分组 h1,h2,h3{color: pink;}  

此处的逗号我们称之为结合符

 

 

（3）HTML属性选择器

1.存在和值属性选择器

[attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。

[attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。

[attr~=val]：表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少一个值为val。

 

2.子串值属性选择器

 [attr|=val] : 选择attr属性的值是val（包括val）或以val-开头的元素。

 [attr^=val] : 选择attr属性的值以val开头（包括val）的元素。

 [attr$=val] : 选择attr属性的值以val结尾（包括val）的元素。

 [attr*=val] : 选择attr属性的值中包含字符串val的元素。

 

 

（4）HTML伪类与伪元素选择器

1.链接伪类 注意:link，:visited，:target是作用于链接元素的！

:link 表示作为超链接，并指向一个未访问的地址的所有锚

:visited 表示作为超链接，并指向一个已访问的地址的所有锚

:target 代表一个特殊的元素，它的id是URI的片段标识符

2.动态伪类 注意:hover，:active基本可以作用于所有的元素！

:hover 表示悬浮到元素上

:active 表示匹配被用户激活的元素（点击按住时）

 

由于a标签的:link和:visited可以覆盖了所有a标签的状态，所以当:link，:visited，:hover，:active同时出现在a标签

身上时 :link和:visited不能放在最后！！！

 

隐私与:visited选择器

只有下列的属性才能被应用到已访问链接：

color

background-color

border-color

 

      3.表单相关伪类

:enabled 匹配可编辑的表单

:disable 匹配被禁用的表单

:checked 匹配被选中的表单

:focus 匹配获焦的表单

 

4.结构性伪类

index的值从1开始计数！！！！

index可以为变量n(只能是n)

index可以为even odd

#wrap ele:nth-child(index) 表示匹配#wrap中第index的子元素 这个子元素必须是ele

#wrap ele:nth-of-type(index) 表示匹配#wrap中第index的ele子元素

除此之外:nth-child和:nth-of-type有一个很重要的区别！！

nth-of-type以元素为中心！！！

 

:nth-child(index)系列

:first-child

:last-child

:nth-last-child(index)

:only-child (相对于:first-child:last-child 或者 :nth-child(1):nth-last-child(1))

:nth-of-type(index)系列

:first-of-type

:last-of-type

:nth-last-type(index)

:only-of-type (相对于:first-of-type:last-of-type 或者 :nth-of-type(1):nth-last-of-type(1))

 

:not

:empty(内容必须是空的，有空格都不行，有attr没关系)

5.伪元素

::after

::before

::firstLetter

::firstLine

::selection

 

 

（5）HTMLcss声明的优先级

1.选择器的特殊性

选择器的特殊性由选择器本身的组件确定，特殊性值表述为4个部分，如    0,0,0,0

一个选择器的具体特殊性如下确定：

       1.对于选择器中给定的ID属性值，加 0,1,0,0

       2.对于选择器中给定的各个类属性，属性选择，或伪类，加 0,0,1,0

       3.对于选择器中的给定的各个元素和伪元素，加0,0,0,1

       4.通配符选择器的特殊性为0,0,0,0

       5.结合符对选择器特殊性没有一点贡献

       6.内联声明的特殊性都是1,0,0,0

       7.继承没有特殊性

 

特殊性 1,0,0,0 大于所有以0开头的特殊性(不进位)

选择器的特殊性最终都会授予给其对应的声明

如果多个规则与同一个元素匹配，而且有些声明互相冲突时，特殊性越大的越占优势

 

注意：id选择器和属性选择器

      div[id="test"]（0,0,1,1） 和 #test（0,1,0,0）   

2.重要声明

有时某个声明比较重要，超过了所有其他声明，css2.1就称之为重要声明

并允许在这些声明的结束分号之前插入  !important  来标志

必须要准确的放置  !important 否则声明无效。

!important 总是要放在声明的最后，即分号的前面

 

 标志为 !important的声明并没有特殊的特殊性值，不过要与非重要声明分开考虑。

 实际上所有的重要声明会被浏览器分为一组，重要声明的冲突会在其内部解决

 非重要声明也会被分为一组，非重要声明的冲突也会在其内部解决

 如果一个重要声明与非重要声明冲突，胜出的总是重要声明

3.继承

继承没有特殊性，甚至连0特殊性都没有

0特殊性要比无特殊性来的强

 

4.层叠

找出所有相关的规则，这些规则都包含一个选择器

       计算声明的优先级

               先按来源排序

               在按选择器的特殊性排序

               最终按顺序

 

 

逆战班