前言：这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方，请大家指正，我会持续更新！
选择器权重
如果以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 的元素，两个都获取；
元素选择器0，将要分组的选择器用空格隔开，#wrapper #content{…}，在 id 为 wrapper 的元素元素选择器1内部，获取 id 为 content 的元素，可能是子元素，也可能是子孙元素；
元素选择器2，将要分组的选择器用大于号隔开，#wrapper > #content{…}，在 id 为 wrapper 的元素对象内部，获取 id 为 content 的子元素，只往下找一级；子元素选择器和后代选择器不太一样，后代选择器包含子元素选择器，并且后代选择器还会继续向下查找；
兄弟元素选择器：
元素选择器3（IE6及以下不支持），将要分组的选择器用加号隔开，.wrapper + .content{…}，获取 class 为 wrapper 的元素之后，紧接着的这一个 class 为 content 的元素，和元素选择器4不同的是，相邻兄弟选择器只获当前元素之后取紧接着的这一个元素，后面就算还有相同的，也选择不到了；
通用兄弟选择器（IE7及以下不支持），将要分组的选择器用波浪号隔开，.wrapper ~ .content{…}，获取 class 为 wrapper 的元素之后，所有的 class 为 content 的元素，和相邻兄弟选择器是不一样的；
元素选择器5选择器（IE8及以下不支持）：
:root 选择文档的根元素，即 html 元素；
input元素选择器6，当前 input 框获得焦点；
element元素选择器7，鼠标悬停在当前元素上面；
p:nth-of-type(n)，选择是其父元素的第 n 个 p 元素，这个是依照父元素内部的 p 元素的顺序计算 n ，然后获取的； n 是元素选择器8，并且从1开始，也可以是公式，也可以是关键字even（偶数）、odd（奇数）；
p元素选择器9，选择是其父元素的第 1 个 p 元素，与 p:nth-of-type(1) 效果相同；
pclass0，选择是其父元素的最后一 个 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) 会好一点；
pclass1，选择是其父元素的第 1 个元素，并且是 p 元素，与 p:nth-child(1) 相同；
p:last-child，选择是其父元素的最后一个元素，并且是 p 元素；
p:nth-last-child(n)，选择是其父元素的第 n 个子元素，并且得是 p 元素，但是是从最后一个子项往前数，注意前面有 nth；
还有很多其他的…
伪元素选择器：
class2，指定一个元素第一个字母的样式，所有前导标点符号应与第一个字母一同应用该样式，并且只能与块级元素关联；
class3，设置元素中第一行文本的样式，只能与块级元素关联；
class4，IE7及以下不支持，在元素内容的最开始插入生成内容；
class5，IE7及以下不支持，在元素内容的最后插入生成内容；
::selection，匹配被用户选择的部分；只支持双冒号写法，只支持颜色和背景颜色两个样式；
以上就是CSS选择器的简单介绍的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1608488.html
微信扫一扫 
支付宝扫一扫 
