update css file
This commit is contained in:
qianguyihao
parent
b464dbb4e2
commit
2e4dc3f51d
@ -8,3 +8,5 @@
|
|||||||
- [前端开发面试题](https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions)
|
- [前端开发面试题](https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions)
|
||||||
|
|
||||||
在逛公众号「前端大全」的时候发现的，然后顺着找到了对应的GitHub链接。面试题有答案哦。
|
在逛公众号「前端大全」的时候发现的，然后顺着找到了对应的GitHub链接。面试题有答案哦。
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,9 +1,7 @@
|
|||||||
|
|
||||||
|
|
||||||
文件名：01-CSS图文详解（一）：css样式表和选择器
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
01-CSS图文详解（一）----CSS选择器介绍
|
||||||
|
|
||||||
|
|
||||||
## 主要内容
|
## 主要内容
|
||||||
@ -442,7 +440,7 @@ CSS的选择器分为两大类：基本选择题和扩展选择器。
|
|||||||
- 标签选择器：针对一类标签
|
- 标签选择器：针对一类标签
|
||||||
- ID选择器：针对特定的一个标签使用
|
- ID选择器：针对特定的一个标签使用
|
||||||
- 类选择器：针对你想要的所有标签使用
|
- 类选择器：针对你想要的所有标签使用
|
||||||
- 通用选择器：针对所有的标签都适用
|
- 通用选择器（通配符）：针对所有的标签都适用（不建议使用）
|
||||||
|
|
||||||
下面来分别讲一讲。
|
下面来分别讲一讲。
|
||||||
|
|
||||||
@ -636,13 +634,30 @@ class属性和id非常相似，任何的标签都可以携带class属性。
|
|||||||
- ID选择器是只针对特定的标签(一个)，ID是此标签在此页面上的唯一标识。
|
- ID选择器是只针对特定的标签(一个)，ID是此标签在此页面上的唯一标识。
|
||||||
- 类选择器可以被多种标签使用。
|
- 类选择器可以被多种标签使用。
|
||||||
|
|
||||||
|
### 4、通配符`*`：匹配任何标签
|
||||||
|
|
||||||
|
通用选择器，将匹配任何标签。不建议使用，IE有些版本不支持，大网站增加客户端负担。
|
||||||
|
|
||||||
|
效率不高，如果页面上的标签越多，效率越低，所以页面上不能出现这个选择器。
|
||||||
|
|
||||||
|
|
||||||
|
举例：
|
||||||
|
|
||||||
|
```css
|
||||||
|
*{
|
||||||
|
margin-left:0px;
|
||||||
|
margin-top:0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
效果：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## CSS的几种高级选择器
|
||||||
|
|
||||||
|
|
||||||
## CSS的三种高级选择器
|
|
||||||
|
|
||||||
**高级选择器：**
|
**高级选择器：**
|
||||||
|
|
||||||
@ -651,8 +666,7 @@ class属性和id非常相似，任何的标签都可以携带class属性。
|
|||||||
- 并集选择器（分组选择器）：用逗号隔开
|
- 并集选择器（分组选择器）：用逗号隔开
|
||||||
- 伪类选择器
|
- 伪类选择器
|
||||||
|
|
||||||
下面详细讲一下这几种扩展选择器。
|
下面详细讲一下这几种高级（扩展）选择器。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -764,7 +778,31 @@ h3.special{
|
|||||||
|
|
||||||
选择的元素要求同时满足两个条件：必须是h3标签，然后必须是special标签。
|
选择的元素要求同时满足两个条件：必须是h3标签，然后必须是special标签。
|
||||||
|
|
||||||
交集选择器，我们一般都是以标签名开头，比如`div.haha` 比如`p.special`。
|
举例：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>交集选择器测试</title>
|
||||||
|
<style type="text/css">
|
||||||
|
h3.special {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h3 class="special zhongyao">标题1</h3>
|
||||||
|
<h3 class="special">我也是标题</h3>
|
||||||
|
<p>我是段落</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
效果图：.png
|
||||||
|
|
||||||
|
|
||||||
注意，交集选择器没有空格。所以，没有空格的`div.red`（交集选择器）和有空格的`div .red`（后代选择器）不是一个意思。
|
注意，交集选择器没有空格。所以，没有空格的`div.red`（交集选择器）和有空格的`div .red`（后代选择器）不是一个意思。
|
||||||
|
|
||||||
@ -779,12 +817,11 @@ h3.special.zhongyao{
|
|||||||
|
|
||||||
上面这种写法，是 IE7 开始兼容的，IE6 不兼容。
|
上面这种写法，是 IE7 开始兼容的，IE6 不兼容。
|
||||||
|
|
||||||
|
交集选择器，我们一般都是以标签名开头，比如`div.haha` 比如`p.special`。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 3、并集选择器：定义的时候用逗号隔开
|
||||||
|
|
||||||
### 3、并集选择器（分组选择器）：定义的时候用逗号隔开
|
|
||||||
|
|
||||||
三种基本选择器都可以放进来。
|
三种基本选择器都可以放进来。
|
||||||
|
|
||||||
@ -801,32 +838,7 @@ p,h1,.one,#mytitle{
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 4、伪类选择器（待定）
|
||||||
|
|
||||||
|
|
||||||
### 4、通配符`*`：匹配任何标签
|
|
||||||
|
|
||||||
通用选择器，将匹配任何标签。不建议使用，IE有些版本不支持，大网站增加客户端负担。
|
|
||||||
|
|
||||||
效率不高，如果页面上的标签越多，效率越低，所以页面上不能出现这个选择器。
|
|
||||||
|
|
||||||
|
|
||||||
举例：
|
|
||||||
|
|
||||||
```css
|
|
||||||
*{
|
|
||||||
margin-left:0px;
|
|
||||||
margin-top:0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
```
|
|
||||||
|
|
||||||
效果：
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### 3、伪类选择器
|
|
||||||
|
|
||||||
对于`<a>`标签，其对应几种不同的状态：
|
对于`<a>`标签，其对应几种不同的状态：
|
||||||
- `link`：超链接点击之前
|
- `link`：超链接点击之前
|
||||||
@ -842,6 +854,7 @@ CSS允许对于元素的不同状态，定义不同的样式信息。伪类选
|
|||||||
下面来分别讲一下这两种伪类选择器。
|
下面来分别讲一下这两种伪类选择器。
|
||||||
|
|
||||||
**（1）静态伪类：**
|
**（1）静态伪类：**
|
||||||
|
|
||||||
用于以下两个状态：
|
用于以下两个状态：
|
||||||
- `link`：超链接点击之前
|
- `link`：超链接点击之前
|
||||||
- `visited`：超链接点击之后
|
- `visited`：超链接点击之后
|
||||||
@ -882,11 +895,13 @@ CSS允许对于元素的不同状态，定义不同的样式信息。伪类选
|
|||||||
|
|
||||||
问：既然`a{}`定义了超链的属性，和`a:link{}`都定义了超链点击之前的属性，那这两个有啥区别呢？
|
问：既然`a{}`定义了超链的属性，和`a:link{}`都定义了超链点击之前的属性，那这两个有啥区别呢？
|
||||||
答：
|
答：
|
||||||
**`a{}`和`a:link{}`的区别： **
|
|
||||||
|
**`a{}`和`a:link{}`的区别：**
|
||||||
|
|
||||||
- `a{}`定义的样式针对所有的超链接(包括括锚点)
|
- `a{}`定义的样式针对所有的超链接(包括括锚点)
|
||||||
- `a:link{}`定义的样式针对所有写了href属性的超链接(不包括锚点)
|
- `a:link{}`定义的样式针对所有写了href属性的超链接(不包括锚点)
|
||||||
|
|
||||||
**（2）动态伪类 : **
|
**（2）动态伪类: **
|
||||||
|
|
||||||
用于以下几种状态：
|
用于以下几种状态：
|
||||||
- `focus`：是某个标签获得焦点的时候（比如某个输入框获得焦点）
|
- `focus`：是某个标签获得焦点的时候（比如某个输入框获得焦点）
|
||||||
@ -1004,11 +1019,155 @@ CSS允许对于元素的不同状态，定义不同的样式信息。伪类选
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 一些 CSS3 选择器
|
||||||
|
|
||||||
|
> 所有的css3选择器，我们放在HTML5和CSS3课上介绍。
|
||||||
|
|
||||||
|
### 1.儿子选择器
|
||||||
|
|
||||||
|
> IE7开始兼容，IE6不兼容。
|
||||||
|
|
||||||
|
```css
|
||||||
|
div>p{
|
||||||
|
color:red;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
div的儿子p。和div的后代p的截然不同。
|
||||||
|
|
||||||
|
能够选择：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div>
|
||||||
|
<p>我是div的儿子</p>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
不能选择：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<p>我是div的重孙子</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 2.序选择器
|
||||||
|
|
||||||
|
> IE8开始兼容；IE6、7都不兼容
|
||||||
|
|
||||||
|
选择第1个li：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style type="text/css">
|
||||||
|
ul li:first-child{
|
||||||
|
color:red;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
选择最后一个1i：
|
||||||
|
|
||||||
|
```css
|
||||||
|
ul li:last-child{
|
||||||
|
color:blue;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
由于浏览器的更新需要过程，所以现在如果公司还要求兼容IE6、7，那么就要自己写类名：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<ul>
|
||||||
|
<li class="first">项目</li>
|
||||||
|
<li>项目</li>
|
||||||
|
<li>项目</li>
|
||||||
|
<li>项目</li>
|
||||||
|
<li>项目</li>
|
||||||
|
<li>项目</li>
|
||||||
|
<li>项目</li>
|
||||||
|
<li>项目</li>
|
||||||
|
<li>项目</li>
|
||||||
|
<li class="last">项目</li>
|
||||||
|
</ul>
|
||||||
|
```
|
||||||
|
|
||||||
|
用类选择器来选择第一个或者最后一个：
|
||||||
|
|
||||||
|
```html
|
||||||
|
ul li.first{
|
||||||
|
color:red;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul li.last{
|
||||||
|
color:blue;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
### 3.下一个兄弟选择器
|
||||||
|
|
||||||
|
> IE7开始兼容，IE6不兼容。
|
||||||
|
|
||||||
|
+表示选择下一个兄弟
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style type="text/css">
|
||||||
|
h3+p{
|
||||||
|
color:red;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
选择上的是h3元素后面紧挨着的第一个兄弟。
|
||||||
|
|
||||||
|
```html
|
||||||
|
<h3>我是一个标题</h3>
|
||||||
|
<p>我是一个段落</p>
|
||||||
|
<p>我是一个段落</p>
|
||||||
|
<p>我是一个段落</p>
|
||||||
|
<h3>我是一个标题</h3>
|
||||||
|
<p>我是一个段落</p>
|
||||||
|
<p>我是一个段落</p>
|
||||||
|
<p>我是一个段落</p>
|
||||||
|
<h3>我是一个标题</h3>
|
||||||
|
<p>我是一个段落</p>
|
||||||
|
<p>我是一个段落</p>
|
||||||
|
<p>我是一个段落</p>
|
||||||
|
<h3>我是一个标题</h3>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
s
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## CSS样式表的冲突解决
|
## CSS样式表的冲突解决
|
||||||
|
|
||||||
1、对于相同的选择器，其样式表排序：行级 > 内嵌 > 外部（就近原则）
|
- 1、对于相同的选择器，其样式表排序：行级 > 内嵌 > 外部（就近原则）
|
||||||
2、对于相同方式的样式表，其选择器排序：ID选择器 > 类选择器 > 标签选择器
|
- 2、对于相同方式的样式表，其选择器排序：ID选择器 > 类选择器 > 标签选择器
|
||||||
3、外部样式表的ID选择器 > 内嵌样式表的标签选择器
|
- 3、外部样式表的ID选择器 > 内嵌样式表的标签选择器
|
||||||
|
|
||||||
> 总结：就近原则。ID选择器优先级最大。
|
> 总结：就近原则。ID选择器优先级最大。
|
||||||
|
|
||||||
@ -1017,8 +1176,9 @@ CSS允许对于元素的不同状态，定义不同的样式信息。伪类选
|
|||||||
|
|
||||||
|
|
||||||
另外还有两个冲突的情况：
|
另外还有两个冲突的情况：
|
||||||
1、对同一个标签，如果用到了了多个相同的内嵌样式表，它的优先级： **定义**的样式表中，谁最近，就用谁。
|
|
||||||
2、对于同一个标签，如果引用了多个相同的外部样式表，它的优先级：html文件中，引用样式表的位置越近，就用谁。
|
- 1、对同一个标签，如果用到了了多个相同的内嵌样式表，它的优先级： **定义**的样式表中，谁最近，就用谁。
|
||||||
|
- 2、对于同一个标签，如果引用了多个相同的外部样式表，它的优先级：html文件中，引用样式表的位置越近，就用谁。
|
||||||
|
|
||||||
例如：
|
例如：
|
||||||
|
|
||||||
44
02-CSS/浏览器的兼容性问题.md
Normal file
44
02-CSS/浏览器的兼容性问题.md
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
|
||||||
|
|
||||||
|
## 浏览器的兼容性问题
|
||||||
|
|
||||||
|
IE： 微软的浏览器，随着操作系统安装的。所以每个windows都有IE浏览器。各版本如下：
|
||||||
|
|
||||||
|
- windows xp 操作系统安装的IE6
|
||||||
|
- windows vista 操作系统安装的IE7
|
||||||
|
- windows 7 操作系统安装的IE8
|
||||||
|
- windows 8 操作系统安装的IE9
|
||||||
|
- windows10 操作系统安装的edge
|
||||||
|
|
||||||
|
浏览器兼容问题，要出，就基本上就是出在IE6、7身上，这两个浏览器是非常低级的浏览器。
|
||||||
|
|
||||||
|
为了测试浏览器CSS 3的兼容性，我们可以在网上搜"css3 机器猫"关键字，然后在不同的浏览器中打开如下链接：
|
||||||
|
|
||||||
|
- <http://www1.pconline.com.cn/pcedu/specialtopic/css3-doraemon/>
|
||||||
|
|
||||||
|
测试结果如下：
|
||||||
|
|
||||||
|
20170711_1939.png
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
我们可以在[百度统计](http://tongji.baidu.com/data/)里查看浏览器的市场占有率：
|
||||||
|
|
||||||
|
IE9 5.94%
|
||||||
|
IE8 21.19%
|
||||||
|
IE7 4.79%
|
||||||
|
IE6 4.11%
|
||||||
|
|
||||||
|
我们可以在<http://html5test.com/results/desktop.html>中查看
|
||||||
|
|
||||||
|
20170711_1948.png
|
||||||
|
|
||||||
|
我们要知道典型的IE6兼容问题（面试要问），但是做项目我们兼容到IE8即可。不解决IE8以下的兼容问题，目的在于：培养更高的兴趣和眼光，别天天的跟IE6较劲。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user