面试官问我HTML5是什么（下）

发表于 May 30, 2019|分类于前端面试|阅读次数: –

字数统计: 4039|阅读时间: 21 min

CSS3

发展历史

CSS1 -> CSS2 -> CSS2.1 ->CSS3

模块与模块化结构

CSS3采用了分工协作的模块化结构

其中最重要的 CSS3 模块包括：

'选择器'
'框模型'
'背景和边框'
'文本效果'
'2D/3D 转换'
'动画'
'多列布局'
'用户界面'

CSS3 新增的选择器

属性选择器

| 选择器 | 含义 | 实例 | | --------------- '| ------------------------------------ | ----------------- |' | E[att^="val"] | 属性 att 的值以 val 开头的元素 | div[id^='haha'] | | E[att$="val"] | 属性 att 的值以 val 结尾的元素 | div[id^='haha'] | | E[att="val"] | 属性 att 的值包含 val 字符串的元素 | div[id^='haha'] |

结构性伪类选择器

| 选择器 | 含义 | 实例 | | ----------------------- '| ------------------------------------------------------------ | ------------------------------------------------------ |' | E:root | 匹配文档的根元素，对于 HTML 文档就是 HTML元素 | | | E:not(s) | 匹配不符合当前选择器的任何元素 | div:not([class="demo"]) : 除了 class 为 demo 的div以外 | | E:empty | 匹配一个不包含任何子元素的元素（文本节点也被看成子元素，空格也是一个元素） | | | E:target | 匹配被 location.hash 选中的元素（即锚点元素），选择器可以用来选取当前活动的目标元素 | | | E:first-child | 匹配 E 父元素的第一个子元素, 如果当前位置元素不是前面所修饰的元素，那么无效 | li:first-child : 匹配页面中所有第一个 li | | E:last-child | 匹配 E 父元素的最后一个子元素，等同于 E:nth-last-child(1) , 如果当前位置元素不是前面所修饰的元素，那么无效 | | | E:nth-child(n) | 匹配 E 父元素的第 n 个元素，第一个编号为1, 如果当前位置元素不是前面所修饰的元素，那么无效 | | | E:nth--last-child(n) | 匹配 E 父元素的倒数第n个子元素，第一个编号为1, 如果当前位置元素不是前面所修饰的元素，那么无效 | | | E:nth-of-type(n) | 与 E:nth-child() 类似，但是仅匹配使用同种标签的元素 | p:nth-of-type(2) : 匹配父元素的第2个子元素p | | E:first-of-type(n) | 匹配父元素使用同种标签的第一个子元素，等同于 E:nth-of-type(1) | | | E:last-of-type(n) | 匹配父元素使用同种标签的最后一个子元素，等同于 E:nth-last-of-type(1) | | | E:nth-last-of-type(n) | 与 E:nth-last-child(n) 类似，但是仅匹配使用相同标签的元素 | | | E:only-child | 匹配父元素下仅有的一个子元素，等同于 E:first-child:last-child 或者 E:nth-child(1):nth-last-child(1) | | | E：only-of-type | 匹配父元素下使用同种标签的唯一一个子元素，等同于 E:first-of-type:last-of-type 或者 E:nth-of-type(1):nth-last-of-type(1) | | | 备注： | n 里面可以是 odd(奇数)、even(偶数) | 循环使用样式： li:nth-child(2n+1) |

UI状态伪类选择器

| 选择器 | 含义 | 实例 | | -------------- '| ---------------------------------- | -------------------------------------------------------- |' | E:enabled | 匹配表单中激活的元素 | | | E:disabled | 匹配表单中禁用的元素 | | | E:checked | 匹配表单中被选中的单选框或者复选框 | | | E::selection | 匹配用户用鼠标当前选中的元素 | user-select: none; 取消鼠标选中的默认样式 | | E:read-only | 匹配选中只读的元素 | <input type="text" readonly="readonly" value="hahha"/> | | E:read-write | 匹配选中非只读的元素 | <input type="text" value="hahha"/> |

级元素通用选择器

| 选择器 | 含义 | 实例 | | ------ '| ------------------------------------ | ---------------------- |' | E~F | 匹配任何在 E 元素之后的同级元素 F | p~ul{background:#ff9; } |

E：hover
E：active
E：focus
E：enabled
E：disabled
E：read-only
E：read-write
E：checked
E：default
E：indeterminate
E：selection

属性选择器

简单属性选择

/*把包含某个attribute的所有边元素变成红色*/
*[attribute] {
    color: red
}

/*只对有attribute属性的div元素应用样式*/
div[attribute] {
    color: red
}

/*根据多个属性，同时拥有attribute1和attribute2的元div应用样式*/
div[attribute1][attribute2] {
    color: red
}

/*对有alt属性的图像*/
img[alt] {
    border: 5px solid red
}

根据具体属性选择

/*某个具体的a标签*/
a[href="http://laibh.top"] {
    color: red
}

;

/*加多一个限制*/
a[href="http://laibh.top"][title="赖同学"] {
    color: red
}

;

/*不要忽略空格*/
p[class="red small"] {
    color: red
}

;

根据部分属性值选择

/*选择 class属性中包含 important元素的 */
p[class~="important"] {
    color: red
}

| 类型 | 描述 | | :----------- '| :----------------------------------------- |' | [abc^="def"] | 选择 abc 属性值以 "def" 开头的所有元素 | | [abc$="def"] | 选择 abc 属性值以 "def" 结尾的所有元素 | | [abc*="def"] | 选择 abc 属性值中包含子串 "def" 的所有元素 |

特定属性选择类型

/*这个规则会选择 lang 属性等于 en 或以 en- '开头的所有元素*/
'
*[lang|="en"] {
    color: red
}

css属性选择器表

伪类与伪元素

伪类

CSS2定义：用于向某些选择器添加特殊的效果。

CSS3定义：

伪类的存在是为了通过选择器找到那些不存于DOM树中的信息以及不能被常规 CSS选择器获取到的信息（:target）
伪类由一个冒号:开头，冒号后面是伪类的名称和包含在圆括号中的可选参数
任何常规选择器都可以在任何位置使用伪类。伪类语法不区分大小写。一些伪类的作用会互斥，另外一些伪类可以同时被同一个元素使用。并且，为了满足用户在操作 DOM时产生的 DOM 结构变化，伪类也可以是动态的

selector : pseudo-class {
    property: value
}

selector.class : pseudo-class {
    property: value
}

锚伪类（不存在于 DOM树的信息）

a:link {}

a:visited {}

a:hover {}

a;

active {}

<style>
    .tab_content {
        height: 800px;
        background: red;
        margin-bottom: 100px;
    }

    #tab1:target,
    #tab2:target,
    #tab3:target {
        background: blue;
    }
</style>
<div id="tab1" class="tab_content">
    <!--tabed content-->
</div>
<div id="tab2" class="tab_content">
    <!--tabed content-->
</div>
<div id="tab3" class="tab_content">
    <!--tabed content-->
</div>

<!--:target通过CSS实现了常规CSS无法实现的逻辑-->

伪类表

| 属性 | 描述 | CSS | | :----------- '| :--------------------------------------- | :--- |' | :active | 向被激活的元素添加样式。 | 1 | | :focus | 向拥有键盘输入焦点的元素添加样式。 | 2 | | :hover | 当鼠标悬浮在元素上方时，向元素添加样式。 | 1 | | :link | 向未被访问的链接添加样式。 | 1 | | :visited | 向已被访问的链接添加样式。 | 1 | | :first-child | 向元素的第一个子元素添加样式。 | 2 | | :lang | 向带有指定 lang 属性的元素添加样式。 | 2 |

伪元素

CSS2定义：用于向某些选择器设置特殊效果

CSS3定义：

伪元素在DOM树中创建了一些抽象元素，这些抽象元素是不存在文档语言里面的（html源码）。如：document接口不提供访问元素内容的第一个字或者第一行的机制，而伪元素可以使得开发者提取到这些信息。并且，一些伪元素可以使开发者获取到不存在与源文档中的内容（:before/:after）
伪元素由两个冒号:：开头，然后是伪元素的名称
使用::是为了区分伪类和伪元素（CSS2中没有区别）。考虑兼容性的话，CSS2中的已存伪元素可以使用 :，但是 CSS3的就要使用 ::
一个选择器只能使用一个伪元素，并且伪元素必须处于选择器语句的最后

selector:pseudo-element {
    property: value
}

selector.class:pseudo-element {
    property: value
}

:first-line

用于向文本的首行设置特殊样式(只能用于块级元素)

下面属性可以应用这个伪元素

'font'
'color'
'background'
'word-spacing'
'letter-spacing'
'text-decoration'
'vertical-align'
'text-transform'
'line-height'
'clear'

:first-letter

用于向文本的首字母设置特殊样式

下面的属性可以应用这个伪元素

'font'
'color'
'background'
'margin'
'padding'
'border'
'text-decoration'
'vertical-align(当 float为none)'
'text-transform'
'line-height'
'float'
'clear'

:before

在元素内容前面插入新内容

:after

在元素内容之后插入新内容

伪元素表

| 属性 | 描述 | CSS | | :------------ '| :------------------------------- | :--- |' | :first-letter | 向文本的第一个字母添加特殊样式。 | 1 | | :first-line | 向文本的首行添加特殊样式。 | 1 | | :before | 在元素之前添加内容。 | 2 | | :after | 在元素之后添加内容。 | 2 |

伪类与伪元素特性与区别

伪类本质上是为了弥补常规 CSS 选择器的不足，以便获取更多的信息（不存在 DOM树的信息，不能被常规CSS选择器获取的信息）
伪元素本质上是创建了一个有内容的虚拟容器,这个容器不包含任何DOM元素，但是可以包含内容
CSS3 中的伪类和伪元素的语法不同（:与::）
可以同时使用多个伪类，而只能同时使用一个伪元素

完整表格

在页面插入内容

:before 或者 :after

/* 插入文字 */
/* 在h2前 */
h2:before {
    content: '哈哈哈'
}

/* 在h2后 */
h2:after {
    content: '内容'
}

/* 指定个别元素不进行插入 */
h2.sample:before {
    content: none
}

/* 插入图像 */
/* 在h2前 */
h2:bofore {
    content: url(mark.png);
}

/* 在h2后 */
h2:after {
    content: url(mark.png);
}

/* 将元素属性作为content的值来显示 */
img:after {
    context: attr(alt);
    display: block;
    text-align: center;
    margin-top: 5px;
}

** content 插入项目编号**

<h1>大标题</h1>
<p>实例文字</p>
<h1>大标题</h1>
<p>实例文字</p>

/*多个标题加上连续编号*/
h1:before {
    content: counter(mycounter)
}

h1 {
    counter-increment: mycounter;
}

/*追加文字*/
h1:before {
    content: '第'counter(mycounter)'章'
}

h1 {
    counter-increment: mycounter;
}

/* 指定样式 */
h1:before {
    content: '第'counter(mycounter)'章';
    color: blue;
    font-size: 42px;
}

h1 {
    counter-increment: mycounter;
}

/* 指定编号种类 list-style-type的值*/
/* content(计数器名，编号种类)*/
h1:before {
    content: '第'counter(mycounter, lower-roman)'章';
    color: blue;
    font-size: 42px;
}

/* 编号嵌套 */
p:bofore {
    content: counter(mycounter2, lower-roman);
}

p {
    counter-increment: mycounter2;
}

list-style-type 的值