html5第一季-13章css选择器上_第1页
html5第一季-13章css选择器上_第2页
免费预览已结束，剩余4页可下载查看

下载本文档

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

文档简介

13CSS选择器[上学习要点选择器总基本选择复合选择伪元素选择

主讲教师：本课程由北风网和瓢城 本章主要探讨HTML5中CSS选择器，通过选择器定位到想要设置样式的元素。目前CSS选择器的版本已经升级至第三代，即CSS3选择器。CSS3选择器提供了、更丰一．选择器总汇本节课主要涉及到三种选择器：基本选择器、复合选择器和伪元素选择器，具体如下：名说CSS版*通用选择选择所有元2元素选择选择指定类型1id选择指定id属性1class选择指定class属性的元1[attr]系属性选择选择指定attr属性的元2~分组选择选择多个选择器的元1s1后代选择选择指定选择器的后代元1s1>子选择选择指定选择器的子2s1+相邻兄弟选择选择指定选择器相邻的元2s1~普通兄弟选择选择指定选择器后面的元3::first-伪元素选择选择块级元素文本的1::first-伪元素选择选择块级元素文本的首字1伪元素选择选择元前插入内2伪元素选择选择元后插入内2二．基本选择器使用简单且频率高的一些选择器归类为基本选择器通用选择器*border:1pxsolid}解释：“*”号选择器是通用选择器，功能是匹配所有html元素的选择器包括<html><p>段落<b>加粗<span>无通用选择器会将所有元素匹配并配置样式，这是把双刃剑，好处就是非常方便，坏处就是不常用。元素选择器pcolor:}<p>段落解释：直接使用元素名称作为选择器名即可ID选择器#abcfont-size:}<pid="abc">段落解释：通过对元素设置全局属性id，然后使用#id值来选择页面唯一元素类选择器.abcborder:1pxsolid}解释：通过对元素设置全局属性class，然后使用.class值选择页面一个或多个元b.abcborder:1pxsolid}解释：也可以使用“元素 值”的形式，限定某种类型的元素<spanclass="abcedf">无解释：类选择器还可以调用多个样式，中间用空格隔开进行层叠属性选择器//所需CSS2版[href]color:}//所需CSS2版{border:1pxsolid}解释：匹配属性值的属性选择器//所需版本CSS3[href^="http"color:}解释：属性值开头匹配的属性选择器//所需版本CSS3[href$=".com"color:}解释：属性值结尾匹配的属性选择器//所需版本CSS3[href*="baidu"color:}解释：属性值包含指定字符的属性选择器//所需版本CSS2[class~="edf"font-size:}解释：属性值具有多个值时，匹配其中一个值的属性选择器[lang|="encolor:}解释：属性值具有多个值且使用“-”号连接符分割的其中一个值的属性选择器。比二．复合选择器将不同的选择器进行组合形成新的特定匹配，我们称为复合选择器分组选择器p,b,i,spancolor:}ID选择器、类选择器、属性选择器混合使用。后代选择器pbcolor:}混合使用ID选择器、类选择器、属性选择器。子选择器ul>liborder:1pxsolid}<li>我是儿<li>我是孙子<li>我是孙子<li>我是儿子<li>我是儿子相邻兄弟选择器p+bcolor:}解释：相邻兄弟选择器匹配和第一个元素相邻的第二个元素普通兄弟选择器p~bcolor:}解释：普通兄弟选择器匹配和第一个元素后面的所有元素三．伪元素选择器特性上比较容易，在CSS3中为了区分，伪元素前置两个冒号（::），伪类前置一个冒（:）::first-line块级首行{color:}解释：块级元素比如<p>、<dv>等的首行文本被选定。如果想限定某种元素，可以加上前置p:firt-line。::first-letter块级首字母{color:}解释：块级元素的首行字母::before文本前插入a::beforecontent点击}解释：在文本

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

温馨提示

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

最新文档

评论

0/150

提交评论