css3经典使用手册..docxVIP

----------------------------精品word文档 值得下载 值得拥有---------------------------------------------- ---------------------------------------------------------------------------------------------------------------------------------------------- 1.选择器 一、属性选择器 增加三种： [att* = val]：表示包含用val指定的字符 [att^= val]：表示开头字符用val指定的字符 [att$= val]：表示结尾字符用val指定的字符 例如：[id$=\-1]{background-color:yellow;} ?结尾字符为-1 二、结构性伪类选择器 1、例如： ? ? ? ? a:link ? ? ? ? a:visited ? ? ? ? a:hover ? ? ? ? a:active 2、格式： ? ? ? ? 选择器：伪元素{属性：值} ? ? ? ? 选择器 类名：伪元素{属性：值} 3、伪元素选择器： ? ? ? ? first-line：用于为某个元素中的第一行文字使用样式。 ? ? ? ? first-letter：用于某个元素中的文字的首字母或第一个字使用样式。 ? ? ? ? before：用于在某个元素之前插入一些内容。 ? ? ? ? after：用于在某个元素之后插入一些内容。 4、选择器：root,not,empty,target ? ? ? root：将样式绑定到页面的根元素（是指位于文档树中最顶层结构的元素） ? ? ? not：想对某个结构元素使用样式，但想排除该结构元素的子结构元素。 ? ? ? empty：指定当元素内容为空白时使用的样式。 ? ? ? target：对页面中某个target元素指定样式，该样式只在用户点击了页面中的超链接来使用。 5、选择器：first-child、last-child、nth-child、nth-last-child ? ? ? first-child\last-child元素：单独指定第一个子元素与最后一个子元素样式。 ? ? ??nth-child、nth-last-child元素： ? ? ? ?（1）对指定序号的子元素使用样式。 ? ? ? ? ? ? 格式：nth-child(n){} ? ? ? ? ? ? ? ? ? ? ? 子元素：nth-last-child(n){} ? ? ? ?（2）对所有第奇数个子元素或第偶数个子元素使用样式 ? ? ? ? ? ? 正数第偶个：nth-child(odd){} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 子元素：nth-last-child(n){} ? ? ? ? ? ? 正数第奇个：nth-child(even){} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 子元素：nth-last-child(n){} ? ? ? ? ? ? 倒数第偶个：nth-last-child(odd){} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 子元素：nth-last-child(n){} ? ? ? ? ? ? 倒数第奇个：nth-last-child(odd){} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 子元素：nth-last-child(n){} ? ? ? （3）选择器：nth-of-type和nth-last-of-type ? ? ? ? ? ? ?只针对同类型的子元素进行计算。 6、Only-child 选择器 三、UI元素状态伪类选择器 共同特征：指定的样式只有当元素处于某种状态下时才起作用，在默认状态下不起作用。 ? ? ? ? ? ? ?e:hover ?支持的浏览器 ? (ff,safari,opera,IE8,chrome) 移动到该元素鼠标指针样式 ? ? ? ? ? ? ?e:active? 支持的浏览器 ??(ff,safari,opera,chrome) ? 鼠标按下还没松开的样式 ? ? ? ? ? ? ?e:focus? 支持的浏览器 ??(ff,safari,opera,IE8,chrome) 元素获得光标焦点时使用的样式 ? ? ? ? ? e:enabled? 支持的浏览器 ??(ff,safari,opera,chrome)元素处于可用状态时的样式 ? ? ? ? ?e:disabled? 支持的浏览器 ??(ff,safa