css选择器

@liushaozhen 2016-09-12 06:18:46发表于 iuap-design/blog

css选择器

基本选择器

  • *:星号选择器用于选取页面中的所有元素,可用于快速清除所有元素的 margin 与 padding,但最好只在测试的时候使用,而不要正式用在 CSS 文件中,否则会大大加重浏览器负担。此外,星号选择器也可以给父层的所有子元素设定样式
  • #id:id 选择器,最常见的选择器用法之一,不可重复使用。
  • .class:class 选择器,也是最常见的选择器用法之一,与 id 选择器不同的是 class 选择器可同时选取多个元素
  • X:标签选择器 (type selector),用于选取 HTML 标签 (tag)。
  • X Y:后代选择器 (descendant selector),选取X元素内的所有Y元素
  • X + Y:临近选择器 (adjacent selector),选取紧邻在 X 元素后面出现的第一个元素
  • X > Y:子选择器,选取直接出现在父层 X 内的 Y 元素
  • X ~ Y:同样也是临近选择器,X + Y 选取紧邻在 X 后出现的第一个元素,而 X ~ Y 将选取 X 元素后出现的所有同级元素

属性选择器

  • E[attr]:只使用属性名,但没有确定任何属性值;
  • E[attr="value"]:指定属性名,并指定了该属性的属性值;
  • E[attr~="value"]:指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词,而且等号前面的“?”不能不写;
  • E[attr^="value"]:指定了属性名,并且有属性值,属性值是以value开头的;
  • E[attr$="value"]:指定了属性名,并且有属性值,而且属性值是以value结束的;
  • E[attr*="value"]:指定了属性名,并且有属性值,而且属值中包含了value;
  • E[attr|="value"]:指定了属性名,并且属性值是value或者以“value-”开头的值(比如说zh-cn);

伪类选择器

  • X:link:用于选取所有未点击过的链接
  • X:visited:用于选取所有已访问过的链接。
  • X:active:选择活动链接。
  • X:hover:最常用的伪类选择器,鼠标划过的样式
  • X:focus:获得焦点的样式
  • X:befor和X:after:这两个主要用来给元素的前面或后面插入内容,这两个常用"content"配合使用

:nth选择器

  • :fist-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:选择的元素里面没有任何内容。 IE6-8和FF3-浏览器不支持":nth-child,:nth-last-child(),:nth-of-type"选择器
  • :root :选择文档的根元素。

否定选择器(:not)

  • :not(selector) :选择非 selector 元素的每个元素。