- 1、本文档共40页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
3、相邻兄弟元素选择器 相邻兄弟选择器可以选择紧接在另一元素后的元素,而且他们具有一个相同的父元素, E F两元素具有一个相同的父元素,而且F元素在E元素后面,而且相邻 li + li {background: green;color: yellow; border: 1px solid #ccc;} 表示选择li的相邻元素li,我们这里一共有十个li,那么上面的代码选择了从第2个li到 10 个li,一共九个 .active + li {background: green;color: yellow; border: 1px solid #ccc;} 选择li.active后面相邻的li元素,注意了和li.active后面相邻的元素仅只有一个的。 3、通用兄弟选择器E ? F 选择某元素后面的所有兄弟元素,需要在同一个父元素之中,E和F元素是属于同一父元素之内,并且F元素在E元素之后,那么E ~ F 选择器将选择中所有E元素后面的F元素 active ~ li {background: green;color: yellow; border: 1px solid #ccc;}// 选择中了li.active 元素后面的所有兄弟元素li 在网页制作时采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。 * 课程体系发布 移动前端开发(CSS3) 1、css3简介 CSS即层叠样式表(Cascading StyleSheet) CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的 模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等 CSS 用于控制网页的样式和布局。 CSS3 是最新的 CSS 标准。 CSS3 完全向后兼容,因此您不必改变现有的设计。浏览器通常支持 CSS2。 css3模块 选择器是css3中的一个重要内容。使用它可以大幅度提高开发人员书写或修改样式表时的工作效率。 属性选择器 在HTML中,通过各种各样的属性,我们可以给元素增加很多附加信息。 在css3中,增加了如下所示的三个属性选择器,使得属性选择器有了通配符的概念。 [att*=val] [att^=val] [att$=val] 属性选择器 [att*=val] 属性选择器 如果元素用att表示的属性之属性值中包含用val指定的字符的话,则该元素使用这个样式 选择具有att属性且属性值为包含val的字符串的E元素。 [id*=div1]: id相当于[att*=val] 属性选择器中的att,div1相当于[att*=val] 属性选择器中的val 例2.1 属性选择器 [att^=val] 属性选择器 如果元素用att表示的的属性之属性值的开头字符为val指定的字符的话,则该元素使用这个样式 选择具有att属性且属性值为以val开头的字符串的E元素。 [id^=div]: id相当于[att^=val] 属性选择器中的att,div相当于[att^=val] 属性选择器中的val,并且定义样式时div1与div2都起作用 例2.2 属性选择器 [att$=val] 属性选择器 如果元素用att表示的的属性之属性值的开头字符为val指定的字符的话,则该元素使用这个样式 选择具有att属性且属性值为以val结尾的字符串的E元素。 [id$=div]: id相当于[att$=val] 属性选择器中的att,div相当于[att$=val] 属性选择器中的val,并且定义样式时div1与div2都起作用 例2.3 作业 复习css2中的属性选择器: E[att] E[att~=val] E[att|=val] 灵活运用属性选择器 如果能够灵活运用属性选择器,目前为止需要依靠id或class名才能实现的样式完全可以使用属性选择器来实现。 例3 结构性伪类属性选择器 1、伪类选择器 css中已经定义好的选择器,不能随便起名字。 最常用的: a:link a:visited a:hover a:active 提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。 提示:在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。 结构性伪类属性选择器 2、伪元素选择器 是指并不是针对真正的元素使用的选择器,而是针对css中已经定义好的伪元素使用的选择器 用法: 选择器:伪元素{属性:值}
您可能关注的文档
最近下载
- 2023压力容器设计审核人员考试题库-1.docx
- 合并肥厚性心肌病的麻醉.pptx VIP
- 小区幼儿园经营管理投标文件.docx
- TSGD7006—2023年压力管道监督检验规则.docx
- 2023年新青岛版(六三制)二年级上册科学全册课件.pptx
- 全国说课比赛一等奖课件.ppt
- 第一单元+史前时期:原始社会与中华文明的起源(单元复习课件)-【大单元教学】2024-2025学年七年级历史上册同步备课系列(统编版2024).pptx VIP
- (完整版)小升初字音、字形、词语练习.pdf VIP
- 【2024秋】人教版三年级语文上册教学工作计划(及进度表).docx
- 护理专业调研报告(高职).docx VIP
文档评论(0)