霍者博客

欢迎访问CSS3选择器最新发布

CSS3选择器-状态性伪类选择器(五)::selection伪类选择器

今天我们来学习一下selection伪类选择器,不是select下拉列表。

::selection选择器:

此选择器使用了两个“:”不是笔误,它的标准写法就是这样;作用主要是用来指定元素处于选中状态时的样式,案例如下:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3选择器-状态性伪类选择器(五)::selection伪类选择器 | 霍者博客(huozheweb.com)!</title>
<style type="text/css">
    *{margin:0; padding:0;}
    body{margin-bottom:20px; font-size:14px;}
    p{height:30px; line-height:30px; font-family:"Microsoft Yahei";}
    p::selection{color:#fff; background:#900;}/*当文字选中时,背景红色,字体颜色为白色*/
</style>
</head>
    
<body>
    <p>霍者博客(huozheweb.com)!</p>
    <p>霍者博客,关注网页设计和网页技术的前沿信息的自媒体博客</p>
    <p>CSS3选择器-状态性伪类选择器(五)::selection伪类选择器 | 霍者博客(huozheweb.com)!</p>
</body>
</html>
...

CSS3选择器-状态性伪类选择器(四):default选择器 :checked选择器和:indeterminate选择器

前三节我们学习了form元素的状态伪类选择器,今天我们再来学习一下复选框和单选框的选择器,以下选择器Opera支持最好!

:default选择器、:checked选择器和:indeterminate选择器

:default状态伪类选择器用来指定当前元素处于非选取状态的单选框或复选框的样式;

:checked状态伪类选择器用来指当前元素处于选取状态的单选框或复选框状态的样式;

...

CSS3选择器-状态性伪类选择器(二) :enabled选择器和:disabled选择器

过去我们的form元素有可用和不可用状态,我们分别为它们定义不同的class来实现,然后通过js对其元素设置可用状态的同时指定不同的class即可。然而我们有了CSS3就没必要这么麻烦了,js只需要指定可用状态,样式会自己选择,非常方便,js代码也很精简。

:enabled选择器和:disabled选择器

:enabled状态伪类选择器用来指定当前元素处于可用状态的样式;

:disabled状态伪类选择器用来指当前元素处于不可用状态的样式;

...

CSS3选择器-状态性伪类选择器(一) :hover选择器 :active选择器 :focus选择器

CSS3的伪类选择器就是多,今天我们来学习新的伪类选择器——状态伪类选择器。这些选择器都有一个共同的特征名那就是定义的样式只有当元素处于某种状态下时才起作用,在默认状态下无效。

今天我们先来接触:hover、active和:focus这三种状态伪类选择器。

:hover选择器、:active选择器和:focus选择器

:hover选择器:当鼠标悬停在所指定的元素上时所使用的样式;

...

CSS3选择器-结构性伪类选择器(五)

通过前几章的学习我们已经知道,使用nth-child选择器、nth-last-child选择器、nth-of-type和nth-last-of-type选择器可以对父元素中指定索引的子元素、奇偶子元素等进行单独样式的定义,但是还有一种情况,我们使用前面所讲的内容是无法实现的,如下图

...

CSS3选择器-结构性伪类选择器(三):nth-child :nth-last-child的高级用法 隔行换色

我们在实际的案例中,经常会有隔行换色的效果,在过去我们的做法是通过js来计算奇数行和偶数航,如今我们有了CSS3不需要这样来做了,只需要CSS定义一下即可;

上节《CSS3选择器-结构性伪类选择器(二)》,我们学习了nth-chil和nth-last-child的用法,但是本文我们将再来学习它的高级用法。

:nth-child选择器:nth-last-child选择器

...

CSS3选择器-结构性伪类选择器(二):first-child :last-child :nth-child :nth-last-child

:first-child选择器和:last-child选择器

之所以将这两个选择器放到一起来讲,是因为它们非常相似,前者表示单独选择某类元素的第一个元素,后者表示单独选择某类元素的最后一个元素。

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="gb2312">
        <title>CSS3选择器-结构性伪类选择器(二)-霍者网页设计博客(www.huozheweb.com)!</title>
        <style type="text/css">
                *{margin:0; padding:0;}
                #list{font-family:"Microsoft yahei"; font-size:14px;}
                #list li{width:300px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; list-style:none;}
                #list li:first-child{color:#000; background:#fff;}/*选择#list的第一个子元素li*/
                #list li:last-child{color:#666; background:#dfdfdf;}/*选择#list的最后一个子元素li*/
        </style>
    </head>
    
    <body>
        <ul id="list">
                <li>选项一 | 霍者网页设计博客(www.huozheweb.com)!</li>
                <li>选项二 | 霍者网页设计博客(www.huozheweb.com)!</li>
                <li>选项三 | 霍者网页设计博客(www.huozheweb.com)!</li>
                <li>选项四 | 霍者网页设计博客(www.huozheweb.com)!</li>
                <li>选项五 | 霍者网页设计博客(www.huozheweb.com)!</li>
        </ul>
    </body>
</html>

:nth-child选择器和:nth-last-child选择器

...