CSS选择器的简单介绍

2020-11-27 来源：小侦探旅游网

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

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

元素选择器的权重是1；

id 选择器的权重为100；

class类选择器的权重为10；

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

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

CSS选择器简介：

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

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

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

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

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

简单属性选择器：img[title]，获取设置了alt属性的img元素；#wrapper[outter]，获取 id 为 wrapper 并且具有属性 wrapper 的元素；
具体属性选择器：input[type="button"]，获取属性值 button 的 input 元素；#wrapper[outter="abc"]，获取 id 为 wrapper 并且属性 outter的值为 abc 的元素；
部分属性选择器：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 的子元素，只往下找一级；子元素选择器和后代选择器不太一样，后代选择器包含子元素选择器，并且后代选择器还会继续向下查找；

兄弟元素选择器：

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

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

:root 选择文档的根元素，即 html 元素；
input:focus，当前 input 框获得焦点；
element:hover，鼠标悬停在当前元素上面；
p:nth-of-type(n)，选择是其父元素的第 n 个 p 元素，这个是依照父元素内部的 p 元素的顺序计算 n ，然后获取的； n 是整数，并且从1开始，也可以是公式，也可以是关键字even（偶数）、odd（奇数）；
p:first-of-type，选择是其父元素的第 1 个 p 元素，与 p:nth-of-type(1) 效果相同；
p:last-of-type，选择是其父元素的最后一个 p 元素，注意前面没有 nth；
p:nth-last-of-type(n)，选择是其父元素的第 n 个 p 元素，但是是从最后一个子项往前数，注意前面有 nth；
p:nth-child(n)，选择是其父元素的第 n 个子元素，并且得是 p 元素，这个是依照父元素内部的子元素的顺序计算 n ，然后再看第 n 个是否为 p 元素；这就出现一种情况，第 n 个子元素可能不是 p ，然后就获取不到了，所以用 nth-of-type(n) 会好一点；
p:first-child，选择是其父元素的第 1 个元素，并且是 p 元素，与 p:nth-child(1) 相同；
p:last-child，选择是其父元素的最后一个元素，并且是 p 元素；
p:nth-last-child(n)，选择是其父元素的第 n 个子元素，并且得是 p 元素，但是是从最后一个子项往前数，注意前面有 nth；
还有很多其他的...

伪元素选择器：

显示全文