CSS3学习笔记1

CSS3编码规范：

尽量不缩写，除非易理解

统一使用英文、缩写或拼音

注释：单行<!-- -->，多行/* */

代码符合浏览器兼容标准

全部小写，一项定义一行

样式定义不写在html标签内

装饰图片，写在CSS中

代码命名不用-连接

尽量使用相对长度单位：em或%

尽量不用expression，动态属性IE8后不支持

尽量不用滤镜

CSS3选择器：

基本选择器

元素选择器（Element Selector）：

element

通过元素名称选择 HTML 元素。

类选择器（Class Selector）：

.class

通过类别名称选择具有特定类别的 HTML 元素。

类选择器以 . 开头，后面跟着类别名称。

ID 选择器（ID Selector）：

#class

通过元素的唯一标识符（ID）选择 HTML 元素。

ID 选择器以 # 开头，后面跟着 ID 名称。

属性选择器（Attribute Selector）：

通过元素的属性选择 HTML 元素。

属性选择器可以根据属性名和属性值进行选择。

元素集合选择器：

element,element

div,p 选择所有<div>元素和 <p> 元素

元素特殊属性选择器：

element.class

p.hometown 选择所有 class="hometown" 的 <p> 元素

属性选择器

属性拥有选择器：

[attribute]

[target] 选择所有带有target属性元素

属性值选择器：

[attribute=value]

[target=-blank] 选择所有使用target="-blank"的元素

属性值集合包含值选择器：

[attribute~=value]

[title~=flower] 选择标题属性包含单词"flower"的所有元素

属性等于或开头选择器：

[attribute|=language]

[lang|=en] 选择 lang 属性等于 en，或者以 en- 为开头的所有元素

属性开头选择器：

[attribute^=value]

a[src^="https"] 选择每一个src属性的值以"https"开头的元素

属性结束选择器：

[attribute$=value]

a[src$=".pdf"] 选择每一个src属性的值以".pdf"结尾的元素

属性值包含字符串选择器：

[attribute*=value]

a[src*="runoob"] 选择每一个src属性的值包含子字符串"runoob"的元素

层次选择器

子与后代集合选择器：

element element

div p 选择<div>元素内的所有<p>元素

子集合选择器：

element>element

div>p 选择所有父级是 <div> 元素的 <p> 元素

单个兄弟选择器：

element+element

div+p 选择所有紧跟在 <div> 元素之后的第一个 <p> 元素

兄弟集合选择器：

element1~element2

p~ul 选择p元素之后的每一个ul元素

伪类选择器

普通伪类选择器：

后代元素选择器：

:has :has 允许根据其后代元素来选择一个元素

元素集合选择器：

:is :is(p,span) 接收任何数量的选择器作为参数，并且返回这些选择器匹配的元素的并集。

根元素

:root :root 选择文档的根元素

动态伪类选择器

只有当用户和网站交互时才能体现出来，动态伪类包含两种，第一种是在链接中常看到的锚点伪类，另一种是用户行为伪类

未访问选择器：

:link a:link 选择所有未访问链接 

访问过选择器：

:visited a:visited 选择所有访问过的链接

活动选择器：

:active a:active 选择活动链接

鼠标悬浮：

:hover a:hover 选择鼠标在链接上面时

目标伪类选择器

":target"用来匹配文档的URI中某个标识符的目标元素。 

#news:target 选择当前活动的#news元素（包含该锚名称的点击的URL）

语言伪类选择器

根据元素的语言编码匹配元素

:lang(language)

p:lang(it) 选择一个lang属性的起始值="it"的所有<p>元素

UI状态伪类选择器

主要用于form表单元素上

已启用

:enabled

input:enabled 选择每一个已启用的输入元素

禁用：

:disabled input:disabled 选择每一个禁用的输入元素

选中

:checked input:checked 选择每个选中的输入元素

选中或高亮

::selection ::selection 匹配元素中被用户选中或处于高亮状态的部分

区间之外

:out-of-range :out-of-range 匹配值在指定区间之外的input元素

区间之内

:in-range :in-range 匹配值在指定区间之内的input元素

可读及可写

:read-write :read-write 用于匹配可读及可写的元素

只读

:read-only :read-only 用于匹配设置 "readonly"（只读） 属性的元素

可选

:optional :optional 用于匹配可选的输入元素

required

:required :required 用于匹配设置了 "required" 属性的元素

输入值为合法

:valid :valid 用于匹配输入值为合法的元素

输入值为非法

:invalid :invalid 用于匹配输入值为非法的元素

结构伪类选择器

父级的第一个元素

:first-of-type

p:first-of-type 选择每个p元素是其父级的第一个p元素

父级的最后一个元素

:last-of-type

p:last-of-type 选择每个p元素是其父级的最后一个p元素

父级的唯一元素 

:only-of-type

p:only-of-type 选择每个p元素是其父级的唯一p元素 

父级的唯一子元素 

:only-child

p:only-child 选择每个p元素是其父级的唯一子元素 

父级的第n个子元素 

:nth-child(n)

p:nth-child(2) 选择每个p元素是其父级的第二个子元素 

父级的倒数第n个子元素 

:nth-last-child(n)

p:nth-last-child(2) 选择每个p元素的是其父级的第二个子元素，从最后一个子项计数 

父级的第n个元素集合

:nth-of-type(n)

p:nth-of-type(2) 选择每个p元素是其父级的第二个p元素 

父级的倒数第n个元素集合

:nth-last-of-type(n)

p:nth-last-of-type(2) 选择每个p元素的是其父级的第二个p元素，从最后一个子项计数 

父级的第一个子元素集合

:first-child p:first-child 指定只有当<p>元素是其父级的第一个子级的样式。

父级的最后一个子元素集合

:last-child

p:last-child 选择每个p元素是其父级的最后一个子级。

每个元素的第一个字母

:first-letter p:first-letter 选择每一个<p>元素的第一个字母

每个元素的第一个字行

:first-line p:first-line 选择每一个<p>元素的第一行

否定伪类选择器

:not(selector)

:not(p) 选择每个并非p元素的元素

没有任何子级的元素

:empty p:empty 选择每个没有任何子级的p元素（包括文本节点）