css选择器

[lucian55]

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 元素的每个元素。