CSS超详细入门【二】-- CSS的各类选择器

 CSS选择器

-标签选择器

作用：根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性 ​

格式: ​ 标签名称{ ​ 属性:值; ​ } ​

注意点: ​

1.标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签 ​

2.标签选择器无论标签藏得多深都能选中 ​

3.只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input....)

 /* 标签选择器 */
        div{
            color: cornflowerblue;
            font-size: 30px;
        }
选中所有的div标签设置其包裹的字体颜色及其字号

-id选择器

作用: 根据指定的id名称找到对应的标签, 然后设置属性 ​

格式: ​ #id名称{ ​ 属性:值; ​ } ​

注意点: ​

1.每个HTML标签都有一个属性叫做id, 也就是说每个标签都可以设置id ​

2.在同一个界面中id的名称是不可以重复的 ​

3.在编写id选择器时一定要在id名称前面加上# ​

4.id的名称是有一定的规范的 ​ 4.1 id的名称只能由字母/数字/下划线，a-z 0-9 _ ​ 4.2 id名称不能以数字开头 ​ 4.3 id名称不能是HTML标签的名称，不能是a h1 img input ... ​

5.在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为id是留给js使用的

 /* id选择器 #+id */
        #lu{
            background-color:palegreen;
        }
        #ze{
            color: khaki;
        }




<!-- 在同一个界面中id的名称是不可以重复的 -->
    <div id="lu">今天星期几</div>
    <div id="ze">公路之歌</div>

-类选择器 

作用: 根据指定的类名称找到对应的标签, 然后设置属性 ​ 格式: ​ .类名{ ​ 属性:值; ​ }

注意点: ​

1.每个HTML标签都有一个属性叫做class, 也就是说每个标签都可以设置类名

2.在同一个界面中class的名称是可以重复的 ​

3.在编写class选择器时一定要在class名称前面加上. ​

4.类名的命名规范和id名称的命名规范一样

5.类名

是专门用来给CSS设置样式的 ​ 6.在HTML中每个标签可以同时绑定多个类名 ​

格式: ​ <标签名称 class="类名1 类名2 ...">

/* 类选择器 .类名 */
        .zi{
            width: 200px;