CSS选择器

/* 
选择器 {
   属性：值;
   属性1：值1；
}
   div{
    color:pink;
    background: greenyellow;
   }
*/


/* 基本选择器
   1.元素选择器：用元素名称做选择
   特例：选择所有元素 *
  div {
    color:pink;
    background: greenyellow;
   }
  * {
    color:pink;
    background: greenyellow;
   }

   2.属性选择器
   div[id] 有id属性的div元素
   div[ id=xx] 有id属性，且id属性值为xx的div元素
   div[ id*=xx] 有id属性，且id属性值包含xx的div元素
   div[ id^=xx] 有id属性，且id属性值以xx开头的div元素
   div[id$=xx] 有id属性，且id属性值以xx结尾的div元素
   div[id=$=xx]{
    color:pink;
    background: greenyellow;
  }
   3.id选择器
   #id{
    color:pink;
    background: greenyellow
   }
    4.class选择器
    .className {
      color:pink;
      background: greenyellow;
    }
    特例：结合选择器
    p.className {
      color:pink;
      background: greenyellow;
    }
    5.包含选择器 selector1 selector2  强调包含 会找到父元素下面子元素以及子元素的子元素
    div p {
      color:pink;
      background: greenyellow;
    }
    6.子选择器 selector1>selector2 强调父子 只会找到父元素下面的子元素
    div>p {
      color:pink;
      background: greenyellow;
    }
    7.兄弟选择器  selector1~selector2 只找弟弟元素
    下例只找class属性为a的标签下面的class属性为c的弟弟元素
    .a~.c {
      color:pink;
      background: greenyellow;
    }
    找所有的弟弟元素用*
    .a~* {
      color:pink;
      background: greenyellow;
    }
    8.选择器组合 selector1,selector2,selector3....
    p,
    div a,
    span {
      color:pink;
      background: greenyellow;
    }
*/


/* 伪元素选择器

  1.给元素内容首字母单独设置样式::first-letter   只能用于块级元素
  div::first-letter {
      color:pink;
      background: greenyellow;
  }
  2.给元素内容首行单独设置样式::first-line  只能用于块级元素
  div::first-line {
      color:pink;
      background: greenyellow;
  }
    注：首行设置时元素内容为中文时内容会自动换行，但当为英文时会被默认为一个单词，需使用单词裂开来换行
    div::first-line {
      word-break:break-all;
      color:pink;
      background: greenyellow;
  }
  3.在元素内容前插入样式、内容::before
  div::before {
      content:"123";
      font-size:30px;
      color:pink;
      background: greenyellow;
  }
  4.在元素内容后插入样式、内容::after
  div::after {
      content:"123";
      font-size:30px;
      color:pink;
      background: greenyellow;
  }
*/


/* 三、伪类选择器

1.结构性伪类选择器

: nth-child()
括号里可以是数字n n从1开始
可以是英文单词 odd奇数even偶数
括号里可以是表达式5n+2 n从1开始
找第一个:nth-child(1) = first-child
找最后一个:last-child = nth-last-child(1)
倒着数:nth-last-child()
只认数字，如果类型刚好符合，则被选中
 ul li:nth-child(odd) {
      color:pink;
      background: greenyellow;
 }

: nth-of-type()
括号里可以是数字n n从1开始
可以是英文单词odd奇数even偶数
括号里可以是表达式5n+2 n从1开始
找第一个 first-of-type = nth-of-type(1)
找最后一个 last-of-type = nth-last-of-type(1)
倒着数:nth-last-of-type()
既认数字也认类型，找同类型下的第n个元素
ul li:nth-of-type(odd) {
      color:pink;
      background: greenyellow;
 }

 2.ui状态伪类选择器
 :hover鼠标悬停状态
 :focus焦点状态
 :checked选中状态
 ul li:hover {
      color:pink;
      background: greenyellow;
 }
  焦点状态一般用于输入框（鼠标放上）
  input:focus {
      color:red;
      background:blue;
  }
  选中状态一般用于单选框复选框
  input:checked {
  box-shadow: 3px 3px 3px gray;
  }  
  第一个像素表示水平方向阴影大小，第二个像素表示垂直方向阴影大小，第三个像素表示阴影模糊度(从1px(无负)越大越模糊) 
  
  3.其他伪类选择器
  not()   除了...
  ul li:not(.java):not(.php) {
      color:red;
      background:blue;
  }

*/
input:checked {
  box-shadow: 3px 3px 1px red;
  }  
ul li:nth-of-type(odd) {
    color:pink;
    background: greenyellow;
}