爱站程序员基地选择符 Selectors
- 元素选择符
- 关系选择符
- 属性选择符
- 伪类选择符
- 伪对象选择符
- CSS权重
元素选择符
| 选择符 | 名称 | 描述 |
|---|---|---|
| * | 通配选择符 | 所有元素对象 |
| E | 类型选择符 | 匹配对应的标签 |
| # | id选择符 | 以唯一标识符id属性作为对象的选择符 |
| . | class选择符 | 以包含对应的class属性作为对象的选择符 |
一般我们在CSS样式表里面加入*{margin:0;padding:0},清除所有元素的内外边距
关系选择符
| 选择符 | 名称 | 描述 |
|---|---|---|
| div p | 包含(后代)选择符 | 选择div元素里面的所有p元素(儿子，包括孙子…) |
| div>p | 子选择符 | 选择p元素的父亲是div元素的所有p元素(儿子) |
| div+p | 相邻选择符 | div元素之后的一个p元素，同级，只能从div元素的位置向后查找 |
| div~p | 兄弟选择符 | div元素之后的所有p元素，同级，只能从div元素的位置向后查找 |
属性选择符
| 选择符 | 描述 |
|---|---|
| E[att] | 选择具有att属性的E元素 |
| E[att=“val”] | 选择具有att属性且属性值等于val的E元素 |
| E[att^=“val”] | 匹配具有att属性、且值以val
开头 的E元素 |
| E[att$=“val”] | 匹配具有att属性、且值以val
结尾 的E元素 |
| E[att*=“val”] | 匹配具有att属性、且值中
含有 val的E元素 |
| E[att~=“val”] | 选择具有att属性且属性值为用空格分隔的字词列表，其中一个等于val的E元素，或者只有一个值且该值就等于val |
| E[att|=“val”] | E拥有att属性，并且值为val，或者值是以val-开头的 |
div[class~=\'a\'] {} //可以选择到 1，3div[class|=\'a\'] {} //可以选择到 1，4<div class=\"a\">1</div><div class=\"ab\">2</div><div class=\"a b\">3</div><div class=\"a-b\">4</div><div class=\"b-a-c\">5</div>
伪类选择符
| 选择符 | 描述 |
|---|---|
| a:link | 设置超链接a在未被访问前的样式 |
| a:visited | 设置超链接a在其链接地址已被访问过时的样式 |
| E:hover | 设置元素在其鼠标悬停时的样式，基本上所有元素都有hover |
| E:active | 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式 |
| E:focus | 设置元素成为焦点(该元素的onfocus事件发生)时的样式 |
| E:not(s) | 匹配不含有s选择符的元素E |
| E:root | 匹配E元素在文档的根元素 |
| E:first-child | 匹配父元素第一个子元素E |
| E:last-child | 匹配父元素最后一个子元素E |
| E:only-child | 匹配父元素仅有的一个子元素E |
| E:nth-child(n) | 匹配父元素的第n个子元素 |
| E:nth-last-child(n) | 匹配父元素的倒数第n个子元素 |
| E:first-of-type(n) | 匹配父元素下第一个类型为E的子元素 |
| E:last-of-type | 匹配父元素下所有类型为E的子元素倒数一个 |
| E:only-of-type | 匹配父元素所有子元素唯一一个类型为E的的子元素 |
| E:nth-of-type(n) | 匹配父元素的第n个子元素E |
| E:nth-last-of-type(n) | 匹配父元素的倒数第n个子元素E |
| E:empty | 匹配没有任何子元素(包括text节点)的元素E |
| E:checked | input元素type为radio与CheckBox为选中状态时选中 |
| E:enabled | 可用状态的元素 |
| E:disabled | 禁用状态的元素 |
| E:target | 匹配相关URL指向的元素 |
E:not(s) 否定伪类选择符假定有一个列表，每个列表项都有一个条底边线，但是最后一项不需要底边线.demo li:not(:last-child){border-bottom:1px solid #ddd;}p:not(.abc){color:#f00;}除了第一个，其他的p字体样色都是红色<p class= \'abc\'>1</p><p id= \'abc\'>2</p><p class= \'abcd\'>3</p>
nth-child(n) 关于参数n
- n是数字，就是选择第几个
- 关键字，even偶数，odd奇数
- 公式，n是从0开始计算的
| 公式 | 呈现 |
|---|---|
| 2n | 偶数 |
| 2n + 1 | 奇数 |
| 5n | 5 10 15 … |
| n + 5 | 从第五个开始(包含第五个)到最后 |
| -n + 5 | 前5个(包含第五个) |
伪对象选择符
| 选择符 | 描述 |
|---|---|
| E::first-letter | 设置对象内的第一个字符样式 |
| E::first-line | 设置对象内第一行的样式 |
| E::before | 设置对象前发生的内容 |
| E::after | 设置对象后发生的内容 |
| E::placeholder | 设置对象文字占位符的样式 |
| E::selection | 设置对象被选择时的颜色 |
CSS3将伪对象选择符（伪元素）前面的单冒号(:)修改为双冒号(::)用以区别伪类选择符，但以前的写法仍然有效
E:first-letter、E::first-line此伪对象仅作用于块元素。内联元素需要设置为块元素才可以使用
CSS权重
权重决定了你的CSS样式最终的呈现效果，CSS样式我们会大量应用，给元素添加CSS样式的方式有很多，可以外部引入，可以写内部样式表，也可以写行内样式表，有时会发现自己写的CSS样式不生效。这里注意一点，CSS样式浏览器都会解析，但是最终呈现效果就是权重的影响了。
权重记忆口诀。从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1
| 类型 | 权重 |
|---|---|
| ! important | 无穷 |
| 行间样式 | 1000 |
| id | 100 |
| class/属性选择器/伪类:hover | 10 |
| 标签选择器/伪元素:after | 1 |
| 通配符 | 0 |
01. *{} ====》002. li{} ====》1(一个元素)03. li:first-line{} ====》2(一个元素，一个伪元素)04. ul li {} ====》2（两个元素）05. ul ol+li{} ====》3（三个元素）06. h1+ *[rel=up] {} ====》11（一个属性选择器，一个元素）07. ul ol li.red{} ====》13（一个类，三个元素）08. li.red.level{} ====》21（两个类，一个元素）09. style=\"\" ====》1000(一个行内样式)10. p {} ====》1（一个元素）11. div p {} ====》2（两个元素）12. .sith {} ====》10（一个类）13. div p.sith{} ====》12（一个类，两个元素）14. #sith{} ====》100（一个ID选择器）15. body #darkside .sith p {} ====》112(1+100+10+1,一个Id选择器，一个类，两个元素)</pre>
