首页 > web前端 > css教程 > 正文

CSS选择器的简单介绍

黄舟
发布: 2017-04-13 10:30:54
原创
1535 人浏览过

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

 

选择器权重

  如果以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选择器的简单介绍的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板