苏飞论坛

标题: 【零基础学习web前端】CSS选择器（伪类，通用，子元素） [打印本页]

---

作者: Amy    时间: 2018-12-2 17:19
标题: 【零基础学习web前端】CSS选择器（伪类，通用，子元素）


【零基础学习web前端】CSS选择器（伪类，通用，子元素）

【零基础学习web前端】教程目录导航

http://www.sufeinet.com/thread-24027-1-1.html

[CSS] 纯文本查看 复制代码

6. 伪类选择器

7.通用选择器

8.子元素择器

六、伪类选择器

CSS 伪类用于向某些选择器添加特殊的效果。比如鼠标悬停等。

[CSS] 纯文本查看 复制代码

/*Link表示链接在没有被点击时的样式。*/

        a:link{color:#999999;}

        /*Visited表示链接已经被访问时的样式。*/

        a:visited{color:#FFFF00;}

        /*Hover表示当鼠标悬停在链接上面时的样式。*/

        a:hover{color:#006600;}

        /*active表示链接选定时的样式。*/

        a:active {color: #0000FF}

注：

• 在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
  
• 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
  
• 伪类名称对大小写不敏感。
  

first-child 伪类
first-child 伪类来选择元素的第一个子元素

[CSS] 纯文本查看 复制代码

 p > i:first-child {

            font-weight:bold;

            color:red;

            } 

这个样式只会作用于p元素的第一个子元素

[HTML] 纯文本查看 复制代码

<p>这里是 <i>苏飞论坛</i>. 欢迎 <i>您</i>.</p>

    <p>这里是 <i>苏飞论坛</i>. 欢迎 <i>您</i>.</p>

效果：
(, 下载次数: 160)

上传

点击文件名下载附件
七、通用选择器

通用选择器用*来表示。例如：

[CSS] 纯文本查看 复制代码

*{

                font-size: 20px;

            }

表示所有的元素的字体大小都是12px；同时通用选择器还可以和后代选择器组合。
例如：

[CSS] 纯文本查看 复制代码

p*{

                font-size: 20px;

            }

表示所有p元素后代的所有元素都应用这个样式。

八、子元素选择器
子选择器（child selector）仅是指它的直接后代，子选择器是通过“>”进行选择。例：

[CSS] 纯文本查看 复制代码

#links a {color:red;}

#links > a {color:blue;}

[HTML] 纯文本查看 复制代码

<p id="links">

<a href="#">Div+CSS教程</a>>

<span><a href="#">CSS布局实例</a></span>

<span><a href="#">CSS教程</a></span>

</p>

我们将会看到第一个链接元素“Div+CSS教程”会显示成蓝色，而其它两个元素会显示成红色。

---

作者: 惜    时间: 2018-12-2 17:29
我只是路过打酱油的。

---

作者: 竹林风    时间: 2018-12-2 17:33
看到这帖子真是高兴！

---

作者: 竹林风    时间: 2018-12-2 17:34
很好的帖子！收藏学习。

---

作者: 惜    时间: 2018-12-2 17:35
楼主加油，我们都看好你哦。

---

作者: Amy    时间: 2018-12-2 17:41
css选择器（元素、群组、类、ID、后代）http://www.sufeinet.com/thread-24094-1-1.html

---

作者: Amy    时间: 2018-12-2 17:43

竹林风 发表于 2018-12-2 17:34
很好的帖子！收藏学习。

谢谢支持

---

作者: liu    时间: 2018-12-2 17:45
强烈支持楼主ing……

---

作者: 站长苏飞    时间: 2018-12-2 18:42
强烈支持楼主ing……

---

作者: 范范    时间: 2018-12-3 11:25
我只是路过打酱油的。

---

欢迎光临 苏飞论坛 (http://www.sufeinet.com/)

Powered by Discuz! X3.4