CSS 选择器简介

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

 

选择器权重

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

• 元素选择器的权重是1；
• id 选择器的权重为100；
• class类选择器的权重为10；
• 内联style（JS操作的也是行间样式）的权重为1000；
• 当然如果某属性值设置了！important ,它还是最重要的，直接通杀；

 

CSS选择器简介：

• 通配选择器，*{...}，星号代表通配选择器，可以与任何元素匹配；
• 元素选择器，html{...}，body{...}，div{...}，文档的元素是最基本的选择器，元素选择器；
• 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. 部分属性选择器：div[class ^="a"]，获取 class 属性值以 a 为开头的 div 元素；div[class $="b"]，获取 class 属性值以 b 为结尾的 div 元素；

• 分组选择器，将要分组的选择器用逗号隔开；#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. div:nth-of-type(n)，选择是其父元素的第 n 个 div 元素，这个是依照父元素内部的 div 元素的顺序计算 n ，然后获取的； n 是整数，并且从1开始，也可以是公式，也可以是关键字even（偶数）、odd（奇数）；
5. div:first-of-type，选择是其父元素的第 1 个 div 元素，与 div:nth-of-type(1) 效果相同；
6. div:last-of-type，选择是其父元素的最后一 个 div 元素，注意前面没有 nth；
7. div:nth-last-of-type(n)，选择是其父元素的第 n 个 div 元素，但是是从最后一个子项往前数，注意前面有 nth；
8. div:nth-child(n)，选择是其父元素的第 n 个子元素，并且得是 div 元素，这个是依照父元素内部的子元素的顺序计算 n ，然后再看第 n 个是否为 div 元素；这就出现一种情况，第 n 个子元素可能不是 div ，然后就获取不到了，所以用 nth-of-type(n) 会好一点；
9. div:first-child，选择是其父元素的第 1 个元素，并且是 div 元素，与 div:nth-child(1) 相同；
10. div:last-child，选择是其父元素的最后一个元素，并且是 div 元素；
11. div:nth-last-child(n)，选择是其父元素的第 n 个子元素，并且得是 div 元素，但是是从最后一个子项往前数，注意前面有 nth；
12. 还有很多其他的...

• 伪元素选择器：

1. :first-letter，指定一个元素第一个字母的样式，所有前导标点符号应与第一个字母一同应用该样式，并且只能与块级元素关联；
2. :first-line，设置元素中第一行文本的样式，只能与块级元素关联；
3. :after，IE7及以下不支持，在元素内容的最开始插入生成内容；
4. :before，IE7及以下不支持，在元素内容的最后插入生成内容；
5. ::selection，匹配被用户选择的部分；只支持双冒号写法，只支持颜色和背景颜色两个样式；

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有