css选择器

css选择器

1. 基本选择器

   *           通配符选择器
   div         元素选择器
   .box        类选择器
   .box.red    复合选择器
   #id         id选择器
   :pseudo     伪类选择器
   ::pseudo    伪元素选择器
   :lang(en)   语言选择器
       div:lang(en){
           color: red;
       }
   div > p     子类选择器   
   div p       子集选择器
   div ~ p     兄弟选择器（所有后面的元素）
   div + p     兄弟选择器（后面的临近的元素）
   

2. 属性选择器

   <div myvalue="val1 value2"></div>
   
   [myvalue]{
       width: 100px;
       height: 100px;
       background: red;
   }
   
   [myvalue]                       包含这个属性名
   div[myvalue]                    div包含这个属性名
   [myvalue='val1 value2']         指定属性值
   [myvalue='val1 value2'i]        指定属性值，忽略大小写
   [myvalue~='value2']             以逗号分隔的属性值列表中包含指定值
   [myvalue^='val']                属性值以指定值开头
   [myvalue$='ue2']                属性值以指定值结尾
   [myvalue*='al']                 属性值包含指定值
   [myvalue|='va']                 属性值必须以va开头并且后面跟着-
   

3. 伪类选择器

   <div>
       <P>1</P>
       <P>2</P>
       <P>3</P>
       <P>4</P>
   </div>
   <div>文本</div>
   
   div:first-child{
       background: red;
   }
   
   div:first-child                 第一个div
   div:last-child                  最后一个div
   div:last-of-type                最后一个div
   div:nth-child(2)                第二个div
   p:nth-last-child(2)             倒数第二个p
   p:nth-child(n+2)                第二个p开始的所有p
   p:nth-child(-n+2)               倒数第三个p开始的所有p
   p:nth-child(2n)                 偶数p
   p:nth-child(odd)                偶数p
   p:nth-child(even)               奇数p