+
+```
+
+不能选择：
+
+```html
+ 我是div的儿子
+
+
+```
+
+
+### 2.序选择器
+
+> IE8开始兼容；IE6、7都不兼容
+
+设置无序列表`-
+
-
+
我是div的重孙子
+
+
- `中的第一个`
- `为红色：
+
+```html
+
+```
+
+设置无序列表`
- `中的最后一个`
- `为红色：
+
+```css
+ ul li:last-child{
+ color:blue;
+ }
+```
+
+序选择器还有更复杂的用法，以后再讲。
+
+由于浏览器的更新需要过程，所以现在如果公司还要求兼容IE6、7，那么就要自己写类名：
+
+```html
+
-
+
- 项目 +
- 项目 +
- 项目 +
- 项目 +
- 项目 +
- 项目 +
- 项目 +
- 项目 +
- 项目 +
- 项目 +
我是一个标题
+我是一个段落
+我是一个段落
+我是一个段落
+我是一个标题
+我是一个段落
+我是一个段落
+我是一个段落
+我是一个标题
+我是一个段落
+我是一个段落
+我是一个段落
+我是一个标题
+``` + + +效果如下： + + + + +这种选择器作用不大。 + + ##我的公众号 diff --git a/02-CSS/04-CSS选择器：伪类.md b/02-CSS/04-CSS选择器：伪类.md index 7021f0a..d018ff0 100644 --- a/02-CSS/04-CSS选择器：伪类.md +++ b/02-CSS/04-CSS选择器：伪类.md @@ -1,63 +1,107 @@ +> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8280814.html)，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。 + +> 以下是正文。 + + +## 伪类（伪类选择器） + + +**伪类**：同一个标签，根据其**不同的种状态，有不同的样式**。这就叫做“伪类”。伪类用冒号来表示。 + + +比如div是属于box类，这一点很明确，就是属于box类。但是a属于什么类？不明确。因为需要看用户点击前是什么状态，点击后是什么状态。所以，就叫做“伪类”。 + +### 静态伪类和动态伪类 -### 4、伪类选择器（待定） -对于``标签，其对应几种不同的状态： -- `link`：超链接点击之前 -- `visited`：超链接点击之后 -- `focus`：是某个标签获得焦点的时候（比如某个输入框获得焦点） -- `hover`：鼠标放到某个标签上的时候 -- `active`：点击某个标签没有松鼠标时 +伪类选择器分为两种。 -CSS允许对于元素的不同状态，定义不同的样式信息。伪类选择器又分为两种： - - 静态伪类：**只能用于超链接** - - 动态伪类：针对所有标签都适用 +（1）**静态伪类**：只能用于**超链接**的样式。如下： -下面来分别讲一下这两种伪类选择器。 +- `:link` 超链接点击之前 +- `:visited` 链接被访问过之后 -**（1）静态伪类：** +PS：以上两种样式，只能用于超链接。 -用于以下两个状态： - - `link`：超链接点击之前 - - `visited`：超链接点击之后 +（2）**动态伪类**：针对**所有标签**都适用的样式。如下： - > **注意：上面这两个状态只能使用于超链接**。 +- `:hover` “悬停”：鼠标放到标签上的时候 +- `:active` “激活”： 鼠标点击标签，但是不松手时。 +- `:focus` 是某个标签获得焦点时的样式（比如某个输入框获得焦点） -举例： +PS：以上三种样式，只能用于超链接。 -```html - +a标签有4种伪类（即对应四种状态），要求背诵。如下： + +- `:link` “链接”：超链接点击之前 +- `:visited` “访问过的”：链接被访问过之后 +- `:hover` “悬停”：鼠标放到标签上的时候 +- `:active` “激活”： 鼠标点击标签，但是不松手时。 + + +对应的代码如下：（不带注释） + +```css + a:link{ + color:red; + } + a:visited{ + color:orange; + } + a:hover{ + color:green; + } + a:active{ + color:black; + } ``` -效果： +对应的代码如下：（带注释） - +``` + /*让超链接点击之前是红色*/ + a:link{ + color:red; + } -上图中，超链接点击之前是红色，点击之后是绿色。 + /*让超链接点击之后是绿色*/ + a:visited{ + color:orange; + } + /*鼠标悬停，放到标签上的时候*/ + a:hover{ + color:green; + } + /*鼠标点击链接，但是不松手的时候*/ + a:active{ + color:black; +``` -问：既然`a{}`定义了超链的属性，和`a:link{}`都定义了超链点击之前的属性，那这两个有啥区别呢？ +记住，在css中，这四种状态**必须按照固定的顺序写**： + +> a:**l**ink 、a:visited 、a:hover 、a:active + +如果不按照顺序，那么将失效。“爱恨准则”：love hate。必须先爱，后恨。 + +看一下这四种状态的动图效果： + + + + +### 超链接的美化 + + +问：既然`a{}`定义了超链的属性，和`a:link{}`定义了超链点击之前的属性，那这两个有啥区别呢？ + 答： **`a{}`和`a:link{}`的区别：** @@ -65,16 +109,135 @@ CSS允许对于元素的不同状态，定义不同的样式信息。伪类选 - `a{}`定义的样式针对所有的超链接(包括锚点) - `a:link{}`定义的样式针对所有写了href属性的超链接(不包括锚点) -**（2）动态伪类: ** -用于以下几种状态： - - `focus`：是某个标签获得焦点的时候（比如某个输入框获得焦点） - - `hover`：鼠标放到某个标签上的时候 - - `active`：点击某个标签没有松鼠标时 - > 注意：上面这三种状态针适用于所有的标签。 +超链接a标签在使用的时候，比较难。因为不仅仅要控制a这个盒子，也要控制它的伪类。 -举例： +我们一定要将a标签写在前面，将`:link、:visited、:hover、:active`这些伪类写在后面。 + +举个例子。如果效果： + + + + +为了实现上面这个效果，完整版代码如下： + +```html + + + + +Document + + + + + + +``` + +上方代码中，我们发现，当我们在定义`a:link`和 `a:visited`这两个伪类的时候，如果它们的属性相同，我们其实可以写在一起，用逗号隔开就好，摘抄如下： + +```css + .nav ul li a{ + display: block; + width: 120px; + height: 50px; + } + /*两个伪类的属性，可以用逗号隔开*/ + .nav ul li a:link , .nav ul li a:visited{ + text-decoration: none; + background-color: purple; + color:white; + } + .nav ul li a:hover{ + background-color: orange; + } +``` + +如上方代码所示，最标准的写法，就是把link、visited、hover这三个伪类都要写。但是前端开发工程师在大量的实践中，发现不写link、visited也挺兼容。写法是： + +> a:link、a:visited都是可以省略的，简写在a标签里面。也就是说，a标签涵盖了link、visited的状态（前提是都具有了相同的属性）。写法如下： + + +```css + .nav ul li a{ + display: block; + width: 120px; + height: 50px; + text-decoration: none; + background-color: purple; + color:white; + } + .nav ul li a:hover{ + background-color: orange; + } + +``` + +当然了，在写`a:link`、`a:visited`这两个伪类的时候，要么同时写，要么同时不写。如果只写`a`属性和`a:link`属性，不规范。 + + +## 动态伪类举例 + +我们在第一段中描述过，下面这三种动态伪类，针对所有标签都适用。 + +- `:hover` “悬停”：鼠标放到标签上的时候 +- `:active` “激活”： 鼠标点击标签，但是不松手时。 +- `:focus` 是某个标签获得焦点时的样式（比如某个输入框获得焦点） + +我们不妨来举下例子。 + +举例1： ```html -``` - -设置无序列表`- `中的最后一个`
- `为红色：
-
-```css
- ul li:last-child{
- color:blue;
- }
-```
-
-序选择器还有更复杂的用法，以后再讲。
-
-由于浏览器的更新需要过程，所以现在如果公司还要求兼容IE6、7，那么就要自己写类名：
-
-```html
-
-
-
- 项目 -
- 项目 -
- 项目 -
- 项目 -
- 项目 -
- 项目 -
- 项目 -
- 项目 -
- 项目 -
- 项目 -
我是一个标题
-我是一个段落
-我是一个段落
-我是一个段落
-我是一个标题
-我是一个段落
-我是一个段落
-我是一个段落
-我是一个标题
-我是一个段落
-我是一个段落
-我是一个段落
-我是一个标题
-``` - - -效果如下： - - - - -这种选择器作用不大。 - - -### css精灵 - + diff --git a/02-CSS/08-CSS案例讲解：博雅互动.md b/02-CSS/08-CSS案例讲解：博雅互动.md index 81e2a95..59031cb 100644 --- a/02-CSS/08-CSS案例讲解：博雅互动.md +++ b/02-CSS/08-CSS案例讲解：博雅互动.md @@ -55,113 +55,117 @@ - -Document - + --+---- -
- --- 加入我们 --+``` +导航栏的效果如下： + +20180114_1332.gif @@ -177,8 +181,227 @@ ## 内容区域的制作 - - +导航栏+banner+内容区域的完整代码如下： + + +```html + + + + +++++ +
+ +++ 加入我们 ++Document + + + +++ + + + + + + + + + +``` + + +代码解释： + + + + +最终实现的效果如下： + +20180114_1405.png++++ +
+ +++ 加入我们 ++
- `为红色：
+
+```css
+ ul li:last-child{
+ color:blue;
+ }
+```
+
+序选择器还有更复杂的用法，以后再讲。
+
+由于浏览器的更新需要过程，所以现在如果公司还要求兼容IE6、7，那么就要自己写类名：
+
+```html
+
