update css file

This commit is contained in:
qianguyihao 2017-07-18 13:24:34 +08:00
parent b464dbb4e2
commit 2e4dc3f51d
3 changed files with 254 additions and 48 deletions

View File

@ -8,3 +8,5 @@
- [前端开发面试题](https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions)
在逛公众号「前端大全」的时候发现的然后顺着找到了对应的GitHub链接。面试题有答案哦。

View File

@ -1,9 +1,7 @@
文件名01-CSS图文详解css样式表和选择器
01-CSS图文详解----CSS选择器介绍
## 主要内容
@ -442,7 +440,7 @@ CSS的选择器分为两大类基本选择题和扩展选择器。
- 标签选择器:针对一类标签
- ID选择器针对特定的一个标签使用
- 类选择器:针对你想要的所有标签使用
- 通用选择器:针对所有的标签都适用
- 通用选择器(通配符):针对所有的标签都适用(不建议使用)
下面来分别讲一讲。
@ -636,13 +634,30 @@ class属性和id非常相似任何的标签都可以携带class属性。
- ID选择器是只针对特定的标签(一个)ID是此标签在此页面上的唯一标识。
- 类选择器可以被多种标签使用。
### 4、通配符`*`:匹配任何标签
通用选择器将匹配任何标签。不建议使用IE有些版本不支持大网站增加客户端负担。
效率不高,如果页面上的标签越多,效率越低,所以页面上不能出现这个选择器。
举例:
```css
*{
margin-left:0px;
margin-top:0px;
}
```
效果:
![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-09.png)
## CSS的三种高级选择器
## CSS的几种高级选择器
**高级选择器:**
@ -651,8 +666,7 @@ class属性和id非常相似任何的标签都可以携带class属性。
- 并集选择器(分组选择器):用逗号隔开
- 伪类选择器
下面详细讲一下这几种扩展选择器。
下面详细讲一下这几种高级(扩展)选择器。
@ -764,7 +778,31 @@ 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`(后代选择器)不是一个意思。
@ -779,12 +817,11 @@ h3.special.zhongyao{
上面这种写法,是 IE7 开始兼容的IE6 不兼容。
交集选择器,我们一般都是以标签名开头,比如`div.haha` 比如`p.special`。
### 3、并集选择器分组选择器定义的时候用逗号隔开
### 3、并集选择器定义的时候用逗号隔开
三种基本选择器都可以放进来。
@ -801,32 +838,7 @@ p,h1,.one,#mytitle{
![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-10.png)
### 4、通配符`*`:匹配任何标签
通用选择器将匹配任何标签。不建议使用IE有些版本不支持大网站增加客户端负担。
效率不高,如果页面上的标签越多,效率越低,所以页面上不能出现这个选择器。
举例:
```css
*{
margin-left:0px;
margin-top:0px;
}
```
效果:
![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-09.png)
### 3、伪类选择器
### 4、伪类选择器待定
对于`<a>`标签,其对应几种不同的状态:
- `link`:超链接点击之前
@ -842,6 +854,7 @@ CSS允许对于元素的不同状态定义不同的样式信息。伪类选
下面来分别讲一下这两种伪类选择器。
**1静态伪类**
用于以下两个状态:
- `link`:超链接点击之前
- `visited`:超链接点击之后
@ -882,7 +895,9 @@ CSS允许对于元素的不同状态定义不同的样式信息。伪类选
问:既然`a{}`定义了超链的属性,和`a:link{}`都定义了超链点击之前的属性,那这两个有啥区别呢?
答:
**`a{}`和`a:link{}`的区别:**
- `a{}`定义的样式针对所有的超链接(包括括锚点)
- `a:link{}`定义的样式针对所有写了href属性的超链接(不包括锚点)
@ -1004,11 +1019,155 @@ CSS允许对于元素的不同状态定义不同的样式信息。伪类选
![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-04.gif)
## 一些 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样式表的冲突解决
1、对于相同的选择器其样式表排序行级 > 内嵌 > 外部(就近原则)
2、对于相同方式的样式表其选择器排序ID选择器 > 类选择器 > 标签选择器
3、外部样式表的ID选择器 > 内嵌样式表的标签选择器
- 1、对于相同的选择器其样式表排序行级 > 内嵌 > 外部(就近原则)
- 2、对于相同方式的样式表其选择器排序ID选择器 > 类选择器 > 标签选择器
- 3、外部样式表的ID选择器 > 内嵌样式表的标签选择器
> 总结就近原则。ID选择器优先级最大。
@ -1017,8 +1176,9 @@ CSS允许对于元素的不同状态定义不同的样式信息。伪类选
![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-14.png)
另外还有两个冲突的情况:
1、对同一个标签如果用到了了多个相同的内嵌样式表它的优先级 **定义**的样式表中,谁最近,就用谁。
2、对于同一个标签如果引用了多个相同的外部样式表它的优先级html文件中引用样式表的位置越近就用谁。
- 1、对同一个标签如果用到了了多个相同的内嵌样式表它的优先级 **定义**的样式表中,谁最近,就用谁。
- 2、对于同一个标签如果引用了多个相同的外部样式表它的优先级html文件中引用样式表的位置越近就用谁。
例如:

View 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较劲。