CSS高阶知识（常用）

1.css优先权

2.属性选择器

属性选择器：可以为拥有指定属性的HTML元素设置样式，而不仅限于class 和id 

而且只有在规定了<!DOCTYPE>时，IE7和IE8才支持属性选择器。在IE6及更早更低的浏览器版本中，不支持属性选择器。

①  E[attr] 只使用属性名称，但没有确定任何属性值

② E[attr="value"]指定属性名称，并自定该属性的属性值

③E[attr~="value"] 指定属性名称，并具有属性值，并且该属性值是一个词列表，每个属性值以空格隔开，同时在在使用该选择器时，属性名称前面的“~”不可不写

④E[attr^="value"]指定了属性名称，并且拥有属性值，属性值并以value开头

⑤E[attr$="value"]指定属性名称，并且用有属性值，而且该属性值以value结尾

⑥E[attr*="value"]指定属性名称，并且拥有属性值，属性值中包含value值·

⑦E[attr|="value"]指定属性值，并且该属性值为value 或者以“value-”开头

3.结构性伪类选择器

E:nth-chid(n)标识父级E下的第n个节点

更强大的用法：

E:nth-chid(odd) //匹配基数行

E:nth-chid(eveven) //匹配偶数行

E:nth-chid(2n) //匹配基数行

E:nth-last-chid(n) //表示父级元素E的第n个节点,从后往前计算

E:nth-last-of-type(n)//表示父级元素E的第n个节点，而且类型为E，同时由后往前计算

E:empty //表示E元素中没有子节点。注意：包含文本节点

 

E:first-child 表示E元素中的第一个子节点

E:last-child 表示E元素中的最后一个

E:first-of-type 表示E元素中的第一个子节点，而且类型为E

E:last-of-type 表示E元素下的最后一个子节点，二期类型为E

E:only-child 表示E元素中只有一个子节点，：子节点不包含文本节点

E:only-of-type 表示E元素中只有一个子节点，而且类型必须是E

 

p标签实现自动换行

word-break:normal;
white-space:pre-warp;
word-wrap:break-word;

1.word-break属性：

    在恰当的断字点进行换行。有三个值：normal(使用浏览器默认的换行规则)、break-all(允许单词内换行)、keep-all(只能在半角空格或连字符处换行)

2.white-space属性：

  white-space属性设置如何处理元素内的空白。

  这个属性声明建立布局中如何处理元素中的空白字符，有六个值：normal(默认。空白会被忽略)、pre(空白会被浏览器保留。其行为方式类似HTML代码中的<pre>标签)、

  nowrap（文本不会换行，文本会在同一行上继续，直到遇到<br>标签为止）、pre-wrap（保留空白符序列，但是正常的换行）、pre-line（合并空白符序列，但是保留空白      符）、inherit（规定应该从父元素继承white-space属性的值）;

3.word-wrap属性：

  允许长单词换行到下一行；有两个值：normal（只允许在断字点换行）、break-word(在长单词或者URL地址内部进行换行)