再探 css

一、伪类

1. link

普通的链接

a:link {
    color: yellowgreen;
}

2. visited

访问过的链接，只能设置颜色

a:visited {
    color: yellowgreen;
}

3. hover

鼠标移入状态

a:hover {
    color: yellowgreen;
}

4. active

鼠标点击

a:active {
    color: yellowgreen;
}

5. focus

获取焦点

input:focus {
    background-color: orange;
}

6. 文字内容选中

(1) 火狐浏览器

-moz-selection

p::-moz-selection {
    background-color: orange;
}

(2) 其他浏览器

selection

p::selection {
    background-color: orange;
}

二、伪元素

1. 首字

p:first-letter {
    color: red;
    font-size: 20px;
}

2. 首行

p:first-line {
    background-color: red;
}

3. 最前面before

p:before {
    content: "最前面";
    color: red;
}

4. 最后面after

p:after {
    content: "最后面";
    color: red;
}

4. 属性选择器

(1) 含有title属性

p[title] {
    background-color: red;
}

 (2) 含有属性值

p[title="hello"] {
    background-color: red;
}

(3) 属性值以ab开头

p[title^="ab"] {
    background-color: red;
}

(4) 属性值以ab结尾

p[title$="ab"] {
    background-color: red;
}

 (5) 属性值包含c

p[title*="c"] {
    background-color: red;
}

(6) 选中span后的紧挨着的p元素

span+p {
    background-color: red;
}

(7) 选中span后的所有的p元素

span~p {
    background-color: red;
}

(8) 否定

p：not(.hello) {
    background-color: red;
}

(9) 其他

名字	作用
first-child	选中第一个子元素
last-child	选中最后一个子元素
nth-child(num)	选中任意num位置，可以指定num，odd表示奇数，even表示偶数
first-of-type	选中第一个元素
last-of-type	选中最后一个元素
nth-of-type(num)	选中任意num位置，可以指定num，odd表示奇数，even表示偶数