update css file
This commit is contained in:
qianguyihao
parent
b464dbb4e2
commit
2e4dc3f51d
@ -7,4 +7,6 @@
|
||||
|
||||
- [前端开发面试题](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选择器：针对特定的一个标签使用
|
||||
- 类选择器：针对你想要的所有标签使用
|
||||
- 通用选择器：针对所有的标签都适用
|
||||
- 通用选择器（通配符）：针对所有的标签都适用（不建议使用）
|
||||
|
||||
下面来分别讲一讲。
|
||||
|
||||
@ -636,13 +634,30 @@ class属性和id非常相似，任何的标签都可以携带class属性。
|
||||
- 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标签。
|
||||
|
||||
交集选择器，我们一般都是以标签名开头，比如`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{
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 4、通配符`*`：匹配任何标签
|
||||
|
||||
通用选择器，将匹配任何标签。不建议使用，IE有些版本不支持，大网站增加客户端负担。
|
||||
|
||||
效率不高，如果页面上的标签越多，效率越低，所以页面上不能出现这个选择器。
|
||||
|
||||
|
||||
举例：
|
||||
|
||||
```css
|
||||
*{
|
||||
margin-left:0px;
|
||||
margin-top:0px;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
### 3、伪类选择器
|
||||
### 4、伪类选择器（待定）
|
||||
|
||||
对于`<a>`标签，其对应几种不同的状态：
|
||||
- `link`：超链接点击之前
|
||||
@ -842,6 +854,7 @@ CSS允许对于元素的不同状态，定义不同的样式信息。伪类选
|
||||
下面来分别讲一下这两种伪类选择器。
|
||||
|
||||
**（1）静态伪类：**
|
||||
|
||||
用于以下两个状态：
|
||||
- `link`：超链接点击之前
|
||||
- `visited`：超链接点击之后
|
||||
@ -882,11 +895,13 @@ CSS允许对于元素的不同状态，定义不同的样式信息。伪类选
|
||||
|
||||
问：既然`a{}`定义了超链的属性，和`a:link{}`都定义了超链点击之前的属性，那这两个有啥区别呢？
|
||||
答：
|
||||
**`a{}`和`a:link{}`的区别： **
|
||||
|
||||
**`a{}`和`a:link{}`的区别：**
|
||||
|
||||
- `a{}`定义的样式针对所有的超链接(包括括锚点)
|
||||
- `a:link{}`定义的样式针对所有写了href属性的超链接(不包括锚点)
|
||||
|
||||
**（2）动态伪类 : **
|
||||
**（2）动态伪类: **
|
||||
|
||||
用于以下几种状态：
|
||||
- `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样式表的冲突解决
|
||||
|
||||
1、对于相同的选择器，其样式表排序：行级 > 内嵌 > 外部（就近原则）
|
||||
2、对于相同方式的样式表，其选择器排序：ID选择器 > 类选择器 > 标签选择器
|
||||
3、外部样式表的ID选择器 > 内嵌样式表的标签选择器
|
||||
- 1、对于相同的选择器，其样式表排序：行级 > 内嵌 > 外部（就近原则）
|
||||
- 2、对于相同方式的样式表，其选择器排序：ID选择器 > 类选择器 > 标签选择器
|
||||
- 3、外部样式表的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