当前位置： 移动技术网 > IT编程>网页制作>CSS > 我对CSS选择器的认识

我对CSS选择器的认识

2018年08月22日  | 移动技术网IT编程  | 我要评论

长城人寿保险怎么样,广州必瘦站,维多利亚一号剧情

我对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) { }   

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

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网