CSS选择器
2014-11-05 19:01
274 查看
一.基本选择器
序号 | 选择器 | 含义 | 举例 |
1 | * | 通用元素选择器, 匹配任何元素 | * { margin:0; padding:0; } |
2 | E | 标签选择器, 匹配所有使用E标签的元素 | p { font-size:2em; } |
3 | .info或E.info | class(类)选择器, 匹配所有class属性中包含info的元素 | .info { background:#ff0; } |
4 | #info或E#info | id选择器, 匹配所有id属性等于info的元素 | p#info { background:#ff0; } |
序号 | 选择器 | 含义 | 举例 |
5 | E,F | 多元素选择器(群组选择器),同时匹配所有E元素或F元素,E和F之间用逗号分隔 | Div,p { color:#f00; } |
6 | E F | 后代(元素)选择器, 匹配所有属于E元素后代的F元素,E和F之间用空格分隔 | #nav li { display:inline; } |
7 | E>F | 子(元素)选择器, 匹配所有E元素的子元素F,与后代选择器相比,子元素选择器 只能选择作为某元素子元素的元素。即只对直接后代有影响, 而对“孙子”以及多个层的后代不产生作用。 | div > strong { color:#f00; } 这个规则会把第一个 h1 下面的 strong 元素变为红色, 但是第二个 strong 不受影响 |
8 | E+F | 毗邻元素选择器(又叫相邻同胞选择器), 匹配所有紧随E元素之后的同级元素F | h1 + p {color:blue};h1元素后面紧跟了 多个段落p元素,但只有第一个段落变蓝 |
序号 | 选择器 | 含义 | 举例 |
9 | E[att]或E[att1][att2] | 简单属性选择器;匹配所有具有att属性的E元素, 不考虑它的值;如果具有多个属性,需要同时匹配多个属性。 (注意:E在此处可以省略,比如"[cheacked]"。以下同。) | p[title] { color:#f00; } a[title][href]{color:red} |
10 | E[att=val] |
| div[class=”error”] { color:#f00; } |
11 | E[att~=val] | 匹配所有att属性具有多个空格分隔的值、 | td[class~=”name”] { color:#f00; } |
12 | E[abc^="def"] |
| a[href^="w3school.com.cn"] |
13 | E[abc$="def"] | 选择 abc 属性值以 "def" 结尾的所有元素 | a[href$="w3school.com.cn"] |
14 | E[abc*="def"] | 选择 abc 属性值中包含子串 "def" 的所有元素 | a[href*="w3school.com.cn"] |
15 | E[att|=val] | 这个规则会选择 att属性等于val或以 val- 开头的所有元素, | *[lang|="en"] {color: red;} |
css2.1中的伪类
序号 | 选择器 | 含义 | 举例 |
16 | E:first-child | 向元素的第一个子元素添加样式。 | p:first-child { color:red} 如果有多个p元素段落, 仅第一个段落内的文字变红 |
17 | E:link | 向未被访问的链接添加样式。 | a:link {color: #FF0000} |
18 | E:visited | 向已被访问的链接添加样式。 | a:link {color: #00FF00} |
19 | E:hover | 当鼠标悬浮在元素上方时,向元素添加样式。 | a:link {color: #0000FF} |
20 | E:active | 向被激活的元素添加样式。 | a:link {color: #FFFF00} |
21 | E:focus | 向拥有键盘输入焦点的元素添加样式。 | input:focus{ background-color:yellow;} |
22 | E:lang(c) | 匹配lang属性等于c的E元素 | q:lang(no){quotes: "~" "~"} |
序号 | 选择器 | 含义 | 举例 |
23 | E:first-line | 匹配E元素的第一行 "first-line" 伪元素只能用于块级元素。 | p:first-line {color:#00ff00;} |
24 | E:first-letter | 匹配E元素的第一个字母 "first-letter" 伪元素只能用于块级元素。 | p.article:first-letter {color:#ff0000;} |
25 | E:before | 在E元素之前插入生成的内容 | h1:before {content:url(/i/w3school_logo_white.gif)} |
26 | E:after | 在E元素之后插入生成的内容 | a:after{content: " (" attr(href) ")";} 链接后插入括号中的 URL |
序号 | 选择器 | 含义 | 举例 |
27 | E ~ F | 匹配任何在E元素之后的同级F元素 | p ~ ul { background:#ff0; } |
序号 | 选择器 | 含义 | 举例 |
28 | E:enabled | 匹配表单中激活的元素 (大部分元素默认激活) | input[type="text"]:enabled { background-color: #ff0000;} |
29 | E:disabled | 匹配表单中禁用的元素 | input:disabled |
30 | E:checked | 匹配表单中被选中的radio(单选框) 或checkbox(复选框)元素 | input:checked { background-color: #ff0000;} |
31 | E::selection | 匹配用户当前选中的元素 | ::selection{color:#ff0000;} |
序号 | 选择器 | 含义 | 举例 |
32 | E:root | 匹配文档的根元素,对于HTML文档, 就是HTML元素 | :root{background:#ff0000;} 在html文档的中,E元素只能是HTML 可以省略不写 |
33 | E:nth-child(n) | 匹配其父元素的第n个子元素,第一个编号为1 不论元素的类型,n 可以是数字、关键词或公式。 | p:nth-child(2) {background:#ff0000;} |
34 | E:nth-last-child(n) | 匹配其父元素的倒数第n个子元素,第一个编号为1 | p:nth-last-child(2) {background:#ff0000;} |
35 | E:nth-of-type(n) | 选择器匹配属于父元素的特定类型的 第 N 个子元素的每个元素 | p:nth-of-type(2) {background:#ff0000;} |
36 | E:nth-last-of-type(n) | 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素 | p:nth-of-type(2) {background:#ff0000;} |
37 | E:last-child | 匹配父元素的最后一个子元素,等同于:nth-last-child(1) | p:last-child {background:#ff0000;} |
38 | E:first-of-type | 匹配父元素下使用同种标签的第一个子元素, 等同于:nth-of-type(1) | p:first-of-type {background:#ff0000;} |
39 | E:last-of-type | 匹配父元素下使用同种标签的最后一个子元素, 等同于:nth-last-of-type(1) | p:last-of-type {background:#ff0000;} |
40 | E:only-child | 匹配父元素下仅有的一个子元素,等同于: first-child:lastchild或 :nth-child(1):nth-last-child(1) | p:only-child {background:#ff0000;} |
41 | E:only-of-type | 匹配父元素下使用同种标签的唯一一个子元素, 等同于:first-of-type:last-of-type 或 :nth-of-type(1):nth-last-of-type(1) | p:only-of-type {background:#ff0000;} |
42 | E:empty | 匹配一个不包含任何子元素的元素,注意,文本节点也被看作子元素 | p:empty {width:100px;height:20px; background:#ff0000;} |
序号 | 选择器 | 含义 | 举例 |
43 | E:not(s) | 匹配不符合当前选择器的任何元素 | :not(p){color:#ff000; } |
序号 | 选择器 | 含义 | 举例 |
44 | E:target | 匹配文档中特定"id"点击后的效果 URL 带有后面跟有锚名称 #,指向文档内某个具体的元素。 这个被链接的元素就是目标元素(target element)。 用于选取当前活动的目标元素 | :target {border: 2px solid #D4D4D4; background-color: #e5eecc;} |
|
相关文章推荐
- 三十个应该牢牢记住的CSS选择器(上)/The 30 CSS Selectors you Must Memorize
- css选择器
- 2.7.2: 其他使用CSS选择器的方法
- CSS选择器详解
- 《Two Days DIV + CSS》读书笔记——CSS选择器
- CSS自学笔记(3):CSS选择器
- CSS选择器优先级的计算
- 那些被我遗忘的CSS选择器
- CSS选择器学习小结
- 第十课:CSS选择器的介绍和区分
- CSS选择器样式和style属性样式优先级
- (四)CSS选择器和派生选择器
- CSS选择器的优先级
- css选择器
- 关于css选择器
- css选择器的优先级别
- CSS选择器总结
- 浅谈CSS选择器中的空格
- CSS选择器总结
- 【转】详解CSS选择器、优先级与匹配原理