资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/【前端学习】-粗谈选择器

【前端学习】-粗谈选择器

Charlie_Jade / 3575人阅读

摘要：对于一个前端，选择器是日常生活中必须接触的部分，这篇文章主要探讨一下选择其的分类及一些小技巧。

对于一个前端er，选择器是日常生活中必须接触的部分，这篇文章主要探讨一下选择其的分类及一些小技巧。

【分类】
1.基础选择器
2.结构选择器
3.伪类选择器
4.伪元素
5.属性选择器

【描述】
1.基础选择器（浏览器都兼容）

</>复制代码 
  1. * 通配符 （可以匹配元素中所有的html元素）
  2.     如：*{color:#000;}则代表将页面全部元素添加属性为#000的颜色值；
  3. E 元素选择器（匹配特定的标签）
  4.     如：a{text-decoration:underline;}则代表将页面所有的a标签设置下划线；
  5. #id ID选择器（匹配页面特定的id）
  6.     如：#my{color:#000}则代表将页面id为my的元素添加属性为#000的颜色值；
  7. .class 类选择器（匹配页面特定的class）
  8.     如：.my{color:#000}则代表将页面class为my的元素添加属性为#000的颜色值；
  9. S1,S2 群组选择器（匹配包含S1，包含S2元素，匹配一个即可）
  10.     如：.my,.you{color:#000}则代表将页面class为my和class为you的元素添加属性为#000的颜色值；
  11. S1S2 合并选择器（匹配包含S1及S2的元素，该元素同时必须包含S1及S2）
  12.     如：.my.you{color:#000}则代表将页面class有my及you的元素添加属性为#000的颜色值；

2.结构选择器

</>复制代码 
  1. S1 S2 后代选择器（S1所有的后代S2）
  2. S1>S2 子选择器（S1的子元素S2 IE7+）
  3. S1+S2 相邻兄弟选择器（S1后面的相邻兄弟元素S2 IE7+）
  4. S1~S2 通用兄弟选择器（S1后面的所有兄弟元素S2，IE7+）

【举例图示】
a.区分S1 S2及S1,S2及S1S2三类选择器；

</>复制代码 
  1.     
  2.         you and me
  3.     
  4.     
  5.         you
  6.     
  7.     
  8.         me
  9.         
  10.             you
  11.         
  12.     
</>复制代码 
  1.     .me,.you{
  2.         color: deeppink;
  3.     }
  4.     .you.me{
  5.         background: #eee;
  6.     }
  7.     .me .you{
  8.         color: #0f0;
  9.     }

添加如上结构及样式，可得到下面的效果:

可以看出来.me,.you群组选择器即只要包含了任意一个即可生效；.me .you后代选择是只有.me的后代.you才会生效，.me.you合并选择器，是需要两个选择器都包含才会生效。

b.区分各类兄弟选择器

</>复制代码 
  1.     
  2.         
    son1
  3.         
    son2
  4.         
    son3
  5.         
    son4
  6.     
  7.     
  8.         son other
  9.     
</>复制代码 
  1.     .parent >.son{
  2.         color: #0f0;
  3.     }
  4.     .son1 + .son{
  5.         text-align: center;
  6.     }
  7.     .son1 ~ .son{
  8.         background: #eee;
  9.     }

添加如上结构及样式，可得到下面的效果:

3.伪类选择器

</>复制代码 
  1. 动态伪类选择器
  2.     :link
  3.     :visited
  4.     :acitve(IE8+)
  5.     :hover
  6.     :focus(IE8+)
  7. 目标伪类选择器
  8.     :target(IE9+)
  9. 语言伪类选择器
  10.    :lang(language)
  11. ui元素状态伪类选择器（IE9+）
  12.     :checked  选中态
  13.     :enabled    启用态
  14.     :disabled    禁用态
  15. 结构伪类选择器(IE9+)
  16.     :first-child
  17.     :last-child
  18.     :root
  19.     :nth-child(n) odd even
  20.     :nth-last-child(n)
  21.     :nth-of-type(n)
  22.     :nth-last-of-type(n)
  23.     :first-of-type
  24.     :last-of-type
  25.     :only-child
  26.     :only-of-type
  27.     :empty
  28.     n的场景 n n*length n+length -n+length n*length+b odd even
  29. 否定伪类选择器
  30.     :not (IE9+)

【举例图示】
以上伪类选择器，结构伪类选择器在日常效果中应用最为广泛，应用恰当可以得到很多意想不到的效果。【具体效果会另开文章再更新】

4.伪元素

</>复制代码 
  1. ::first-letter 第一个字母
  2. ::first-line 第一行文本
  3. ::before 在元素前插入内容，但不会生成dom，可以设置样式【会在下篇文章补充说明】
  4. ::after 在元素后插入内容，但不会生成dom，可以设置样式，常用于清除浮动【会在下篇文章补充说明】

5.属性选择器【IE7+】

</>复制代码 
  1. E[attr] 匹配具有属性attr的元素E
  2. E[attr=val] 匹配属性attr为val的元素E
  3. E[attr|=val] 以val 或者val-开头
  4. E[attr~=val] 属性值要包含val这个属性
  5. E[attr*=val] 属性值中有val这个字符串就可以
  6. E[attr^=val] 以val开头
  7. E[attr$=val] 以val结束
云服务器 GPU云服务器 选择器 派生选择器 省市选择器 属性选择器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112638.html

相关文章

  • SVG的粗谈

    摘要：和确定的版本指定的宽高指定命名空间。的曲线就是使用画的。等等元素元素是用来组合对象的容器。添加到元素的属性会被其所有的子元素继承。是基于矢量的，可以很好的处理图像大小变化。而是基于位图的，无法进行大小变化。 背景 最近一直在做报表之类的需求，用highcharts比较多。highcharts使用svg进行绘图，所以学习了一下svg，稍微记录一下。 概况 svg是XML语言的一种形式。S...

    el09xccxy 评论0 收藏0

  • 重学前端学习笔记（二十二）--选择器的机制

    摘要：优先级第一优先级无连接符号第二优先级空格第三优先级复杂选择器的连接符号空格表示选中所有符合条件的后代节点。后代表示选中符合条件的子节点。直接后继表示选中对应列中符合条件的单元格。 笔记说明 重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【...

    acrazing 评论0 收藏0

  • 重学前端学习笔记（二十二）--选择器的机制

    摘要：优先级第一优先级无连接符号第二优先级空格第三优先级复杂选择器的连接符号空格表示选中所有符合条件的后代节点。后代表示选中符合条件的子节点。直接后继表示选中对应列中符合条件的单元格。 笔记说明 重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【...

    jeffrey_up 评论0 收藏0

  • 重学前端学习笔记（二十二）--选择器的机制

    摘要：优先级第一优先级无连接符号第二优先级空格第三优先级复杂选择器的连接符号空格表示选中所有符合条件的后代节点。后代表示选中符合条件的子节点。直接后继表示选中对应列中符合条件的单元格。 笔记说明 重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【...

    张汉庆 评论0 收藏0

发表评论

登陆后可评论

0条评论

Charlie_Jade

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<