博客
关于我
CSS选择器的权重
阅读量:593 次
发布时间:2019-03-11

本文共 2298 字,大约阅读时间需要 7 分钟。

每天一个前端面试题之 CSS选择器的权重

首先,CSS样式的引入有三种方式,行间样式,内联样式,外联样式。

其权重为 行间样式>内联样式>外联样式

其次,CSS的选择器有以下类型:

1)id选择器(#id)  使用ID选择器之前需要先在html文档中的元素添加id名称,这样在样式选择器中才能找到相对应的元素,不同的是id选择器是一个页面中唯一的值,我们在类使用时是在相对应的类名前加上一个“.”号(.className)而id选择器是在名称前使用"#"如(#id)。 2)类选择器(.className)  类选择器是以一独立于文档元素的方式来指定样式,使用类选择器之前需要在html元素上定义类名,换句话说需要保证类名在html标记中存在,这样才能选择类。3)元素选择器(E)  元素选择器,是css选择器中最常见而且最基本的选择器。元素选择器其实就是文档的元素,如html,body,p,div等等。4)群组选择器(selector1,selector2,...,selectorN) 群组选择器是将具有相同样式的元素分组在一起,每个选择器之间使用逗号“,”隔开,如上面所示selector1,selector2,...,selectorN。这个逗号告诉浏览器,规则中包含多个不同的选择器,如果不有这个逗号,那么所表达的意就完全不同了,省去逗号就成了我们前面所说的后代选择器。5)通用兄弟选择器(E 〜 F) 通用兄弟元素选择器是CSS3新增加一种选择器,这种选择器将选择某元素后面的所有兄弟元素,他们也和相邻兄弟元素类似,需要在同一个父元素之中,换句话说,E和F元素是属于同一父元素之内,并且F元素在E元素之后,那么E ~ F 选择器将选择中所有E元素后面的F元素。6)相邻兄弟元素选择器(E + F)   相邻兄弟选择器可以选择紧接在另一元素后的元素,而且他们具有一个相同的父元素,换句话说,EF两元素具有一个相同的父元素,而且F元素在E元素后面,而且相邻,这样我们就可以使用相邻兄弟元素选择器来选择F元素。7)子元素选择器(E>F)   子元素选择器只能选择某元素的子元素,其中E为父元素,而F为子元素,其中E>F所表示的是选择了E元素下的所有子元素F。这和后代选择器(E F)不一样,在后代选择器中F是E的后代元素,而子元素选择器E > F,其中F仅仅是E的子元素而以。8)后代选择器(E F)   后代选择器也被称作包含选择器,所起作用就是可以选择某元素的后代元素,比如说:E F,前面E为祖先元素,F为后代元素,所表达的意思就是选择了E元素的所有后代F元素,请注意他们之间需要一个空格隔开。这里F不管是E元素的子元素或者是孙元素或者是更深层次的关系,都将被选中,换句话说,不论F在E中有多少层关系,都将被选中: 9)通配符选择器(*)    通配符选择器是用来选择所有元素,,也可以选择某个元素下的所有元素。 10)伪类选择器   这里只是列举了几个比较常用的伪类,要知道怎么用的话,可以去查查资料。   :link:未访问的链接;   :visited:已访问的链接,不建议使用;   :hover:鼠标移动到容器,不仅限于链接,可用于页面中的任何元素;   :active:被激活时的状态,不仅限于链接,可用于任何具有tabindex属性的元素;   :focus:获得焦点时状态,不仅限于链接,可用于任何具有tabindex属性的无线:   :enabled:已启用的界面元素:   :disabled:已禁用的界面元素:   :target:该选择器定位当前活动页面内定位点的目标元素:11)伪元素选择器   伪元素可用于定位文档中包含的文本,为与伪类进行区分,伪元素使用双冒号 :: 定义,但单冒号 : 也能被识别。这里也只是列举了几个常用的。   ::first-line:匹配文本首行;   ::first-letter:匹配文本首字母;   ::before 与 ::after :使用 contnet 属性生成额外的内容并插入在标记中:   ::selection:匹配突出显示的文本:12)属性选择器   E[attr]:该选择器定位具有属性attr的任何元素E:   E[attr=val]:该选择器定位具有属性attr且属性值为val的任何元素E:   E[attr|=avl]:该选择器定位具有属性attr且属性值为val或以val-开始的任何元素E:   E[attr~=val]:该选择器定位具有属性attr且属性值为完整单词 val 的任何元素E:   E[attr^=val]:该选择器定位具有属性attr且属性值以val开头的任何元素E:   E[attr$=val]:该选择器与E[attr^=val]正好相反,定位具有属性attr且属性值以val结尾的任何元素E:  E[attr*=val]:该选择器与E[attr~=val]相似,但更进一步,定位具有属性attr且属性值任意位置包含val的元素E,val可以是一个完整的单词,也可以是一个单词中的一部分:

权重的计算规则如下:

  • 第一等:代表内联样式,如: style=””,权值为1000。
  • 第二等:代表ID选择器,如:#content,权值为0100。
  • 第三等:代表类,伪类和属性选择器,如.content,权值为0010。
  • 第四等:代表类型选择器和伪元素选择器,如div p,权值为0001。
  • 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
  • 继承的样式没有权值。

转载地址:http://lbqtz.baihongyu.com/

你可能感兴趣的文章
NHibernate异常:No persister for的解决办法
查看>>
NIFI1.21.0_java.net.SocketException:_Too many open files 打开的文件太多_实际操作---大数据之Nifi工作笔记0051
查看>>
NIFI1.21.0_Mysql到Mysql增量CDC同步中_日期类型_以及null数据同步处理补充---大数据之Nifi工作笔记0057
查看>>
NIFI1.21.0_Mysql到Mysql增量CDC同步中_补充_更新时如果目标表中不存在记录就改为插入数据_Postgresql_Hbase也适用---大数据之Nifi工作笔记0059
查看>>
NIFI1.21.0_NIFI和hadoop蹦了_200G集群磁盘又满了_Jps看不到进程了_Unable to write in /tmp. Aborting----大数据之Nifi工作笔记0052
查看>>
NIFI1.21.0最新版本安装_连接phoenix_单机版_Https登录_什么都没改换了最新版本的NIFI可以连接了_气人_实现插入数据到Hbase_实际操作---大数据之Nifi工作笔记0050
查看>>
NIFI1.21.0通过Postgresql11的CDC逻辑复制槽实现_指定表多表增量同步_增删改数据分发及删除数据实时同步_通过分页解决变更记录过大问题_02----大数据之Nifi工作笔记0054
查看>>
NIFI1.21.0通过Postgresql11的CDC逻辑复制槽实现_指定表多表增量同步_插入修改删除增量数据实时同步_通过分页解决变更记录过大问题_01----大数据之Nifi工作笔记0053
查看>>
NIFI1.21.0通过Postgresql11的CDC逻辑复制槽实现_指定表或全表增量同步_实现指定整库同步_或指定数据表同步配置_04---大数据之Nifi工作笔记0056
查看>>
NIFI1.23.2_最新版_性能优化通用_技巧积累_使用NIFI表达式过滤表_随时更新---大数据之Nifi工作笔记0063
查看>>
NIFI从MySql中增量同步数据_通过Mysql的binlog功能_实时同步mysql数据_根据binlog实现数据实时delete同步_实际操作04---大数据之Nifi工作笔记0043
查看>>
NIFI从MySql中增量同步数据_通过Mysql的binlog功能_实时同步mysql数据_配置binlog_使用处理器抓取binlog数据_实际操作01---大数据之Nifi工作笔记0040
查看>>
NIFI从MySql中增量同步数据_通过Mysql的binlog功能_实时同步mysql数据_配置数据路由_实现数据插入数据到目标数据库_实际操作03---大数据之Nifi工作笔记0042
查看>>
NIFI从MySql中增量同步数据_通过Mysql的binlog功能_实时同步mysql数据_配置数据路由_生成插入Sql语句_实际操作02---大数据之Nifi工作笔记0041
查看>>
NIFI从MySql中离线读取数据再导入到MySql中_03_来吧用NIFI实现_数据分页获取功能---大数据之Nifi工作笔记0038
查看>>
NIFI从MySql中离线读取数据再导入到MySql中_不带分页处理_01_QueryDatabaseTable获取数据_原0036---大数据之Nifi工作笔记0064
查看>>
NIFI从MySql中离线读取数据再导入到MySql中_无分页功能_02_转换数据_分割数据_提取JSON数据_替换拼接SQL_添加分页---大数据之Nifi工作笔记0037
查看>>
NIFI从PostGresql中离线读取数据再导入到MySql中_带有数据分页获取功能_不带分页不能用_NIFI资料太少了---大数据之Nifi工作笔记0039
查看>>
nifi使用过程-常见问题-以及入门总结---大数据之Nifi工作笔记0012
查看>>
NIFI分页获取Mysql数据_导入到Hbase中_并可通过phoenix客户端查询_含金量很高的一篇_搞了好久_实际操作05---大数据之Nifi工作笔记0045
查看>>