CSS选择器

• 选择器即css中设定的样式通过选择器，实现对HTML中每个节点渲染成相应的样式视图。姑且和学习的博客作者的分类一样分为标签选择器，属性选择器，伪类和伪元素。

• 标签选择器

1. 通用选择器 *

*{
       margin:0; 
      box-sizing:border-box;  //常见的写法
 }

2. 单标签
3. 多标签
   (1).选择一个祖先的所有子孙节点，例如 div p{…}
   (2). 选择一个父元素的所有直属节点，例如 div > p{…}
   (3). 选择某一个元素紧挨着的兄弟节点，例如 li + li{…}
   (4). 选择某一个元素的所有同胞节点，例如 span ~ a{…}
   (5). 组合应用，无需过于复杂

ul>li{
      border-bottom: 2px solid #ccc;
   }或者
 ul li+li{
    border-top: 1px solid #ccc;
    }   //都能实现以下的效果

微信截图_20180329153212.png

• 属性选择器

1. 特殊1：id选择器
2. 特殊2：class选择器
3. 属性选择器
   (1). 只通过属性名选择：img[title]{… }
   (2). 通过属性名和属性值选择：input[type=’text’]{…}

• 伪类和伪元素

1. 伪类
   (1). UI伪类
   (2). 结构化伪类
2. 伪元素