CSS选择器的简单介绍

前言：这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方，请大家指正，我会持续更新！

 

选择器权重

　　如果以4位数表示选择符权重，那么：

• 元素选择器的权重是1；

• id 选择器的权重为100；

• class类选择器的权重为10；

• 内联style（JS操作的也是行间样式）的权重为1000；

• 当然如果某属性值设置了！important ,它还是最重要的，直接通杀；

 

CSS选择器简介：

• 通配选择器，*{...}，星号代表通配选择器，可以与任何元素匹配；

• 元素选择器，html{...}，body{...}，p{...}，文档的元素是最基本的选择器，元素选择器；

• id 选择器，#value，给元素设置一个 id 属性 ，值为value；

• class 类选择器，.value{...}，给元素设置一个 class 属性，值为value；

• 属性选择器，属性选择器根据元素的属性及属性值来选择元素，有很多种：

1. 简单属性选择器：img[title]，获取设置了alt属性的img元素；#wrapper[outter]，获取 id 为 wrapper 并且具有属性 wrapper 的元素；

2. 具体属性选择器：input[type="button"]，获取属性值 button 的 input 元素；#wrapper[outter="abc"]，获取 id 为 wrapper 并且属性 outter的值为 abc 的元素；

3. 部分属性选择器：p[class ^="a"]，获取 class 属性值以 a 为开头的 p 元素；p[class $="b"]，获取 class 属性值以 b 为结尾的 p 元素；

• 分组选择器，将要分组的选择器用逗号隔开；#wrapper , #content{...}，获取 id 为 wrapper 的元素，和 id 为 content 的元素，两个都获取；

• 后代选择器，将要分组的选择器用空格隔开，#wrapper #content{...}，在 id 为 wrapper 的元素对象内部，获取 id 为 content 的元素，可能是子元素，也可能是子孙元素；

• 子元素选择器，将要分组的选择器用大于号隔开，#wrapper > #content{...}，在 id 为 wrapper 的元素对象内部，获取 id 为 content 的子元素，只往下找一级；子元素选择器和后代选择器不太一样，后代选择器包含子元素选择器，并且后代选择器还会继续向下查找；

• 兄弟元素选择器：

1. 相邻兄弟选择器（IE6及以下不支持），将要分组的选择器用加号隔开，.wrapper + .content{...}，获取 class 为 wrapper 的元素之后，紧接着的这一个 class 为 content 的元素，和通用兄弟选择器不同的是，相邻兄弟选择器只获当前元素之后取紧接着的这一个元素，后面就算还有相同的，也选择不到了；

2. 通用兄弟选择器（IE7及以下不支持），将要分组的选择器用波浪号隔开，.wrapper ~ .content{...}，获取 class 为 wrapper 的元素之后，所有的 class 为 content 的元素，和相邻兄弟选择器是不一样的；

• 伪类选择器（IE8及以下不支持）：

1. :root 选择文档的根元素，即 html 元素；

2. input:focus，当前 input 框获得焦点；

3. element:hover，鼠标悬停在当前元素上面；

4. p:nth-of-type(n)，选择是其父元素的第 n 个 p 元素，这个是依照父元素内部的 p 元素的顺序计算 n ，然后获取的； n 是整数，并且从1开始，也可以是公式，也可以是关键字even（偶数）、odd（奇数）；

5. p:first-of-type，选择是其父元素的第 1 个 p 元素，与 p:nth-of-type(1) 效果相同；

6. p:last-of-type，选择是其父元素的最后一 个 p 元素，注意前面没有 nth；

7. p:nth-last-of-type(n)，选择是其父元素的第 n 个 p 元素，但是是从最后一个子项往前数，注意前面有 nth；

8. p:nth-child(n)，选择是其父元素的第 n 个子元素，并且得是 p 元素，这个是依照父元素内部的子元素的顺序计算 n ，然后再看第 n 个是否为 p 元素；这就出现一种情况，第 n 个子元素可能不是 p ，然后就获取不到了，所以用 nth-of-type(n) 会好一点；

9. p:first-child，选择是其父元素的第 1 个元素，并且是 p 元素，与 p:nth-child(1) 相同；

10. p:last-child，选择是其父元素的最后一个元素，并且是 p 元素；

11. p:nth-last-child(n)，选择是其父元素的第 n 个子元素，并且得是 p 元素，但是是从最后一个子项往前数，注意前面有 nth；

12. 还有很多其他的...

• 伪元素选择器：

1. :first-letter，指定一个元素第一个字母的样式，所有前导标点符号应与第一个字母一同应用该样式，并且只能与块级元素关联；

2. :first-line，设置元素中第一行文本的样式，只能与块级元素关联；

3. :after，IE7及以下不支持，在元素内容的最开始插入生成内容；

4. :before，IE7及以下不支持，在元素内容的最后插入生成内容；

5. ::selection，匹配被用户选择的部分；只支持双冒号写法，只支持颜色和背景颜色两个样式；

Atas ialah kandungan terperinci CSS选择器的简单介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!