2019年10月30日作业

10月30日 作业
* 元素按显示方式分为哪几种, 并举例, 正确描述它们
* CSS是什么? 它的主要作用是什么?
* 什么是CSS选择器,它的样式声明是哪二部分组成?
* 举例演示CSS简单选择器(全部)
* 举例演示CSS上下文选择器(全部)
* 举例演示常用CSS结构伪类选择器(不少于四种)
* 举例演示常用CSS表单伪类选择器(不少于三种)

-----------------------------------------------------------------------------

1、元素按显示方式分为哪几种, 并举例, 正确描述它们

 A、 按内容是否可替换 分为：置换元素、非置换元素

置换元素<img src="...">   <input type="...">

非置换元素 <h1><p><span><div><table><ul+li><a>

B、按元素是否独占一行分为：块级元素、行内元素

块级元素<div>, <ul+li>, <table>,<p>, <h1-h6>
行内元素<span>,<input>, <em>,<strong>,<a>

2、CSS是什么? 它的主要作用是什么?

CSS: 层叠样式表(Cascading Style Sheets)用来设置页面中的元素样式和布局的

3、 什么是CSS选择器,它的样式声明是哪二部分组成?

根据元素的标签名称和属性来选择元素

样式规则 = 选择器 + 样式声明

4、举例演示CSS简单选择器(全部)

元素选择器: div{...}
属性选择器：tag{...}
类/class选择器：.active{...}
id选择器：#main{...}
群组选择器：p, .active , div{...}
通配符选择器：* ，表示全部元素，通常用在上下文选择器

5、举例演示常用CSS结构伪类选择器(不少于四种)

* `:nth-child(n)`: 匹配父元素中指定索引的子元素
* `:first-child`: 匹配父元素中的第一个子元素
* `:last-child`: 匹配父元素中的最后一个子元素
* `:nth-last-child(n)`: 匹配从父元素中倒数选择子元素
* `:only-child`: 匹配父元素中的唯一子元素* `selector:nth-of-type(n)`: 匹配父元素中指定索引的子元素
* `selector:first-of-type`: 匹配父元素中的第一个子元素
* `selector:last-of-type`: 匹配父元素中的最后一个子元素
* `selector:nth-last-of-type(n)`: 匹配从父元素中倒数选择子元素
* `selector:only-of-type`: 匹配父元素中的唯一子元素

6、* 举例演示常用CSS表单伪类选择器(不少于三种)

* `:enabled`: 选择每个启用的 `<input>` 元素
* `:disabled`: 选择每个禁用的 `<input>` 元素
* `:checked`: 选择每个被选中的 `<input>` 元素
* `:required`: 包含`required`属性的元素
* `:optional`: 不包含`required`属性的元素
* `:valid`: 验证通过的表单元素
* `:invalid`: 验证不通过的表单
: `:read-only`: 选择只读表单元素