30个最常用css选择器解析
更新时间:2023-11-10 16:42:01 阅读量: 教育文库 文档下载
- 30个最常用的英语单词推荐度:
- 相关推荐
30个最常用css选择器解析
作者:iiduce 文章来源:css9.net 点击数:835 更新时间:2011-7-31 你也许已经掌握了id、class、后台选择器这些基本的css选择器。但这远远不是css的全部。下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题。掌握了它们,才能真正领略css的巨大灵活性。
1.
以下是代码片段: * {
margin: 0; padding: 0; }
星状选择符会在页面上的每一个元素上起作用。web设计者经常用它将页面中所有元素的margin和padding设置为0。
*选择符也可以在子选择器中使用。
以下是代码片段: #container * {
border: 1px solid black; }
上面的代码中会应用于id为container元素的所有子元素中。
除非必要,我不建议在页面中过的的使用星状选择符,因为他的作用域太大,相当耗
浏览器资源。
兼容浏览器:IE6+、Firefox、Chrome、Safari、Opera 2. #X
以下是代码片段: #container { width: 960px; margin: auto; }
井号作用域有相应id的元素。id是我们最常用的css选择器之一。id选择器的优势是精准,高优先级(优先级基数为100,远高于class的10),作为javascript脚本钩子的不二选择,同样缺点也很明显优先级过高,重用性差,所以在使用id选择器前,我们最好问下自己,真的到了非用id选择器的地步?
兼容浏览器:IE6+、Firefox、Chrome、Safari、Opera
3. .X
以下是代码片段: .error { color: red; }
这是一个class(类)选择器。class选择器与id选择器的不同是class选择器能作用于期望样式化的一组元素。
兼容浏览器:IE6+、Firefox、Chrome、Safari、Opera 4. X Y
以下是代码片段: li a {
text-decoration: none; }
这也是我们最常用的一种选择器——后代选择器。用于选取X元素下子元素Y,要留意的点是,这种方式的选择器将选取其下所有匹配的子元素,无视层级,所以有的情况是不宜使用的,比如上述的代码去掉li下的所有a的下划线,但li里面还有个ul,我不希望ul下的li的a去掉下划线。使用此后代选择器的时候要考虑是否希望某样式对所有子孙元素都起作用。这种后代选择器还有个作用,就是创建类似命名空间的作用。比如上述代码样式的作用域明显为li。
兼容浏览器:IE6+、Firefox、Chrome、Safari、Opera 5. X
以下是代码片段: a { color: red; } ul { margin-left: 0; }
标签选择器。使用标签选择器作用于作用域范围内的所有对应标签。优先级仅仅比*高。
兼容浏览器:IE6+、Firefox、Chrome、Safari、Opera 6. X:visited和X:link
以下是代码片段: a:link { color: red; } a:visted { color: purple; }
使用:link伪类作用于未点击过的链接标签。:hover伪类作用于点击过的链接。
兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera 7. X+Y
以下是代码片段: ul + p { color: red; }
相邻选择器,上述代码中就会匹配在ul后面的第一个p,将段落内的文字颜色设置为红色。(只匹配第一个元素)
兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera 8. X>Y
以下是代码片段: div#container > ul { border: 1px solid black; }
List Item
Child
List Item List Item List Item
子选择器。与后代选择器X Y不同的是,子选择器只对X下的直接子级Y起作用。在上面的css和html例子中,div#container>ul仅对container中最近一级的ul起作用。从理论上来讲X > Y是值得提倡选择器,可惜IE6不支持。
兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera 9. X ~ Y
以下是代码片段: ul ~ p { color: red; }
相邻选择器,与前面提到的X+Y不同的是,X~Y匹配与X相同级别的所有Y元素,而X+Y只匹配第一个。
正在阅读:
30个最常用css选择器解析11-10
仙桃市病媒生物防制工作汇报03-18
2013年灾害预防及处理计划03-10
两轮自平衡机器人项目验收总结报告04-27
华为BSC6900基站命令扩容减容指导05-16
解析白居易诗词中的花意象04-27
四年级语文学测试卷11-19
《管理学原理》复习题06-02
MATLAB+图像处理命令05-03
- exercise2
- 铅锌矿详查地质设计 - 图文
- 厨余垃圾、餐厨垃圾堆肥系统设计方案
- 陈明珠开题报告
- 化工原理精选例题
- 政府形象宣传册营销案例
- 小学一至三年级语文阅读专项练习题
- 2014.民诉 期末考试 复习题
- 巅峰智业 - 做好顶层设计对建设城市的重要意义
- (三起)冀教版三年级英语上册Unit4 Lesson24练习题及答案
- 2017年实心轮胎现状及发展趋势分析(目录)
- 基于GIS的农用地定级技术研究定稿
- 2017-2022年中国医疗保健市场调查与市场前景预测报告(目录) - 图文
- 作业
- OFDM技术仿真(MATLAB代码) - 图文
- Android工程师笔试题及答案
- 生命密码联合密码
- 空间地上权若干法律问题探究
- 江苏学业水平测试《机械基础》模拟试题
- 选课走班实施方案
- 解析
- 常用
- 选择
- css
- C#1-6章习题 - 答案
- 兰州大学网络教育学院:公共关系学命题作业:阿里巴巴的企业使命
- 提高小学科学课堂教学有效性的策略研究课题 - 图文
- 2016高考高三英语一轮(外研版)复习:必修4 Module 6综合测试(含解析)
- 科普斯AK-48游戏鼠标说明书(CHS)-3.21 - 图文
- 机制机电传动控制基本指令编程
- 三废处理岗位责任制
- 重点中学小升初数学模拟试题2及答案(整理)a -
- 天津滨海职业学院毕业设计111 - 文本资料 - 图文
- 2019最新高中地理 第1单元 人口与地理环境 第2节 人口迁移学案 鲁教版必修2
- 华中师大《教学媒体的理论与实践》练习测试题库及答案
- 侵权责任法总论期末复习完美总结
- 读总经理在邮政工作座谈会上的讲话和四个简报有感
- Material Studio材料计算的工作站配置方案
- GB150-2011压力容器制造单位考核试题
- 2014年秋季《高级听说》在线作业(二)
- 天津大学考研解析学术资源
- 2017高中政治必修四课时作业:第二单元 第六课 第二框 在实践中追求和发展真理 含答案 精品
- 黄蜂之眼-FA-18新吊舱 - 图文
- 2013年东莞职业技能鉴定高级电工国家题库