[html5+css]引如方式 选择器

概要

选择器

1. 标签选择器
   2.类选择器

2. 层级选择器
   （1）子代选择器 >
   （2）后代选择器 空格
   （3）兄弟选择器 相邻兄的 + 只修改他下面的相邻选择器
   （4）兄弟选择器 通用兄弟 ~ 修改它后面的选择器
   3.伪类选择器
   4.属性选择器
   5.群组选择器
   二丶优先级
   *优先级最低 <1
   标题选择器 <10
   .class < 100
   #id 200 <
   行内引入式
   ！important

   .class #id > #id
   组合选择器时，有线顺序叠加，谁大谁生效

类选择器

.classname{
            height: 300px;
            background-color: blueviolet;
        }
        .rec_color{
            color: red;
        }

id选择器

  #idname{
            width: 400px;
            background-color: aquamarine;
        }
        p{
            background-color: pink;
        }

群组选择器

.div1,.div2,.div3,p{
            width: 400px;
        }
        .div1{
            height:100px;
            background-color: chocolate;
        }
        .div2{
            height:200px;
            background-color: rgb(219, 118, 172);
        }
        .div3{
            height:300px;
            background-color: rgb(199, 154, 246);
        }

层级选择器

1.子代选择器 >
2.后代选择器 空格
3.兄弟选择器 相邻兄的 + 只修改他下面的相邻选择器
4.兄弟选择器 通用兄弟 ~ 修改它后面的选择器

.ulBig > li{
            list-style: none;
            font-size: 28px;
        }
        .ulBig li{
            list-style: none;
        }

伪类选择器

.li4{
            color: #e93333;
        }
        .li4+li{
            color: #e93333;
        }
        .li4~li{
            color: #e93333;
        }

伪类选择器

     .li4:hover{
            color: #080cfc;
            cursor: pointer;
        }
        .li3:hover{
            cursor: pointer;
        }
        .li3:hover li{
            color: blue;
        }```
## 优先级
1000  !important 设置最高优先级；一般建议用，改源代码时可以使用
        
            *优先级最低 <1
            标题选择器 <10
            .class < 100
            #id 200 <
            行内引入式
            ！important

            .class #id > #id
            组合选择器时，有线顺序叠加，谁大谁生效
        */
# 引入方式
1.行内引用
<p style="background-color: bule; color: red;font-size: 120px;">这是另一个标签</p>
2.内联式
3.外联式