版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
CSS基础
--伪类选择器101动态伪类选择器状态伪类选择器02否定伪类选择器03目录在选取元素时，我们学过：
根据元素名选取元素（标记选择器）根据ID选择元素（ID选择器）根据类选择元素（类选择器）根据属性选择元素（属性选择器）根据位置选择元素（关系选择器）多种选择器的组合（复合选择器）还可以根据元素的特殊状态选取元素，即伪类选择器和伪元素选择器。
伪类选择器定义：是指那些处在特殊状态的元素。说明：伪类名可以单独使用，泛指所有元素，也可以和元素名称连起来使用，特指某类元素。格式：以冒号开头，元素选择符合冒号之间不能有空格，伪类名中间也不能有空格。具体包括：动态伪类选择器、状态伪类选择器、结构伪类选择器和否定选择器。1动态伪类选择器:link元素被定义了超链接但并未被访问过:visited元素被定义了超链接并已被访问过:active元素被激活:hover鼠标悬停:focus元素获取焦点动态伪类选择器：在CSS定义中，a:hover必须被置于a:link和a:visited之后；a:active必须被置于a:hover之后。所以，a标签的这四种伪类选择器的顺序为：a:link，a:visited，a:hover，a:active。必须严格按照此规则来设置属性，否则无效。<html>
<head>
<title>动态伪类选择器</title>
<styletype="text/css">
a:link{
font-size:20;
}
a:active{
font-size:80;
}
a:hover{
color:red;
}
</style>
</head>
<body>
<ahref="">百度</a>
<hr/>
<ahref="">网易</a>
<hr/>
<ahref="">中央广播电视</a>
<hr/>
</body>
</html>
2状态伪类选择器:checked选中的复选按钮或单选按钮表单元素:enabled所有启用的表单元素:disabled所有禁用的表单元素状态伪类选择器：它们主要是针对form表单元素进行操作。3否定伪类选择器否定伪类选择器：E:not(F)选择所有除元素F外的E元素<html><head><title>否定伪类选择器</title><styletype="text/css">input:not([type="submit"]){border:1pxsolidred;}</style></head><body><form>用户名：<inputtype="text"/><br/>密码：<inputtype="text"/><br/><inputtype="submit"value="提交"/></form></body></html>总结：CSS伪类是用来添加一些选择器的特殊效果。由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。CSS基础
--伪类选择器2郭春丽01结构伪类选择器作用目录02结构伪类选择器使用案例（1）作用：根据元素在HTML中的结构关系查找元素（2）优势：减少对于HTML中类选择器的依赖，有利于保持代码整洁（3）场景：常用于查找某父级选择器中的子元素结构伪类选择器：选择器说明示例E:first-child{}匹配父元素中第一个子元素，且是E元素p:first-child，选择的是p元素，它属于其父元素的首个子元素E:last-child{}匹配父元素中最后一个子元素，且是E元素E:nth-child(n){}匹配父元素中第n个子元素，且是E元素p:nth-child(2)，选择的是p元素，它属于其父元素的第二个子元素E:nth-last-child(n){}匹配父元素中倒数第n个子元素，且是E元素E:only-child{}父元素内只包含一个子元素，且是E元素（4）使用方法：选择器说明示例E:first-of-type{}父元素内具有指定E类型的第一个元素，等价于:nth-of-type(1)p:first-child，选择的是p元素，它属于其父元素的首个子元素E:last-of-type{}父元素内具有指定类型的最后一个元素。E:nth-of-type(n){}父元素内具有指定E类型的第n个元素p:nth-child(2)，选择的是p元素，它属于其父元素的第二个子元素E:nth-last-of-type(n){}父元素内具有指定E类型的倒数第n个元素E:only-of-type{}选择父元素只包含一个同类型子元素，且该子元素匹配选择E元素。n的取值：1、n可以是具体的一个数值，比如0、1、2、3、4、5、6、……2、n可以组成一个公式公式功能2n、even偶数2n+1、odd、2n-1奇数n+5找到从第5个往后-n+5找到前5个<!DOCTYPEhtml><html><head><style>p:nth-of-type(2){background:#ff0000;}p:nth-child(2){background:#0000ff;}</style></head><body><h1>这是标题</h1><p>第一个段落。</p><p>第二个段落。</p><p>第三个段落。</p><p>第四个段落。</p><p>第五个段落。</p></body></html>
理解技巧：冒号前面要匹配的元素，E:nth-child(n)，是看父元素下排列在位置n的子元素。E:nth-of-type(n)，是看父元素下排列在位置n的指定类型的元素。可以分为三个步骤：1、找E元素的父元素；2、找位置：父元素下的子元素里，排列在位置n的
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2025年北海公考面试试题及答案
- 2025年音乐教师二级试题及答案
- 2025年机车网络控制考试题及答案
- 周公《诫伯禽书》：中国第一部成文家训
- 2025年社区小食堂面试题及答案
- 2025年国学简单测试题及答案
- 2025年郑州护士面试试题及答案
- 2025年窗帘装修测试题及答案
- 2025年粤语进阶测试题及答案
- 2025年历史学笔试复试题及答案
- 《PLC应用技术（西门子S7-1200）第二版》全套教学课件
- 第一单元练习卷（单元测试）2023-2024学年统编版语文六年级下册
- 新《铁路劳动安全》考试题库500题（含答案）
- 注塑正交试验(DOE)案例表
- 漯河市物业服务收费管理办法
- 2022年湖南（土建）二级造价师考试题库汇总（含基础和实务）
- 历届全国初中数学联赛真题及答案
- 颈椎病ppt课件
- 基岩标(分层标)结构示意图
- 人教版新课标六年级数学下册(4~6单元)重点知识归纳
- 石油石化用化学剂产品质量认可实施细则
评论
0/150
提交评论