《网页设计》课件-3-3CSS3选择器_第1页
《网页设计》课件-3-3CSS3选择器_第2页
《网页设计》课件-3-3CSS3选择器_第3页
《网页设计》课件-3-3CSS3选择器_第4页
《网页设计》课件-3-3CSS3选择器_第5页
已阅读5页，还剩14页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

CSS3选择器目录◎属性选择器◎关系选择器◎链接伪类选择器◎结构伪类选择器◎伪元素选择器◎UI元素状态伪类选择器1属性选择器属性选择器：E[att^=”value”]、E[att$=”value”]、E[att*=”value”]，用来匹配属性中包含某些特定的值。属性名称含义E[att^=”value”]选择名称为E的标签，且该标签定义了att属性，att属性值包含前缀为value的子字符串。E[att$=”value”]选择名称为E的标签，且该标签定义了att属性，att属性值包含后缀为value的子字符串。E[att*=”value”]选择名称为E的标签，且该标签定义了att属性，att属性值包含value的子字符串。注意注意的是E是可以省略的，如果省略则表示可以匹配满足条件的任意元素。举例演示【实例4-9】属性选择器的使用。2关系选择器关系选择器主要包含子代选择器（E>F）、相邻兄弟选择器（E+F）、普通兄弟选择器（E~F）。属性名称含义子代选择器（E>F）选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用“>”表示。兄弟相邻选择器（E+F）选择紧贴在E元素之后的F元素，用“+”表示。选择相邻的第一个兄弟元素。普通兄弟选择器（E~F）选择E元素之后的所有兄弟元素F，作用于多个元素，用“~”隔开。举例演示【实例4-10】关系选择器的使用。3链接伪类选择器伪类不是真正意义上的类，但它确实作为一个类来使用。当在同一网页中使用两种以上不同样式的超链接，就采用伪类与类名或者id相结合的方式实现。伪类名称含义a:link未访问时的超级链接的状态a:visited访问后的超级链接的状态a:hover鼠标经过、悬停时超级链接的状态a:active鼠标单击不动时超级链接的状态超链接伪类及其含义举例演示【实例4-11】超级链接伪类选择器的使用。4结构伪类选择器1.基本的结构性伪类选择器表达式描述:root将样式绑定到页面的根元素中。所谓根元素，是指位于文档树中最顶层结构的元素，在HTML页面中就是指包含着整个页面的<html>部分。:not

想对某个结构元素使用样式，但想排除这个结构元素下的子结构元素，就是用:not伪类。:empty指定当元素内容为空白时使用的样式。:target对页面中某个target元素指定样式，该样式只在用户点击了页面中的链接，并且跳转到target元素后生效。举例演示【实例4-12】基础伪类选择器。举例演示【实例4-13】target结构化伪类选择器。4.子元素伪类选择器表达式描述:first-child对父元素中的第一个子元素指定样式例如p:first-child{}表示第一个p元素的样式

:last-child

对父元素中的最后一个子元素指定样式例如p:last-chidl{}表示倒数第一个p元素的样式:only-child当某个父元素中只有一个子元素时使用的样式:nth-child(n)对指定序号的子元素设置样式(正数)，表示第几个子元素例如：p:nth-child(2){}表示第2个p元素的样式:nth-last-child(n)对指定序号的子元素设置样式(正数)，表示倒数第几个子元素例如：p:nth-last-child(2){}表示倒数第2个p元素的样式:nth-child(even)所有正数第偶数个子元素，等同于:nth-child(2n):nth-child(odd)所有正数第奇数个子元素，等同于:nth-child(2n+1):nth-last-child(even)所有倒数第偶数个子元素:nth-last-child(odd)所有倒数第奇数个子元素:

nth-of-type(n)用于匹配属于父元素的特定类型的第n个子元素:nth-last-of-type(n)用于匹配属于父元素的特定类型的倒数第n个子元素举例演示【实例4-14】子元素伪类选择器。

伪元素选择器是针对CSS中已定义的伪元素使用的选择器。CSS中主要使用的伪元素为“:before”伪元素选择器和“:after”伪元素选择器。5伪元素选择器1.:before伪元素选择器语法：

element:before{ content:文字/url();}:before伪元素选择器用于在被选元素的内容前面插入内容，必须配合“content”属性来指定要插入的具体内容。element表示元素，被选元素位于“:before”之前，“{}”中的content属性用来指定要插入的具体内容，该内容既可以为文本也可以为图片，大家还可以根据其他需要添加相应的样式。2.:after伪元素选择器语法：

element:after{ content:文字/url();}:after伪元素选择器用于在被选元素的内容之后插入内容，必须配合“content”属性来指定要插入的具体内容。举例演示【实例4-15】伪元素选择器。UI（UserInterface，用户界面）元素状态伪类选择器，是指只有当元素处于某种状态下时才能使用的样式，默认状态下不起作用。不起作用。5UI元素状态伪类选择器表达式描述E:hover鼠标指针移动到某个文本框控件上的样式E:active元素被激活(鼠标在元素上按下还没有松开)时使用的样式E:focus元素获得光标焦点时使用的样式，主要是在文本框控件获得焦点并进行文字输入的时候使用E:enable指定当元素处于可用状态时的样式E:disable指定当元素处于不可用状态时的样式E:read-only

指定当元素处于只读状态时的样式Firefox浏览器中要写成-moz-read-onlyE:read-write

指定当元素处于非只读状态时的样式Firefox浏览器中要写成：-moz-write-onlyE:checked指定当表单中的radio单选框或checkbox复选框处于选取状态时的样子Firefox浏览器中要写成：-moz-checkedE:default指定当页面打开时默认处于选区状态的radio或checkbox控件的样式E:indeterminate指定当页面打开时，如果一组单选框中任何一个单选框都没有被设定为选取状态时整组单选框的样式

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论