CSS3从入门到精通（复习查漏向

CSS3从入门到精通（复习查漏向

pre_section

CSS：层叠样式表，决定网页表现

网页为多层结构，CSS为每一层设置样式，最后显示最上一层

CSS语句 = 选择器 +

形式

• 内联样式

  style="CSS语句"作为标签属性，仅本标签可以使用

• 内部样式表

  head标签中使用style标签+CSS语句，仅当前文件可以使用

• 外部样式表

  CSS语句作为独立文件，HTML需要使用时通过<link rel="stylesheet" href="CSS文件位置">

常用选择器

• 元素选择器

  根据标签选择元素，如，p{}、h1{}、div{}

• id选择器

  根据id属性值选择元素，如，#key{}

• 类选择器

  根据class属性选择元素，如，.key{}

• 通配选择器

  全部元素，*{}

• 属性选择器

  [attribute=value]，attribute为value的元素

  [attribute^=value]，attribute以value开头的元素

  [attribute$=value]，attribute以value结尾的元素

  [attribute*=value]，attribute含有value的元素

  xx[attribute]，含有attribute的xx元素

复合选择器

• 交集选择器

  div.class，div标签的有class的元素

• 分组选择器

  key1，key2多个选择器如果相同则组合

关系选择器（父子祖先关系

• 子元素选择器

  div > span{}

• 后代选择器

  div span{}

• 兄弟选择器

  p + span{} p下一个span元素

  p ~ span{} p下面所有span元素

伪类选择器

:first-child 第一个且是某个标签的元素

:last-child 最后一个且是某个标签的元素

xx:only-child 选择xx是其他元素的唯一孩子

:nth-child(n，2n，2n+1，even，odd) 第n个且是某个标签的元素

相对元素的所有子元素中的指定位置

:first-of-type 第一个是某个标签的元素

xx xxx:only-of-type 选择xx内存在xxx唯一的元素

相对所有指定类型的指定位置

xx:empty 无后代的xx标签

xx:not(选择器kk) 除kk以外的xx元素

伪元素选择器

::first-letter 第一个字母

::first-line 第一行

::selection 选中部分

::before 元素开始，结合content属性

::after 元素结束，结合content属性

超链接选择器

a:link{} 链接未访问过的

a:visited{} 链接访问过的

a:hover{} 链接点击未释放时

练习

CSS Diner

待补

CSS3从入门到精通（复习查漏向

原文：https://www.cnblogs.com/krnl-dpr/p/14633203.html