欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS选择器的简单介绍

程序员文章站 2022-04-24 14:34:21
...
前言:这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方,请大家指正,我会持续更新

选择器权重

  如果以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,匹配被用户选择的部分;只支持双冒号写法只支持颜色和背景颜色两个样式

以上就是CSS选择器的简单介绍的详细内容,更多请关注其它相关文章!

相关标签: CSS,选择器