前端学习之css选择器
专业素养之你知道什么是主浏览器及其内核吗?
浏览器的组成部分: 内核部分(这里是我们需要研究的东西) shell部分(这里就是外壳)
主流浏览器的区分方式是,是否有自主研发的内核
主浏览器
- IE -------------------- trident
- FireFox -------------- Gecko
- Google chrome ----- Webkit/blink
- Safari ---------------- Webkit
- Opera ---------------- presto/blink
结构、样式、行为相分离
前端开发的重要思想，结构(html), 样式(css), 行为(javascript)相分离
这里我们介绍一下这三种语言的注释方式
- html
<!-- 我是html注释 -->
- css
/* 我是CSS注释，并且我只有这一种注释方式 */
- javascript
/* 我是JavaScript块计注释 */
// 我是JavaScript行级注释
CSS
什么是css?
CSS: cascading style sheet (层叠样式表)
css的引入方式
- 行间样式, 直接在标签当中写入css样式
<div style="width:100px;height:100px;background-color:red;"></div>
- 页面级css样式, 在head标签当中写入css样式
<head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ width: 100px; height: 100px; background-color: green; } </style> </head> <body> <div></div> </body>
- 外部css文件，这种是最常用的
// html <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="./style.css"> </head> <body> <div></div> </body> //css style.css文件 div{ width: 100px; height: 100px; background-color: red; }
- link标签href属性指向css文件的地址
- link标签加载css文件的时候，适用了异步加载，不会阻塞页面。
- @import
<head> <meta charset="UTF-8"> <title>Document</title> <style> @import url("./style.css") </style> </head>这种方式引入文件的缺点
- 必须写在第一行，如果有多个则一起写在前面
- ie6的环境下，最多只能适用31次，当然这是别人测出来的数据
- 程序读取到css文件的时候，会忽略调import，等到html所有内容包括图片在内的所有资源下载完成之后才加载css文件，采用的是同步加载的方式，并且css文件的 优先级低
一个网速的bug
link标签引入和style标签修改样式没有优先级的区分，一般是谁写在后面会覆盖前面的内容。有时候因为网速的问题，link写在前面，但是link没有加载出来，导致页面使用了style当中的样式。
css选择器
-
id选择器
一个元素只能有一个id值,一个id只能对应一个元素,一一对应的并且具有唯一性
一般不常用id值来标记一个元素，因为它的唯一性，我们通常将它当作页面当中某一个模块的唯一标识
<div id = "demo">需要适用#demo选中我，我是独一无二的</div>#demo{ width: 100px; height: 100px; background-color: red; }
-
class类选择器
一个class类名可以对应多个元素，一个元素也可以对应多个calss类名，可以用来批量操作元素
<div class = "demo">使用.demo可以选中我</div>
<span class = "demo">我也可以被.demo选中哦</span>/* 这里可以选中两个元素 */ .demo{ width: 100px; height: 100px; background-color: red; }
-
标签tag选择器
直接使用标签名来选择元素，这里可以选择到页面中所有的同名标签元素
<div>适用div就可以选择到我，和页面中所有的div哦</div>
demo{
width: 100px;
height: 100px;
background-color: red;
}
- **统配符选择器 ***
选中页面当中的所有的选择器，包括html，body，head ... 一般用来初始化页面
*{
padding: 0;
margin: 0;
list-style: none;
text-decoration: none;
font-size: 0;
}
-
属性选择器
通过标签的属性来选择某个元素
<div id = "demo1">使用[id]可以选择我们两个demo</div>
<div id = "demo2">适用[id = "demo1"]就只能选中demo1了</div>
[id = "demo1"]{
width: 100px;
height: 100px;
background-color: red;
}
-
!important的用法
用它来标记的某个属性的优先级最高
<div></div>
div {
width: 100px;
height: 100px;
background-color: green!important;
}
CSS选择器的权重值
| css选择器 | 优先级大小/权重值 |
|---|---|
| !import | 无穷大，infinity |
| 行间样式 | 1000 |
| id | 100 |
| class/属性选择/伪类 | 10 |
| 标签/伪元素 | 1 |
| 统配符 | 0 |
关于计算机当中的infinity的问题
计算机当中的infinity表示无穷大，但是infinity + 1 > infinity
优先级权重的进制问题
css权重的进制表示为 256进制 所以这里的10表示的256，所以要256个1才等于一个10
权重的计算
- 权重值高的覆盖权重低的属性，权重值相同的时候，在后面的属性覆盖在前面的属性
- 出现在同一个位置的选择器，将他们的权重值相加，注意这里的权重的进制为256进制，也就是说10个class对应的属性无法覆盖一个id对应的属性！！！！
-
父子选择器/派生选择器 （空格）
具有父子的结构的元素，选择出结构中的儿子，每一个层级都可以使用任何的选择器
并且这里的父子关系不是直接父子关系，只有是子孙元素就行
<div>
<strong class = "middle">
<span>可以通过我的父辈可以选中我</span>
</strong>
</div>
<span></span>
选择出其中的strong下面的span
div .middle span {
background-color: red;
}
-
直接子元素选择器
具有父子结构的元素，通过父元素来选择直接的子元素，这里不是子孙元素
<div>
<span>通过我的父元素可以选中我</span>
</div>
div > span {
background-color: green;
}
使用父子选择器选择元素的时候浏览器的检索元素的方式
当有很多的父子选择的时候, .wrapper div .content ul li span a em,遇到这种情况的时候,浏览器是通过自右向左的方式进行排查还是自左向右的方式进行排查呢？
如果从左往右去找元素的，因为浏览器根本就不知道下一个元素到底是啥，又因为元素的树状结构，必须等它知道自己错了才回来去换路线, 假如有很多的错误的话，他会走很多的回头路。所以浏览器采用的是从右向左的方式去检索元素，只要一条路线被确认是正确的那么这个元素就被取到了。
-
并列选择器
通过多个选择器来选择某个元素，他们中间什么都不用加，并且当标签选择在里面的时候最好不要放在后面，这样浏览器会被认为是一个其他的选择器div.wrapper{}和.wrapperdev{}
<div>1</div>
<div class = "demo">1234</div>
<p class = "demo">12</p>
选择出第二个div标签
div.demo{
background-color: red;
}
- 分组选择器
使用分组选择器可以对多个不同的选择器对应的元素的某些属性进行批量操作，通过,隔开
减少代码的冗余, 也就是多个选择器可以共用一个代码块
<div>123</div>
<strong>123</strong>
<p>123</p>
使用分组选择器来讲所有的123变成红色
strong, div, p {
color: red;
}
css3当中添加了很多的更加准确的选择器，我会在后面的内容介绍他们！
