css语法：

格式：
选择器 {
属性名1:属性值1;
属性名2:属性值2;
...
}

选择器:筛选具有相似特征的元素
注意：每一对属性需要使用；隔开，最后一对属性可以不加；

1.1 基础选择器

1）id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一

语法：#id属性值{}

2）元素选择器：选择具有相同标签名称的元素

语法： 标签名称{}

注意：id选择器优先级高于元素选择器、高于类选择器

3）类选择器：选择具有相同的class属性值的元素。

语法：.class属性值{}

注意：类选择器选择器优先级高于元素选择器

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础选择器</title>
    <style>
        .cls1{
            color: blue;
        }

        div{
            color:green;
        }
        #div1{
            color: red;
        }
    </style>
</head>
<body>
    <div id="div1">id选择器</div>
    <div >元素选择器</div>
    <p class="cls1">类选择器</p>
</body>
</html>

结果：
CSS 选择器_超链接

1.2 扩展选择器

1）选择所有元素：

语法： *{}

2) 并集选择器：
语法：选择器1,选择器2{}

3) 子选择器：筛选选择器1元素下的选择器2元素
语法： 选择器1 选择器2{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扩展选择器</title>
    <style>
        div p{
            color:red;
        }
    </style>
</head>
<body>
    <div>
        <p>段落一</p>
    </div>
        <p>段落二</p>
 </body>
</html>

结果：
CSS 选择器_选择器_02

4）父选择器：筛选选择器2的父元素选择器1
语法： 选择器1 > 选择器2{}

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扩展选择器</title>
    <style>
        div p{
            color:red;
        }
/*选择p标签的div 加一个框*/
        div > p {
            border: 1px solid;
        }
    </style>
</head>

<body>
    <div>
        <p>段落一</p>
    </div>
        <p>段落二</p>
    <div>aaa</div>
  </body>
</html>

结果：
CSS 选择器_html_03

5）属性选择器：选择元素名称，属性名=属性值的元素（一般用于选择input标签）
语法： 元素名称[属性名="属性值"]{}

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扩展选择器</title>
    <style>
      /*属性选择器匹配type='text' 加边框为5px，type="password"未匹配*/
    	input[type='text']{
            border: 5px solid;
        }
    </style>
</head>
<body>
	<input type="text" >
	<input type="password" >
</body>
</html>

结果：
CSS 选择器_html_04

6）伪类选择器：选择一些元素具有的状态

语法： 元素:状态{}

  如： <a>

状态：link：初始化的状态
visited：被访问过的状态
active：正在访问状态
hover：鼠标悬浮状态

例子：创建一个超链接，初始化为粉色，鼠标悬浮为绿色，鼠标点击之后为黄色，访问过之后为红色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扩展选择器</title>
    <style>
        input[type='text']{
            border: 5px solid;
        }
        /*初始状态：粉色*/
        a:link{
            color: pink;
        }
        /*鼠标悬浮*/
        a:hover{
            color: green;
        }
        /*鼠标点击完之后*/
        a:active{
            color: yellow;
        }
        /*鼠标访问之后*/
        a:visited{
            color: red;
        }

    </style>
</head>
<body>
      <br> <br> <br> <br>

<a href="https://www.baidu.com/">超链接</a>
</body>
</html>

结果：
CSS 选择器_超链接_05