CSS-选择器-基础选择器
分类:
基础选择器:
1.基础选择器
1.id选择器:选择器具体的id属性值的元素,建议在一个html页面中id值唯一
语法:#id属性值{}
2.元素选择器:选择具有相同标签名称的元素
语法:标签名称{}
注意:id选择器优先级高于元素选择器
3.类选择器:选择具有相同的class属性值的元素
语法:.class属性值{}
注意:类选择器优先高于元素选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基础选择器</title> <style> #div1{<!--id选择器--> color: red; } div{<!--元素选择器--> color: #11c900; } .cls1{<!--类选择器--> color: blue; } </style> </head> <body> <!--基础选择器--> <!--1.基础选择器 1.id选择器:选择器具体的id属性值的元素,建议在一个html页面中id值唯一 语法:#id属性值{} 2.元素选择器:选择具有相同标签名称的元素 语法:标签名称{} 注意:id选择器优先级高于元素选择器 3.类选择器:选择具有相同的class属性值的元素 语法:.class属性值{} 注意:类选择器优先高于元素选择器 --> <div id="div1">伟明老婆</div> <div>伟明二老婆</div> <p class="cls1">伟明三老婆</p> </body> </html>
CSS-选择器-扩展选择器
1.选择所有元素:
语法:* {}
2.并集选择器:
语法:选择器1,选择器2 {}
3.子选择器:筛选选择器1元素下的选择器2元素
语法:选择器1 选择器2 {}
4.父选择器:筛选选择器2的父元素选择器1
语法:选择器1 > 选择器2 {}
5.属性选择器:选择元素名称,属性名=属性值的元素
语法:元素名称【属性名=”属性值”】{}
6.伪类选择器:选择一些元素具有的状态
语法:元素:状态{}
如:<a>
状态:
link:初始化状态
visited:被访问过的状态
active:正在访问状态
hover:鼠标悬浮状态
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>扩展选择器</title> <style> div p{/*子选择器 */ color: red; } div > p{ /*父选择器*/ border: 1px solid; } input[type='text']{/*属性选择器*/ border: 5px solid; } a:link{/*初始化颜色*/ color: pink; } a:hover{/*鼠标悬浮颜色*/ color: green; } a:active{/*鼠标点击颜色*/ color: yellow; } a:visited{/*访问过的颜色*/ color: red; } </style> </head> <body> <div> <p>伟明大老婆</p> </div> <p>伟明情人</p> <input type="text"><br> <input type="password"><br> <a href="#">百度</a> </body> </html>
原文地址:http://www.cnblogs.com/qihaokuan/p/16827685.html
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请务用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性