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,匹配被用户选择的部分;只支持双冒号写法只支持颜色和背景颜色两个样式
posted @ 2017-04-10 00:53  快乐锁  阅读(547)  评论(0编辑  收藏  举报