diff --git a/00-前端工具/02-推荐链接.md b/00-前端工具/02-推荐链接.md index 3dce331..b76a9a9 100644 --- a/00-前端工具/02-推荐链接.md +++ b/00-前端工具/02-推荐链接.md @@ -7,4 +7,6 @@ - [前端开发面试题](https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions) -在逛公众号「前端大全」的时候发现的,然后顺着找到了对应的GitHub链接。面试题有答案哦。 \ No newline at end of file +在逛公众号「前端大全」的时候发现的,然后顺着找到了对应的GitHub链接。面试题有答案哦。 + + diff --git a/02-CSS/01-CSS图文详解(一)----CSS选择器介绍.md b/02-CSS/01.md similarity index 88% rename from 02-CSS/01-CSS图文详解(一)----CSS选择器介绍.md rename to 02-CSS/01.md index b57c01e..6492d7a 100644 --- a/02-CSS/01-CSS图文详解(一)----CSS选择器介绍.md +++ b/02-CSS/01.md @@ -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 + + +
+ +我是段落
+ + +``` + +效果图:.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、伪类选择器(待定) 对于``标签,其对应几种不同的状态: - `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允许对于元素的不同状态,定义不同的样式信息。伪类选 ![](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的儿子
+我是div的重孙子
+我是一个段落
+我是一个段落
+我是一个段落
+我是一个段落
+我是一个段落
+我是一个段落
+我是一个段落
+我是一个段落
+我是一个段落
+