CSS 选择器
- 元素选择器 dom元素
通过指定元素选择标签
|
1 2 3 |
html {color:black;} h1 {color:blue;} h2 {color:silver;} |
- 选择器分组 ,[逗号]
通过,可以选择多个dom元素
|
1 2 3 4 5 6 7 8 9 10 |
/* no grouping */ h1 {color:blue;} h2 {color:blue;} h3 {color:blue;} h4 {color:blue;} h5 {color:blue;} h6 {color:blue;} /* grouping */ h1, h2, h3, h4, h5, h6 {color:blue;} |
- 类选择 . [句号]
可以通过class选择dom元素,并且可以指定元素类型，或多类选择
|
1 2 |
p .important.warning {background:silver;} <p class="important urgent warning">This paragraph is a very important warning.</p> |
- ID选择器 #
- 属性选择器 []
选中所有包含指定属性的元素
|
1 2 3 4 |
planet[moons="1"] {color: red;} <planet>Venus</planet> <planet moons="1">Earth</planet> <planet moons="2">Mars</planet> |
- 后代选择器使用 空格
如：此样式会更改所有strong标签内的内容为红色。
|
1 2 3 4 5 |
<style type="text/css"> h1 strong {color:red;} </style> <h1>This is <strong>very</strong> <em> <strong>very</strong> important.</h1> |
- 子选择器使用 >
如：此样式只会更改h1下子strong标签内的内容，中间因为有em，最后一个strong为em下的子元素，所以不会改变。
|
1 2 3 4 5 |
<style type="text/css"> h1 strong {color:red;} </style> <h1>This is <strong>very</strong> <strong>very</strong> <em> <strong>very</strong> important.</h1> |
- 兄弟选择器使用 +
可以选择紧接在另一元素后的元素，且两者有相同的父元素。只有235会变为红色
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<style type="text/css"> li + li{color:red;} </style> <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <span>List item 3</span> <li>List item 4</li> <li>List item 5</li> </ul> |
- 伪类 ：(冒号）
|
1 2 3 4 5 6 7 |
:active 向被激活的元素添加样式。 :focus 向拥有键盘输入焦点的元素添加样式。 :hover 当鼠标悬浮在元素上方时，向元素添加样式。 :link 向未被访问的链接添加样式。 :visited 向已被访问的链接添加样式。 :first-child 向元素的第一个子元素添加样式。 :lang 向带有指定 lang 属性的元素添加样式。 |
- 伪元素
| :first-letter | 向文本的第一个字母添加特殊样式。 | 1 |
| :first-line | 向文本的首行添加特殊样式。 | 1 |
| :before | 在元素之前添加内容。 | 2 |
| :after | 在元素之后添加内容。 | 2 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
下面的属性可应用于 "first-line" 伪元素： font color background word-spacing letter-spacing text-decoration vertical-align text-transform line-height clear 下面的属性可应用于 "first-letter" 伪元素： font color background margin padding border text-decoration vertical-align (仅当 float 为 none 时) text-transform line-height float clear |
©版权声明：本文为【翰林小院】（huhanlin.com）原创文章，转载时请注明出处！
发表评论