CSS基础笔记四,伪类选择器和对象选择器(鼠标点击的四种状态,列表自定义选择,容器只有一个,除了被选中的其他都有,元素为空的时候,元素获得焦点的时候,单选和复选增强)

伪类选择器  常用有这些:

1,鼠标点击元素的4种状态 爱恨离别(link visited hover active) 前面的2个只适用于

a标签,后面的2个适用于其他标签。顺序不能改变

2,列表中先选择谁就选择谁 

            first-child  选择开头

             last-child 选择结尾

            nth-child(odd或者enen或者自定义数值) 选择偶数或者奇数或者自定义行

3,当一个容器只有一个值就生效的选择器 only-child 只爱一个人 多了就不生效了

4,当容器除让她以外 其他都匹配到  not(她)  一个好的前任就应该更死了一样

5,当容器里面的元素为空的时候 就生效 empty

6,当元素获得焦点的时候,就生效 focus  这个很常用 也很实用 通常用于用户输入的对话框

7,作为单选和复选修改样式的时候 checked

伪元素(对象)选择器

有befor 和alter  

他们常用于给列表前后添加各种样式的美化效果

也是用于给标题前后添加美化效果

目录

一,伪类选择器

一,鼠标点击的四种状态 link visited hover active

第一种 link  鼠标访问之前的颜色  

第二种,visited 鼠标访问之后的颜色

第三种,鼠标滑过去的颜色

第四种,鼠标按住不动的状态

​编辑

二,列表中想选择谁就选择谁  first-child last-child nth-child(n)

第一种frist-child

  第二种 last-child

第三种,选择列表偶数或者奇数或者任意一个

三,只有一个子元素的时候才会生效 only-child

四,里面没有任何元素,他就生效,有了子元素他就不生效 emply

五,除了被not选中的,其他都生效

六,焦点选择器,谁被鼠标点中,获得焦点,谁就生效 focus

 ​编辑

 七,单选和复选框增强效果选择器 checked

二,伪对象选择器  before alter

三,总结


一,伪类选择器

一,鼠标点击的四种状态 link visited hover active

注意link 和visited 仅仅限于超级连接 a标签

第一种 link  鼠标访问之前的颜色  

修改超链接 鼠标点击之前的颜色

        a:link{
            color: #fa4d15;
        }
第二种,visited 鼠标访问之后的颜色
        /*修改点击之后的颜色*/
        a:visited{
            color: yellow;
        }
第三种,鼠标滑过去的颜色
    /*    鼠标悬停上面的颜色*/
        a:hover{
            color: dimgray;
        }
第四种,鼠标按住不动的状态
   /*    鼠标点击但是不松手的状态*/
        a:active{
            color: yellowgreen;
        }

全部代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
<!--  伪类选择器
示例 比如a标签有4个状态  访问之前 的颜色  访问过后的  鼠标放在标签上的  鼠标点击但是不松手的
link 访问之前的
visited 点击之后的颜色
hover 鼠标悬停上面的颜色
active 鼠标点击但是不松手的状态
必须按照顺序来的 l v h a
-->
    <style>
/*<!--      修改访问之前的颜色  -->*/
        a:link{
            color: #fa4d15;
        }
        /*修改点击之后的颜色*/
        a:visited{
            color: yellow;
        }
    /*    鼠标悬停上面的颜色*/
        a:hover{
            color: dimgray;
        }
    /*    鼠标点击但是不松手的状态*/
        a:active{
            color: yellowgreen;
        }
    /*    点击和点击后的颜色 只要a这种可以点击生效  其他的对所有标签都生效*/
    /*    鼠标悬停上面的颜色*/
        p:hover{
            color: dimgray;
        }
    /*    鼠标点击但是不松手的状态*/
        p:active{
            color: yellowgreen;
        }

    /*    看看input的效果  同样,前面的2个不生效 只是后面的2个生效*/
    /*    鼠标悬停上面的颜色*/
        input:hover{
            color: dimgray;
        }
    /*    鼠标点击但是不松手的状态*/
        input:active{
            color: yellowgreen;
        }


    </style>
</head>
<body>
<a href="https://www.baidu.com/">百度</a>
<p>我也来看看有没有这个效果</p>
<form action="https://www.baidu.com/">
    <input type="submit">
</form>

</body>
</html>

  • 0
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值