CSS 的选择器

1、元素选择器

由元素名称作为选择器，匹配页面中指定元素名称的所有标签

div{
      font-size: 24px;color: red;background-color: grey
  }

2、类选择器

允许被页面中任意一个元素所引用

特殊用法

1、分类选择器的定义方式
特点：运行将元素选择器和类选择器结合使用
语法：元素选择器 . 类选择器{…}
div.red{color:red} 匹配class值为red的div元素
2、多类选择器的引用方式
让一个元素引用多个类选择器，多个类之间名称使用空格隔开
<div class=“name1 name2”></div>
name1 和 name2 的样式同时作用在div标签上

<head>
    <style>
        div.textblue{
            font-size: 36px;color: blue;
        }
        .bgc{
			background-color: aqua;
		}
    </style>
</head>
<body>
    <div class="textblue bgc">
        静夜思
    </div>
    <div >
        李白
    </div>

3、ID选择器

ID：在HTML中，每个元素都可以声明一个ID属性，取值在一个页面中是唯一的
作用：为了匹配页面中指定ID值的元素
语法：#idname{…}

<head>
    <style>
        #title{
            font-size: 36px;color: blue;
        }
    </style>
</head>
<body>
    <div id="title">
        静夜思
    </div>

4、群组选择器

作用：定义多个选择器共有的样式
声明方式是一个以逗号隔开的选择器列表
语法：选择器1，选择器2，…{…}
例如：#main，div，span.title，.p {color:yellow}

5、后代选择器

作用：依托于元素的后代关系来匹配某元素（不限层级）
语法：选择器1 选择器2 {… }
div sanp{…} 匹配所有div中所有span元素
#title .classname{…} 匹配 id 值为 title 中所有类名为 classname 的元素

6、子代选择器

作用：依托于元素的子代关系来匹配某元素（只限一层层级）
语法：选择器1>选择器2 {… }
div>sanp{…} 匹配所有div中子代的span元素
#title>.classname{…} 匹配 id 值为 title 中子代的类名为 classname 的元素

7、伪类选择器

作用：匹配元素中不同状态的选择器
语法： :伪类状态(冒号+伪类状态)
通过配合其他选择器一起使用选择器：伪类状态{…}
1、连接伪类
  a)   :link 匹配超链接未被访问时的状态
  b)   :visited 匹配超链接被访问过的状态
例如  a：link{color：yellow}

<head>
    <style>
        a:link{
            color: orange;
            background-color: black;
        }
        a:visited{
            color: greenyellow;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        <a href="https://www.baidu.com">百度</a>
    </div>

2、动态伪类
  a)   :hover 匹配当鼠标悬停在元素上的状态
  b)   :active 匹配当元素被激活时的状态
  b)   :focus 匹配当元素获取到焦点时的状态

<head>
    <style>
        a{
            color: black;
            text-decoration: none;
        }
        a:hover{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <a href="https://www.baidu.com">百度</a>
    </div>

7、选择器的优先级

优先级看权值

选择器	权值
元素选择器	1
类/伪类	10
ID选择器	100
内联方式	1000

复杂选择器，权值进行累加计算
权值相同时，遵从就近原则，后定义优先，例如以下代码

<head>
    <style>
        a.baidu{color: black;}   /* 权值11 */
        a:hover{color: red;}    /* 权值11 */
    </style>
</head>
<body>
    <div>
        <a href="https://www.baidu.com" class="baidu">百度</a>  
        /* 效果: 文字颜色为黑色，鼠标悬停变红 */
    </div> 
</body>

<head>
    <style>
    	a:hover{color: red;}    /* 权值11 */
        a.baidu{color: black;}   /* 权值11 */
    </style>
</head>
<body>
    <div>
        <a href="https://www.baidu.com" class="baidu">百度</a>  
        /* 效果: 文字颜色为黑色，鼠标悬停还是黑色 */
    </div> 
</body>