css3选择器.ppt

3、相邻兄弟元素选择器 相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素， E F两元素具有一个相同的父元素，而且Ｆ元素在Ｅ元素后面，而且相邻 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元素是属于同一父元素之内，并且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中已经定义好的伪元素使用的选择器 用法： 选择器：伪元素{属性：值}