CSS基础选择器

标签选择器

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选择器{样式} */
        p {
            color: brown;
            font-size: 48px;
        }
        div {
            color: cornflowerblue;
            font-size: 32px;
        }
    </style>
</head>
<body>
    <p>有点意思</p>
    <div>有点意思</div>
    
</body>
</html>

类选择器

使用.进行选择类。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选择器{样式} */
        p {
            color: brown;
            font-size: 48px;
        }
        div {
            color: cornflowerblue;

        }
        .myName {
            font-size: 32px;
        }
    </style>
</head>
<body>
    <p>有点意思</p>
    <div>有点意思</div>
    <div class="myName">有点意思</div>
</body>
</html>

多类名使用

可以设置一些公有的样式，减少代码量。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选择器{样式} */
        .box {
            width: 150px;
            height: 100px;
        }
        .red {

            background-color: red;
        }
        .green {

            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box red"></div>
    <div class="box green"></div>
    <div class="box red"></div>
</body>
</html>

id选择器

id是唯一的
语法

#id名字 {
    ···
}

通配符选择器

使用*来定义，它表示选取页面中的所以元素（标签）
语法

* {
    属性1: 属性值1;
    ···
}

特殊情况才使用。

字体 Font属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bold {
            font-weight: 700;
        }

        .normal {
            font-weight: normal;
            font-family: 'Arial Narrow', Arial, sans-serif;
            font-size: 55px;
            font-style: initial;
        }

        .p1 {
            /*两种写法，但必须严格按照顺序。*/
            /* font-style: italic;
            font-weight: 700;
            font-size: 16px;
            font-family: 'Microsoft yahei'; */
            font: italic 700 16px 'Microsoft yahei';
        }
    </style>
</head>

<body>

    <h2 class="normal">我的世界</h2>

    <p class="p1">苦力怕</p>
    <p>僵尸村民</p>
    <p>凋零骷髅</p>
    <p class="bold">村民交易所</p>

</body>

</html>

上例中，使用font属性时，必须严格按照顺序来写，不能更换顺序。
不需要设置的属性可以省略，但必须保留 font-size和font-family,否则font属性不起作用。

字体属性总结

属性	表示	参数	注意点
font-size	字号	absolute-size \ relative-size \ length	通常是px，要带单位
font-family	字体	name	按照实际需求写字体
font-weight	字体粗细	normal \ bold \ bolder \ lighter \ number(直接写数字)	加粗700或bold，不加粗400或normal
font-style	字体样式	normal \ italic \ oblique	加粗、倾斜
font	字体连写	复合参数	连写有顺序，不能随意换位置，`font-size`和`font-family`是必须的。

Text 文本属性

属性	表示	注意点
color	文本颜色	通常用16进制表示，比如#fff
text-align	文本对齐	设定文字的水平对齐方式
text-indent	文本缩进	通常用于段首缩进两个字的距离 text-indent: 2em;
texy-decoration	文本修饰	添加下划线underline，取消下划线none
line-height	行高	控制行与行之间的距离。

复合选择器

后代选择器

后代选择器又称包含选择器。
语法

元素1 元素2 { 样式声明; }
.类名 元素 { 样式声明; }

ul li {
    font-size: 24px;
}
.nav li {
    font-size: 32px;
}

元素一元素二可以是任意的基础选择器。

子选择器

元素1是父级，元素2是子级。
元素二必须是亲儿子，孙子不在选择范围内。

元素1 >元素2 { 样式声明; }
.nav>a {
    font-size: 32px;
}

并集选择器

语法：

div, p, ul li, .nav li{
    ···
}

伪类选择器

/*css链接伪类选择器 a:link 选择所以未被访问的链接 a:visited  */
/* 选择所以已访问的链接 a:hover 选择鼠标指针位于其上的链接  */
/* a:active 选择鼠标按下但未弹起的链接 */
a:link {
    color: pink;
}

a:visited {
    color: rgb(2, 2, 2);
}

a:hover {
    color: green;
}

a:active {
    color: saddlebrown;
}

顺序为：lvha

:focus伪类选择器

一般input表单类元素才能选取

```CSS
        input:focus {
            background-color: seagreen;
        }

复合选择器总结

选择器	作用	特征	使用情况	用法
后代选择器	选取后代元素	可以是子孙后代	较多	.nav a
子代选择器	选取最近一级的元素	只能是亲儿子	较少	.nav>p
并集选择器	选取某些相同样式的元素	可以用于集体声明	较多	,nav, p ,#dd
链接伪类选择器	选择不同状态的链接	和链接相关	较多	a:hover
:focus选择器	选择获得光标的表单	和表单相关	较少	input:focus