CSS规则结构

1、h1 {color: red; background: yellow;}<！--声明块，由多个声明组成，声明由属性和值组成-->

<!--h1:选择器；/color:red;background:yellow; 声明块/color: red;声明；/color属性；/red：值；-->

2、CSS选择器

    2.1 元素选择器：通配选择器（*）；类型选择器（E）;ID选择器（E#ID）；类选择器（E.class）

    2.2 关系选择器：包含选择器（E F）；子选择器（E>F）；相邻选择器（E+F）; 兄弟选择器（E-F）

    2.3 属性选择器：E[att];E[att="val"]; E[];E[];E[];E[]

    2.4伪类选择器：(.........)

  2.5 伪元素选择器：E:frist-letter/e::first-letter；E:first-line/E::first-line；E:before/E::defore；E:after/E::after；E::piacehoider；E::selection

    2.6 CSS选择器权重：

        2.4.1 动态伪类选择器 E:link；E:visited; E:hover; E:active； E:focus

        2.4.2 目标伪类选择器 E:targer  

        2.4.3 语言伪类选择器 E:lanr{}

        2.4.4 UI元素状态伪类选择器 E:checked; E:disabled; E:enabied

        2.4.5 结构伪类选择器 E:root; E:first<child; E:first-of-type; E:last<child; E:last-of-type; E:nth-child{n}; E:nth-of-type{n}; E:nth-last-of-type{n}; E:only-of-type; E:only-child; E:empty; E:not{}

        2.4.6 否定伪类选择器 E:not{}

3、基本选择器

    3.1 通配选择器（*）：选择文档中所有的HTML元素

    3.2 元素选择器（E）：选择指定类型的HTML元素<!--也叫标签选择器--><!--不区分大小写-->

    3.3 ID选择器（#id）：选择指定ID属性值为"id"的任意类型元素<!--ID选择器区分大小写；尽量不在页面中使用-->

    3.4 类选择器（.class）：选择指定class属性值为”class“的任意类型的任意多个元素<!--class选择器区分大小写-->

    3.5 群组选择器：将每一个选择器匹配的元素集合合并

4、类选择器VS ID选择器

    4.1 可以为任意多元素指定相同的类名

    4.2 同一个HTML页面，ID只使用一次

5、关系选择器

    5.1 后代选择器（E F）:选择匹配的F元素，且F元素被包含在匹配的E元素内

    5.2 子选择器（E>F）：选择匹配的F元素，且F元素是匹配的E元素的子元素

    5.3 相邻兄弟选择器（E+F）：选择匹配的F元素，且F元素紧跟在匹配的E元素后面

    5.4 通用选择器（E~F）：选择匹配的F元素，且匹配位于E元素后面的所有F元素

6、属性选择器<!--css3--><!--E=>元素；attr=>属性名；val=>属性值的值-->

    6.1 E[attr] <!--选择有某个属性的元素，而不论这是属性值是什么（比如[id]，表示选择所有设置id属性的元素）-->

    6.2 E[attr=val] <!--指E元素设置了属性attr,并且其属性值为val（如div[class="class"],表示选择div元素，并且这个div元素设置了class="title"）-->

    6.3 E[attr|=val] <!--选择attr属性值等于val或者以val开头的所有字符串属性的元素（如，i[class|=icon-表示选中了设置了class，并且class的值是icon或者以icon-开头的i元素-->

    6.4 E[attr~=val] <!--匹配的元素某个属性具有一个或多个属性值，多个属性值之间使用空格隔开，当过元素属性值中有一个属性值与选择器的val相匹配就能选择该元素（a[title~website]表示a元素中的title属性，只需要包括website就能选中）-->

    6.5 E[attr*=val]<!--*：匹配任意字符=>a[title=site]表示匹配a元素，而且a元素的title属性值中任意位置有site字符的任何字符串-->

    6.6 E[attr^=val] <!--^:匹配起始符=>span[class^=icon-]表示选择类名以icon-开头的所有span元素 -->

    6.7 E[attr$=val] <!--$:匹配终止符=>a[href$=pdf]表示选择pdf结尾的href属性的所有a元素-->

转载于:https://my.oschina.net/u/3633511/blog/1502805