CSS选择器

一、 CSS选择器常见的有几种？

• 通配符选择器
  选择所有元素：
  *{ }选择某个元素下的所有元素:
  .demo *{ }表示类名为demo元素下的所有元素
  所有浏览器都支持通配符选择器

• 元素选择器
  元素{ }选择文档元素
  所有浏览器都支持元素选择器

• 类选择器
  .className{ }选择类名为className的元素

  • 类选择器与元素选择器结合
    p.className{ }选择类名为className的p元素
  • 多类选择器
    .class1.class2{ }选择同时有class1和class2这两个类名的元素

  所有浏览器都支持类选择器，但多类选择器.class1.class2不被ie6支持。

• id选择器
  #IDName{ }选择id为IDName的元素
  ID选择器有几个地方需要特别注意的：

一个文档中一个id选择器只充许使用一次，因为id在页面中是唯一的；
id选择器不能像类选择器一样多个合并使用，一个元素只能命名一个id名；
可以在不同的文档中使用相同的id名，比如说在test.html中给h1定了＃important
,也可以给test1.html中定义p的id为#important，但前提是不管在test.html
还是test1.html中只充许有一个id叫#important的存在。

所有浏览器都支持ID选择器

• 属性选择器

  • 元素[属性]：选择有某个属性的元素
  • 元素[属性][属性]：同时具有这两个属性的元素
  • 元素[属性="属性值"]：指定属性名，并指定了该属性的属性值
  • 元素[属性~="value"]：某个属性的属性值中有value元素
  • [属性="属性值"]与元素[属性~="value"]的区别：
    属性选择器中有波浪（〜）时属性值有value时就相匹配，没有波浪（〜）时属性值要完全是value时才匹配。
  • 元素[属性^="value"]：选择某个属性的属性值以“value”开头的所有元素
  • 元素[属性$="value"]：选择某个属性的属性值以"value"结尾的所有元素
  • 元素[属性*="value"]：选择某个属性的属性值中包含子串"value"的所有元素
  • 元素[属性|="value"]：选择某个属性的属性值等于value或以value-开头的所有元素

  属性选择器除了IE6不支持外，其他的浏览器都能支持

• 后代选择器（E F）
  元素1 元素2{ }：选择元素1的所有后代元素元素2
  所有浏览器都支的后代选择器

• 子元素选择器（E>F）
  元素1>元素2{ }：选择元素1
  的所有子元素元素2
  IE6不支持子元素选择器

• 相邻兄弟元素选择器（E+F）
  元素1+元素2{ }：元素1与元素2
  在同一个父元素下，元素2在元素1后面，且相邻，此选择器选择的是满足上述条件的元素2
  IE6不支持这个选择器

• 通用兄弟元素选择器
  元素1~元素2{ }：选择某元素后面的所有兄弟元素
  通用兄弟选择器和相邻兄弟选择器的区别：

  • 相邻兄弟选择器仅选择是元素的仅与其相邻的后面元素（选中的仅一个元素）；
  • 通用兄弟元素选择器，选中的是元素后面的所有兄弟元素（选中的元素有多个）
    

  IE6不支持这个选择器

• 分组选择器
  元素1, 元素2：同时对元素1
  和元素2编写样式，常用于将具有相同样式的元素分组在一起，简化代码
  所有浏览器都支持群组选择器

• 伪类选择器

  • 动态伪类
    因为这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来，动态伪类包含两种，第一种是我们在链接中常看到的锚点伪类，如:link,:visited；另外一种被称作用户行为伪类，如:hover,:active和:focus。

    • 锚点伪类
      a:link {color:gray;}链接没有被访问时前景色为灰色
      a:visited{color:yellow;}链接被访问过后前景色为黄色
      a:hover{color:green;}鼠标悬浮在链接上时前景色为绿色
      a:active{color:blue;}鼠标点中激活链接那一下前景色为蓝色
      锚点伪类的先后顺序：link–visited–hover–active

    • 用户行为伪类
      :hover用于当用户把鼠标移动到元素上面时的效果；
      :active用于用户点击元素那一下的效果（正发生在点的那一下，松开鼠标左键此动作也就完成了）
      :focus用于元素成为焦点，这个经常用在表单元素上

    :hover在IE6下只有a元素支持，:active只有IE7-6不支持，:focus在IE6-7下不被支持。

  • UI元素状态伪类
    :enabled，:disabled，:checked主要是针对于HTML中的Form元素操作，最常见的比如我们type="text有enable和disabled两种状态，前者为可写状态后者为不可状态；另外type="radio"和type="checkbox"有checked和unchecked两种状态。
    IE6-8不支持:checked,:enabled,:disabled这三种选择器。

  • CSS3的:nth选择器
    :first-child选择某个元素的第一个子元素；
    :last-child选择某个元素的最后一个子元素；
    :nth-child()选择某个元素的一个或多个特定的子元素；
    :nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
    :nth-of-type()选择指定的元素；
    :nth-last-of-type()选择指定的元素，从元素的最后一个开始计算；
    :first-of-type选择一个上级元素下的第一个同类子元素；
    :last-of-type选择一个上级元素的最后一个同类子元素；
    :only-child选择的元素是它的父元素的唯一一个了元素；
    :only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；
    :empty选择的元素里面没有任何内容。

  • 否定选择器:not
input:not([type="submit"]) {border: 1px solid red;}
    给除了type="submit"以外的所有input加边框

  • 伪元素
    ::first-line选择元素的第一行
    ::first-letter选择文本块的第一个字母,主要运用于段落排版上多，比如说首字下沉
    ::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常用content配合使用，见过最多的就是清除浮动，
    .clearfix:before,
    .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    }
    .clearfix:after {clear: both;}
    .clearfix {zoom: 1;}

    ::selection用来改变浏览网页选中文本的默认效果

二、选择器的优先级是怎样的？

选择器按优先级从高到低排序：

• !important
• 内联样式
• ID 选择器
• 伪类
• 属性选择器
• 类选择器
• 元素(类型)选择器
• 通用选择器（*）

三、class和id的使用场景

• id使用场景
  具有唯一性使用id选择器，如js中获取元素
• class使用场景
  公用的，类似的样式使用类选择器。

四、使用CSS选择器时为什么要划定适当的命名空间？

为了能够更精确的定位到该元素，方便日后维护。举个例子：

网页中功能相似的模块可能较多,比如导航,导航可能有页面主导航,侧边栏导航,甚至页脚导航,一般导航使用class类选择器写样式,这时导航就不能单纯的使用nav做class命名,要写做main-nav,sidebar-nav,footer-nav,这样不会造成样式的污染.