html伪类选择器

什么是伪类选择器?
CSS伪类(pseudo-class)是一个以冒号(:)作为前缀,被添加到一个选择器末尾的关键字
当你希望样式在特定状态下才被呈现到指定的元素时,你可以往元素的选择器后面加上对应的伪类。
伪类选择器有哪些?
一:伪类选择器之状态类
:checked该伪类表示表单元素被选中的状态,可以用于单选按钮,复选框等元素上。
:hover 该伪类表示鼠标箭头放在被选中的元素上的状态,可以用于任意元素上,用来设置鼠标悬停样式
:active 该伪类表示表单元素、链接等元素被激活的状态,此处被激活的概念比较特殊(对于输入框而言,是鼠标左键按下且未抬起的时候;对于a元素,也是鼠标左键按下且未抬起的时候)
:focus 该伪类表示当用户点击,触摸,通过键盘的 “tab” 键选择表单元素、链接等元素时会被触发
示例代码:

 <style>
        .exp1:checked+span{
           color: red;
        }
        /*单选按钮被选中的时候男变成红色*/
        .exp2:focus{
            background-color: sienna;
        }
        /*向文本框内输入字体的时候背景颜色改变*/
        a{
            font-size: 18px;
        }
        a:link{
            color:black ;
        }
        /*链接未被访问的时候是黑色*/
        a:visited{
            color: gray;
        }
        /* 链接被访问过后变成灰色 */
        a:hover{
            color: blue;
        }
        /* 鼠标悬停的时候是蓝色 */
        a:active{
            color:red ;
        }
        /* 链接被激活的时候是红色 */
</style>

<body>
    <form action="">
        <input type="radio"class="exp1" name="check"><span>男</span>
        <input type="radio" name="check">女
        <input type="text" class="exp2">
    </form>
    <a href="http://www.baidu.com">百度一下,你就知道</a>
</body>


/*单选按钮被选中的时候男变成红色*/
 
/*向文本框内输入字体的时候背景颜色改变*/
 
/*链接未被访问的时候是黑色*/
 
/* 鼠标悬停的时候是蓝色 */
 
 /* 链接被激活的时候是红色 */
 
/* 链接被访问过后变成灰色 */
 

注意:a标签的样式顺序,不可颠倒。可简记为l v h a (love and hate)
二:伪类选择器之结构类
:nth-child(n) 选择器匹配父元素的第n个元素,元素类型没有限制
示例代码:

<style>
        div:nth-child(2n){
            color: red;
        }
        /* 选中偶数标签,将其颜色变为红色 */
</style>

<body>
    <div>1</div>
    <p>2</p>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</body>

结果
 
因为第二个是p标签所以不变色

:nth-of-type(n) 选中匹配伪类选择器前标签的第n个元素,其他标签不占位

示例:

 <style>
        div:nth-of-type(2n){
            color: red;
        }
        /* 选中div的偶数标签,将其颜色变为红色 */
</style>
<body>
    <div>1</div>
    <p>2</p>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</body>


:nth-last-child(n)匹配父元素的倒数第n个元素

示例:

 <style>
        div:nth-last-child(2){
            color: red;
        }
        /* 选中倒数第二个标签且要是div,将其颜色变为红色 */
</style>
<body>
    <div>1</div>
    <p>3</p>
    <div>2</div>
    <div>4</div>
    <p>5</p>
    <div>6</div>
</body>

 


:nth-last-of-type(n) 选中匹配伪类选择器前标签的倒数第n个元素,其他标签不占位

示例:

 <style>
        div:nth-last-of-type(2){
            color: red;
        }
        /* 选中倒数第二个div标签,将其颜色变为红色 */
</style>

<body>
    <div>1</div>
    <p>3</p>
    <div>2</div>
    <div>3</div>
    <p>4</p>
    <div>5</div>
</body>


其他诸如:first-child、:first-of-type、:last-child、:last-of-type等等
三:伪类选择器之属性类
该选择器选择伪类前选择器所选中的元素中间包含attr属性的元素(attr属性名称)
[attr=val]:选择attr属性值被赋值为val的所有元素(相等)
[attr~=val]:选择attr属性中包含值为val的所有元素(包含)
[attr^=val]:选择attr属性的值以val开头的元素

[attr$=val]:选择attr属性值以val结尾的元素

[attr*=val]:选择attr属性值中包含字符val的所有元素

示例代码:

<style>
        div[class="box1"]{
            color: red;
        }
        /* div[class~="box1"]{
            color: blue;
        } */
</style>

<body>
    <div class="box1 box2">box1 box2</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
    <div class="box4">box4</div>
</body>

结果:

=符号要属性名全部等于指定名称所以没有变色

对比:

<style>
      /* div[class="box1"]{
            color: red;
        } */
        div[class~="box1"]{
            color: blue;
        }
</style>

<body>
    <div class="box1 box2">box1 box2</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
    <div class="box4">box4</div>
</body>

~只要属性中包含box1即可

最后附上CSS3新增伪类:

:enabled

:disabled 控制表单控件的禁用状态。

:checked,单选框或复选框被选中。

:before在元素之前添加内容,也可以用来做清除浮动

:after在元素之后添加内容

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。

p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。

发布了11 篇原创文章 · 获赞 1 · 访问量 216
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览