类选择器
.important.urgent {background:silver;}
像这种多个类选择器连接在一起的写法，仅可以选择同时包含这些类名的元素（类名的顺序不限）。
注意：并不是后代选择器哟~
只要class列表当中有和这两个类名就可以了，并不是完全匹配。
<p class="important urgent warning">
This paragraph is a very important and urgent warning.
</p>
属性选择器
只对有 href 属性的锚（a 元素）应用样式：
a[href] {color:red;}
这个还是要注意下的，因为遇到的情况不多，但是至少要会一种情况。
通配符写法：
img[title~="Figure"] {border: 1px solid gray;}
~ 表示title中包含‘Figure’的img
这个规则会选择 title 文本包含 "Figure" 的所有图像。没有 title 属性或者 title 属性中不包含 "Figure" 的图像都不会匹配。
特定属性选择类型
*[lang|="en"] {color: red;}
上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。因此，以下示例标记中的前三个元素将被选中，而不会选择后两个元素：
后代选择器
后代选择器两个元素之间的层次间隔可以是无限的。
例如：ul em 将会选择以下标记中的所有 em 元素，不管em在ul下的第几层。
<ul>
<li>List item 1
<ol>
<li>List item 1-1</li>
<li>List item 1-2</li>
<li>List item 1-3
<ol>
<li>List item 1-3-1</li>
<li>List item <em>1-3-2</em></li>
<li>List item 1-3-3</li>
</ol>
</li>
<li>List item 1-4</li>
</ol>
</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
子选择器
与后代选择器相差别：子元素选择器只能选择作为某元素的子元素。
例如： body > p
子元素：某元素下的第一层元素。
<body>
<div class="father">
<span>嗯</span>
</div>
<p>
<span>你好</span>
<span>世界！</span>
</p>
</body>
其中，div和p都是body的子元素，而span不是，因为他已经嵌套在了div和p的内部。
相邻兄弟选择器
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器
注意：他们要用相同的父元素哟~，且是紧跟着前一个元素。
h1 + p {margin-top:50px;}
伪类
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
可以与类选择器配合使用：
a.red : visited {color: #FF0000}
选择元素的第一个子元素:
p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}
所有伪类
| 属性 | 描述 | CSS |
|---|---|---|
| :active | 向被激活的元素添加样式。 | 1 |
| :focus | 向拥有键盘输入焦点的元素添加样式。 | 2 |
| :hover | 当鼠标悬浮在元素上方时，向元素添加样式。 | 1 |
| :link | 向未被访问的链接添加样式。 | 1 |
| :visited | 向已被访问的链接添加样式。 | 1 |
| :first-child | 向元素的第一个子元素添加样式。 | 2 |
| :lang | 向带有指定 lang 属性的元素添加样式。 | 2 |
伪元素
| 属性 | 描述 | CSS |
|---|---|---|
| :first-letter | 向文本的第一个字母添加特殊样式。 | 1 |
| :first-line | 向文本的首行添加特殊样式。 | 1 |
| :before | 在元素之前添加内容。 | 2 |
| :after | 在元素之后添加内容。 | 2 |
before和after比较常用
h1:after
{
content:url(logo.gif);
}
网友评论