资源描述:
《CSS3经典使用手册.docx》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库。
1、1.选择器一、属性选择器增加三种:[att*=val]:表示包含用val指定的字符[att^=val]:表示开头字符用val指定的字符[att$=val]:表示结尾字符用val指定的字符例如:[id$=-1]{background-color:yellow;} 结尾字符为-1二、结构性伪类选择器1、例如: a:link a:visited a:hover a:active2、格式: 选择器:伪元素{属性:值} 选择器类名:伪元素{属性:值}3、伪元素选择器: first-line:用于为某个元素中的第一行文字使用样式
2、。 first-letter:用于某个元素中的文字的首字母或第一个字使用样式。 before:用于在某个元素之前插入一些内容。 after:用于在某个元素之后插入一些内容。4、选择器:root,not,empty,target root:将样式绑定到页面的根元素(是指位于文档树中最顶层结构的元素) not:想对某个结构元素使用样式,但想排除该结构元素的子结构元素。 empty:指定当元素内容为空白时使用的样式。 target:对页面中某个target元素指定样式,该样式只在用户点击了页面中的超链接来使用。5、选择器:first
3、-child、last-child、nth-child、nth-last-child first-childlast-child元素:单独指定第一个子元素与最后一个子元素样式。 nth-child、nth-last-child元素: (1)对指定序号的子元素使用样式。 格式:nth-child(n){} <子元素>:nth-last-child(n){} (2)对所有第奇数个子元素或第偶数个子元素使用样式 正数第偶个:nth-child(odd){} <子元素>:n
4、th-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
5、 只针对同类型的子元素进行计算。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:enable
6、d 支持的浏览器 (ff,safari,opera,chrome)元素处于可用状态时的样式 e:disabled 支持的浏览器 (ff,safari,opera,chrome)元素处于不可用状态时的样式 e:read-only 支持的浏览器 (ff,opera)指定元素处于只读状态时的样式(ff:-moz-read-only) e:read-write 支持的浏览器 (ff,opera)指定元素处于非只读状态时的样式(ff:-moz-read-write) e:checked 支持的浏览器 (ff,safari,opera,
7、chrome)指定单选框或复选框选中状态 e:default 支持的浏览器 (ff)指定当页面打开时默认处于选取装态的单选框或复选框控件的样式。e:indeterminate 支持的浏览器 (opera)默认选择整组单选框。 e:selection用来指定当元素处于选中状态时的样式。四、通用兄弟选择器2.文字与字体样式1、给文字添加阴影:text-shadow 支持的浏览器:safari,firefox,chrome,opera 使用方法:text-shadow:lengthlengthlengthcolor[横方向距离,纵方向距离
8、,模糊半径,颜色] 指定多个阴影: