我对CSS选择器的认识

2018-08-26 17:21:47来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

我对CSS选择器的认识

一、简述  

  CSS选择器是对HTML元素进行选择的筛选条件,大概可以分为两类:

  1. 特征选择器——根据元素自身所具有的某种特征进行筛选,比如名称、ID、属性等;
  2. 关系选择器——根据元素与其他元素的关系进行筛选,比如子元素、兄弟元素等;

  在真正使用的时候,几个简单的选择器可以组合成更复杂的选择器,所以谁也说不上CSS选择器有多少。还有两个选择器是功能性的,它们可以给元素已有内容之前或之后添加新内容。 

  我做了一个项目,里面包含一个测试CSS选择器的小功能,请看这里。

二、归纳

  下文中所有的 SELECTOR 都代表任何一个有效的选择器。

  1. 特征选择器:

描述 选择器 备注
1. 无论有什么特征——即全部  * { }   
2. 元素名称是 "element"  element { }   
3. 具有类名 "className"  .className { }   
4. 具有id名 "someID"  #someID { }   
5. 带有属性  attr  SELECTOR[attr] { }   
6. 带有属性 attr,且属性值为 "value"  SELECTOR[attr="value"] { }   
7. 带有属性 attr,且其若干个属性值中有一个是 "value"  SELECTOR[attr~="value"] { }   
8. 带有属性 attr,且其属性值包含字符串 "str"  SELECTOR[attr*="str"] { }   
9. 鼠标正位于其上方  SELECTOR:hover { }   
10. SELECTOR 是个独生子——它的父元素只有它这一个子元素  SELECTOR:only-child { }   
11. SELECTOR 是其父亲的第一个子元素  selector:first-child { }   
12. SELECTOR 是其父亲的第 N 个子元素  selector:nth-child(N) { }   
13. SELECTOR 是其父亲的最后一个子元素  selector:last-child { }   
14. SELECTOR 内部是真空——连空格都没有  SELECTOR:empty { }   
15. SELECTOR 被某个链接锚定了,而且该链接被点击了  SELECTOR:target { }  <a href="#topic">跳转到 SELECTOR 处</a>
16. SELECTOR 中被用户通过鼠标拖动选中的内容  SELECTOR::selection { }   
链接专有的特征
17. 未被访问的链接  a:link { }   
18. 已被访问的链接  a:visited { }   
19. 正在被点击的链接  a:active { }   
表格元素专有的特征
20. 目标是启用的  SELECTOR:enabled { }   
21. 目标是禁用的  SELECTOR:disabled { }   
22. 目标是被选中的(单选框、复选框)  SELECTOR:checked { }   
23. 目标获得了焦点  SELECTOR:focus { }  能接收用户输入的元素,当它正在接收时,就获得了焦点。
两个功能性选择器
24. 给 SELECTOR 的内容之前加上些东西  SELECTOR:before { }   
25. 给 SELECTOR 内容之后加上些东西  SELECTOR:after { }   

  2. 关系选择器

描述 选择器 备注
1. SELECTOR1 和 SELECTOR2  SELECTOR1, SELECTOR2 { }   
2. 位于 SELECTOR1 之后的所有兄弟元素 SELECTOR2  SELECTOR1~SELECTOR2 { }   
3. 与 SELECTOR1 紧邻着的 SELECTOR2 元素  selector1+selector2 { }   
4. SELECTOR 的首字母  selector:first-letter { }  类似的还有  SELECTOR:first-line { } 
5. SELECTOR1 的所有子元素 SELECTOR2  selector1>selector2 { }   
6. SELECTOR1 的所有后代元素 SELECTOR2  selector1 selector2 { }   
7. 所有不是 SELECTOR2 的 SELECTOR1  SELECTOR1:not(SELECTOR2) { }   

  个人浅薄之见,肯定有不到之处,希望得到有心之人指正,谢谢!

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:浅谈瀑布流

下一篇:Python开发【前端篇】HTML