css选择器

1、兄弟选择器

1）相邻兄弟选择器

 匹配当前元素【后面】的【一个】元素，前提：两者必须拥有相同父元素

            selector1+selector2
           通过 + 作为结合符eg:div+p{}
注意：只找与当前元素相关的后面一个紧挨着他的兄弟元素，如果符合则匹配，不符合也不会向下查找。

2）通用兄弟选择器

匹配当前元素【后面】的【所有】【兄弟】元素

           selector1~selector2
           使用 ~ 作为结合符  div ~ p
注意：第二个元素不必紧紧跟随第一个元素的后面

2、属性选择器
        1）[属性名]
  选择 带有 指定属性 的元素
  [title] : 匹配包含title属性的所有元素
2）元素[属性名]
  p [id] : 匹配所有包含id属性的p元素
  div [title] : 匹配所有包含title属性的div元素
3）元素[属性1][属性2]....
  匹配即具备属性1又具备属性2的元素
  div[id][class]
4）元素[属性=值]
  input [type=text]:匹配所有type属性值为text的input元素
  input [type="text"]
  input [type='text']
5）元素[属性~=值] 
  <div class="content"></div>
  <div class="content important"></div>
  div [class~=important]
  指定属性中，包含【独立】【值】单词的元素
6）元素[属性^=值]
  属性值以【值】开始的元素
  div[class^=c] : class属性以c开头的div元素
  div[class^=my]: class属性以my开头的div元素
7）元素[属性*=值]:
  属性值中包含【值】的元素
8）元素[属性$=值]:
  属性值以【值】结尾的元素

3、伪类选择器
   1）目标(target)伪类
      用于匹配 当前活动的 锚点元素
      语法：:target
   2）元素状态伪类
      场合：表单元素居多
      :enabled  匹配每个已启用的元素
      :disabled 匹配每个被禁用的元素
      :checked 匹配每个已被选中的input元素(单选按钮、复选框)
   3）结构伪类
      1）:first-child ,匹配属于其父元素中的首个子元素
      2）:last-child , 匹配属于其父元素中的最后一个子元素   table tr:first-child{} table tr:last-child{}      
      3）:empty , 匹配没有子元素(包含文本)的元素
          <p></p>：可以匹配出来
      4）:only-child ,匹配是其父元素中的唯一子元素
 <p>
   <a>1</a>
 </p> a:only-child{}可以匹配
 <p>
   <a>2</a>
   <a>2</a>
 </p> a:only-child{}无法匹配
    4）否定伪类
       匹配非指定选择器的每个元素(即不是指定选择器的其他元素)
       语法:   :not(selector)
       input:not([type=text]) tr:not(:first-child):not(:last-child)
4、伪元素选择器
   特点:获取指定元素中某一部分文本而用的。
   1）:first-letter
       用于选取指定选择器（元素）的首字母
   2）:first-line
       用于选取指定选择器（元素）的首行文本
   3）::selection
       匹配被用户选取的部分
5、内容生成
   通过 css  向已有的元素上增加新的内容
      1）:before
         向匹配元素之前增加生成的内容 定位到匹配元素开始的位置 div:before{}
      2）:after
         向匹配元素之后增加生成的内容 p:after{}
   属性：
      1）content
         作用：配合 :before , :after伪元素插入生成的内容div:before{
content:"生成的内容:";
}
常用取值:字符串：普通文本 url:图像