2018-08-14 HTML学习CSS选择器与伪类选择器

选择器

<style type="text/css">

1. 元素选择器(标签选择器):标签名

选中所有的标签名对应的标签
例:所有a标签

    a{
        background-color: yellow;
      }

2.id选择器:#id属性值

每个标签都有一个id属性,整个html中,id的值必须唯一
例:id为a1的标签

   #a1{
        /*color:#ff0000;*/
        color:rgba(0,0,255,0.4)
        }

3.class选择器:.class属性值

每个标签都有一个class属性,
例:所有class为.c1的标签

    .c1{
        color: brown;
        background-color: olive;
        }

4.通配符:*

选中所有的标签

 *{
    font-size: 50px;
  }

5.层级选择器:选择器1 选择器2...

例:id为all_a的所有a标签

    #all_a a{
                color: pink;
            }

满足div层下的div层下的a标签

    div div a{
                text-decoration: none;
            }

6.群组选择器:选择器1,选择器,....

例:同时选中所有h1标签和所有的span标签

    h1,span{
                background-color: #FFC0CB;
            }

伪类选择器

伪类选择器: 选择器:状态
link: 超链接的初始状态; -- 一次都没有访问成功的时候的状态
visited: 超链接访问后的状态 --- 已经访问成功后的状态
hover: 鼠标悬停在标签上对应的状态
active:鼠标按住的状态

给同一个标签通过伪类选择器给不同状态设置不同的样式的时候,要遵守爱恨原则(先要爱才能恨)
LoVe HAte
例子:a标签使用伪类选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            a{
                color: black;
            }
            
            a:link{
                color: green;
                
            }
            
            a:visited{
                color: pink;
            }
            
            a:hover{
                color: red;
            }
            a:active{
                color: darkblue;
            }
        </style>
    </head>
    <body>
        <a href="http://www.baidu.com">百度一下</a>
    </body>
</html>

a标签为黑色,从未浏览过的a标签为绿色,浏览过的a标签为粉红色,鼠标悬停在a标签上为红色,鼠标按下是a标签变为暗蓝色,松开鼠标恢复成变色前.

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,869评论 18 139
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,632评论 1 45
  • 概述 在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时,所整理的笔记。笔记内容为根据个人需求所...
    墨荀阅读 2,367评论 0 7
  • 早上好,我是陈城。人生最重要的就是蓝图和状态。每天早上你起床你都要记得,你有两个选择,不是选择平凡的度过今天就是选...
    87233594db05阅读 301评论 0 0
  • 雨坠青荷碧, 草软泥泞行。 云雾皆着墨, 羊肠俱作溪。
    疯不语AOA阅读 148评论 0 0