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

Amy

【零基础学习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>

效果：

七、通用选择器

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

[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教程”会显示成蓝色，而其它两个元素会显示成红色。

范范

我只是路过打酱油的。

站长苏飞

强烈支持楼主ing……

liu

强烈支持楼主ing……

Amy

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

谢谢支持

Amy

css选择器（元素、群组、类、ID、后代）http://www.sufeinet.com/thread-24094-1-1.html

惜

楼主加油，我们都看好你哦。

竹林风

很好的帖子！收藏学习。

竹林风

看到这帖子真是高兴！

惜

我只是路过打酱油的。