CSS选择器学习小结
关于CSS选择器的问题,在实际项目中,以及一般的前端面试中会经常遇到。下面对此做一小结,梳理和巩固相关方面知识。(如有不妥之处,还望大家及时批评指正,以免误导他人)
一、选择器种类
1、id选择器(#myid);2、类选择器(.myclass);3、标签选择器(div,ul,span);4、相邻兄弟选择器(h1+p);5、子选择器(div>span);6、后代选择器(div span,div.myclass);7、通配符选择器(*);8、属性选择器(input[type="text"]);9、伪类选择器(a:link,input:focus)。
以上9种选择器的使用方法这里不做过多介绍。
二、选择器效率
关于选择器的效率,我们应该记住以下几点:
1、CSS选择器的效率:1>2>3>4>5>6>7>8>9,也就是说id选择器的效率最高,伪类的选择器效率最低。
2、CSS选择器的匹配规则:从右向左,而不是从左向右,因为这样效率要高。
3、在浏览器中,使用id选择器和类选择器比使用相邻兄弟选择器、子选择器和后代选择器对页面性能的提升更值得关注。
三、选择器的优先级
要认识选择器的优先级我们得先认识选择器的特殊性,如下表所示:
选择器 | 特殊性值 |
id选择器 |
0,1,0,0 |
类选择器,属性选择器,伪类选择器 |
0,0,1,0 |
标签选择器,伪元素(:first-letter,:firstline,:before,:after,:selection) |
0,0,0,1 |
相邻兄弟选择器、子选择器和后代选择器 |
拆分为两个选择器再计算 |
通配符 |
0,0,0,0 |
注意:继承没有特殊性,也就是说0特殊性比继承要强;!important重要性比非重要性要强;内联特殊性值为:1,0,0,0(CSS2包含三个值为1,0,0);特殊性值0,0,1,0比0,0,0,13要高。
优先级顺序也就是:important>内联>id选择器>(类选择器,属性选择器,伪类选择器)>(标签选择器,伪元素)>通配符>继承。
优先级的四大原则:
1、继承不如指定
2、#id>.class>标签选择符
3、包含越具体越强大
4、标签#id>#id;标签.class>.class
四大原则权重:1>2>3>4。
CSS选择器学习小结的更多相关文章
- html之css选择器学习
相关内容: 什么是css选择器 标签选择器 类选择器 id选择器 并集选择器(分组选择器) 交集选择器 后代选择器 子标签选择器 属性选择器 相邻兄弟选择器 伪类选择器 伪元素选择器(伪对象选择器) ...
- css选择器学习(一)
1.通用选择器“*”和元素选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- CSS 选择器学习总结
1.id 选择器 #idname{color:red;} 2.class选择器 .classname{} 3.标签选择器 div{} 4.通配符选择器 *{} 5. 属性选择器 [id]{ } 5.选 ...
- 记录:CSS选择器学习
常用选择器:标签选择器.类选择器.ID选择器 子选择器(Child selectors) 还有一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素. .con> ...
- css选择器学习(二)属性选择器
属性选择器 /*******************************************css2中的属性选择器*************************************** ...
- CSS选择器 使用小结
==> .x-boundlist-floating[style$="px;"] .x-boundlist-item 元素中含有Style属性,并且属性值以"px;& ...
- css 选择器 (学习笔记)
参考 http://zachary-guo.iteye.com/blog/605116 1. div+p 选择紧接在 <div> 元素之后的所有 <p> 元素.解释 : fi ...
- XPath、CSS 选择器 -学习地址
http://www.w3school.com.cn/cssref/css_selectors.asp http://www.w3school.com.cn/xpath/xpath_syntax.as ...
- 第七十节,css选择器
css选择器 学习要点: 1.选择器总汇 2.基本选择器 3.复合选择器 4.伪元素选择器 本章主要探讨 HTML5中 CSS选择器,通过选择器定位到想要设置样式的元素.目前CSS选择器的版本已经升 ...
随机推荐
- weexpack 使用
weexpack 的github地址:https://github.com/weexteam/weex-pack weex-toolkit: 初始化的项目是针对开发单个 Weex 页面而设计的,也就是 ...
- git: fatal: Could not read from remote repository
This is probably an Intellij problem. Your key are managed natively by ssh, and Intellij has it's ow ...
- rainmeter 修正天气插件信息不准确 设置居住城市
rainmeter天气插件的原理是用爬虫抓取一个天气网页然后用自带的那一套正则表达式匹配出天气信息 在国外官网社区下载的插件的天气信息城市都会出现问题(因为插件作者又不知道你在哪),解决方法是在原基础 ...
- 【Spring学习笔记-MVC-13】Spring MVC之文件上传
作者:ssslinppp 1. 摘要 Spring MVC为文件上传提供了最直接的支持,这种支持是通过即插即用的MultipartResolve实现的.Spring使用Jakarta Co ...
- Zeroc Ice 3.6.1 生成 vs2015 c++ 版本库及相关配置
背景: 目前发布的Ice最新版本为3.6.0,使用的vs2013编译的,vs2015版本正在开发,发布只是时间问题: 不过官方实在给力,github上的源码已经支持vs2015编译了.源码版本为3.6 ...
- python使用smtplib发送邮件
python要实现发送邮件的功能,需要使用smtplib库. 1. 过程大致如下: 1. 建立和SMTP邮件服务器的连接 # 默认端口25 smtp = smtplib.SMTP(host, port ...
- JavaWeb中读取文件资源的路径问题 -- 转自新浪博客
在做javaweb开发的时候,我们可能会需要从本地硬盘上读取某一个文件资源,或者修改某一个文件,这个时候就需要先找到这个文件,然后用FileInputStrem等文件字节.字符流来将这个文件读取到内存 ...
- EasyMall 项目记录-环境搭建
一.搭建项目运行的环境 (1)修改hosts文件 更改:C:\Windows\System32\drivers\etc目录下hosts文件 添加:127.0.0.1 www.easyma ...
- ASP.NET Web Pages:Chart 帮助器
ylbtech-.Net-ASP.NET Web Pages:Chart 帮助器 1.返回顶部 1. ASP.NET Web Pages - Chart 帮助器 Chart 帮助器 - 众多有用的 A ...
- 关于clearfix和clear的研究
今天领导跟我说到这个问题,我上网找了些资料,已转载一篇文章到本博客(后一篇),摘自百度文库. ps:还有一种写法就是: CSS代码: .clearfix:after { content: " ...