css基本选择器

2.8

1. css语法
   css语法：
   选择器{
   声明1；
   }
   声明=属性:属性值;
   选择器：选择要设置样式的标签
   css引入方法
   内联/行内样式：标签内

2.css基本选择器

    1.基本选择器：
      ①标签选择器：
      格式：标签名 {}
      ②类名选择器：
        在标签内通过class设置类名，
        格式： .类名 {}注意类名前面有.
      ③id选择器：唯一标识，每个标签最多只能有一个id
        格式：#id值 {}
    通配符：*=》选中页面中所有的标签
    !important:是最高级别的，后面是不可修改，一般情况下，不推荐使用!important关键字提升优先级
 优先级：
  !important>行内样式>id选择器>类名选择器>标签选择器>通配符选择器 

3.层次选择器
ul li {
color: red;
/* 设置列表样式 /
list-style: none;
}
/ li>a{
font-size: 28px;
} /
ul>a{
font-size: 28px;
}
/ ol>.second=》选中ol里面的类名为second的标签
+li=>选中类名为second的标签的相邻兄弟元素 /
/ ol>.second+li {
color: pink;
} */
ol>.second~li {
color: pink;
}
/ 层次选择器
后代:标签1 标签2 {}=》选中标签1里面的标签2
子代:标签1>标签2 {}=》选中标签1中的子代标签2
后代可以包含子代，子代只能是父元素的第一层
元素1+元素2:选中元素1后面第一个相邻的兄弟元素
元素1~元素2:选中元素1后面所有的兄弟元素2
/

4.结构选择器

    /* ul li:first-child {
        color: pink;
    } */

    /* ul li:first-of-type {
        color: pink;
    } */

    /* ul li:last-child {
        color: green;
    }
    ul li:last-of-type{
        color: green;
    }
    ul>li:nth-child(3){ */
        /* color: red; */
    /* }
    ul>li:nth-of-type(3){
        color: red;
    } */
    ul>li:not(:nth-child(3)){
        color: pink;
    }
    /* 选择器1 选择器2:first-child=》在选择器1中选择第一个元素，并且该元素与选择器2选中的元素相同
       选择器1 选择器2:first-of-type=》在选择器1中选中所有的同级别的选择器2选中的元素，再找第一个出现的元素2
       选择器1 选择器2:last-child=》在选择器1中选择最后一个元素，并且该元素与选择器2选中的元素相同
       选择器1 选择器2:last-of-type=》在选择器1中选中所有的同级别的选择器2选中的元素，再找第一个出现的元素2
       选择器1>选择器2:nth-child(num)=>在选择器1中选择第num个元素，并且该元素与选择器2选中的元素相同
       选择器1>选择器2:nth-of-typr(num)=>在选择器1中的使用选择器2选中元素，再找第num个出现的元素
       选择器:not(条件)=》除了符合条件的选择器选中的其他元素