学习前端CSS的第六天

1.CSS的复合选择器

   常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器

2.后代选择器

  后代选择器可以选择父元素里面的子元素

   元素1  元素2  { 样式声明 }

   选择的元素1里面的所有元素2(后代元素)

3.子选择器

子元素选择器只能选择作为某元素最近一级的子元素。

元素1 >元素2 { 样式声明 }

 4.并集选择器

 并集选择器可以选择则多组标签,同时为他们定义相同的        标签。通常用于集体声明。

 并集选择器是各选择器通过英文逗号,连接而成,任何形式的选择器都可以作为并集选择器的一部分。

元素1,元素2 { 样式声明 }

5.伪类选择器

伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或者选择第一个,第n个元素。

伪类选择器书写最大的特点是用冒号:表示,比如:hover、:first-child。

(1)链接伪类选择器

    <style>
        /* 1.未访问的链接 a:link  把没有点击过的(访问过的)链接选出来 */
        a:link {
            color: #333;
            text-decoration: none;
        }

        /*2. a:visited 选择点击过的(访问过的)链接 */
        a:visited {
            color: orange;
        }

        /*3. a:hover 选择鼠标经过的那个链接 */
        a:hover {
            color: skyblue;
        }

        /* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
        a:active {
            color: green;
        }
    </style>
    <body>
        <a href="#">小猪佩奇</a>
        <a href="http://www.xxxxxxxx.com">未知的网站</a>
    </body>

 为了确保生效,请按照LVHA的循顺序声明:link-   :visited-   :hover-  :active。

(2):focus 伪类选择器

        :focus 伪类选择器用于选取获得焦点的表单元素。

        焦点就是光标,把获得光标的input表单元素选取出来.

    <style>
        /* // 把获得光标的input表单元素选取出来 */
        input:focus {
            background-color: pink;
            color: red;
        }
    </style>
<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

栀柠@

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值