CSS知识总结（二）

CSS的选择符分成：

　　1. 通配选择符

　　2. 元素选择符

　　3. 群组选择符

　　4. 关系选择符

　　5. id及class选择符

　　6. 伪类选择符

　　7. 属性选择符

　　8. 伪对象选择符

1.通配选择符（*）

　　* 号表示所有的对象。

　　所谓通配选择符，就是指可以使用模糊指定的方式来对象进行选择，指定样式。

　　例子源代码：

/* CSS代码 */

*{

    color:gray;

}

<!-- HTML代码 -->

<body>

    <p>这是灰色字体的p标签</p>

    <span>这是灰色字体的span标签</span>

</body>

　　效果：

这是灰色字体的p标签

这是灰色字体的span标签

2.元素选择符

　　所谓元素选择符，指以网页中已有的标签名作为名称的选择符。

　　例子源代码：

/* CSS代码 */

p{

    color:gray;

}

span{

    color:brown;

}

<!-- HTML代码 -->

<body>

    <p>这是灰色字体的p标签</p>

    <span>这是棕色字体的span标签</span>

</body>

　　效果：

这是灰色字体的p标签

这是棕色字体的span标签

3.群组选择符

　　对一组标签进行相同的样式定义；使用逗号对选择符进行分隔，对页面中需要使用相同样式的地方，只需写一次样式。

　　例子源代码：

/* CSS代码 */

p,span{

    color:brown;

}

<!-- HTML代码 -->

<body>

    <p>这是棕色字体的p标签</p>

    <span>这是棕色字体的span标签</span>

</body>

　　效果：

这是棕色字体的p标签

这是棕色字体的span标签

4.关系选择符

　　a.包含选择符（E F）

　　　选择所有被E元素包含的F元素。

　　例子源代码：

/* CSS代码 */

ul li a{

    color:red;

}

<!-- HTML代码 -->

<body>

    <ul>

        <li>

            <a href="">菜单项</a>

            <ul>

                <li><a href="">列表项1</a></li>

                <li><a href="">列表项2</a></li>

                <li><a href="">列表项3</a></li>

            </ul>

        </li>

    </ul>

</body>

　　此例，使用ul li a，那么所有a标签都会变红色。

　　效果：

菜单项

　　b.子选择符（E > F）

　　　选择所有作为E元素的子元素F。

　　例子源代码：

/* CSS代码 */

.nav > li > a{

    color:red;

}

<!-- HTML代码 -->

<body>

    <ul class="nav">

        <li>

            <a href="">菜单项</a>

            <ul>

                <li><a href="">列表项1</a></li>

                <li><a href="">列表项2</a></li>

                <li><a href="">列表项3</a></li>

            </ul>

        </li>

    </ul>

</body>

　　此例，使用.nav>li>a，那么只有.nav的li下面的a标签才会变红色。

　　效果：

菜单项

　　c.相邻选择符（E + F）

　　　选择紧贴在E元素之后的F元素。

　　例子源代码：

/* CSS代码 */

p+p{color:red;}

<!-- HTML代码 -->

<body>

    <h3>这是一个标题</h3>

    <p>这是第1个p标签</p>

    <p>这是第2个p标签</p>

    <h3>这是一个标题</h3>

    <p>这是第3个p标签</p>

    <p>这是第4个p标签</p>

</body>

　　此例，使用p+p{color:red;}，选择紧贴在p标签后的p标签，那么第2个p标签和第4个p标签将会变成红色。

　　效果：

　　这是一个标题

　　这是第1个p标签

　　这是第2个p标签

　　这是一个标题

　　这是第3个p标签

　　这是第4个p标签

　　d.兄弟选择符（E ~ F）

　　　选择E元素的所有兄弟元素F。

　　例子源代码：

/* CSS代码 */

p~p{color:red;}

<!-- HTML代码 -->

<body>

    <h3>这是一个标题</h3>

    <p>这是第1个p标签</p>

    <p>这是第2个p标签</p>

    <h3>这是一个标题</h3>

    <p>这是第3个p标签</p>

    <p>这是第4个p标签</p>

</body>

　　此例，使用p~p{color:red;}，选择p标签的其它所有p标签，那么第2个p标签、第3个p标签和第4个p标签将会变成红色。

　　效果：

　　这是一个标题

　　这是第1个p标签

　　这是第2个p标签

　　这是一个标题

　　这是第3个p标签

　　这是第4个p标签

5.id及class选择符

　　id及class均是css提供由用户自定义标签名称的选择符，用户可以使用选择符id及class来面对页面中的xhtml标签进行自定义名称，从而达到扩展xhtml标签及组合HTML标签的目的。

　　a.id选择符（E#id）

　　　id选择符可以为标有特定id的HTML元素指定特定的样式。

　　　id选择器以“#”来定义。

　　　*在网页中，一个id名称只能使用一次，不得重复。

　　例子源代码：

/* CSS代码 */

#content{

    color:gray;

}

<!-- HTML代码 -->

<body>

    <p id="content">正文内容</p>

</body>

　　效果：

　　正文内容

　　b.class选择符（E.class）

　　　不同于id选择符的唯一性，class选择符可以同时定义多个。

　　例子源代码：

/* CSS代码 */

.a{

    color:gray;

}

.b{

    font-weight:bold;

}

<!-- HTML代码 -->

<body>

    <p class="a b">正文内容</p>

</body>

　　效果：

　　正文内容

6.伪类选择符

　　伪类选择符种类特别多，这里并未列出所有的伪类选择符，但都支持现代浏览器（除了IE6-8）

　　这里，我举例几个常用的伪类选择符：

　　例子1　　源代码：

/* CSS代码 */

a{

    text-decoration:none;   /*改变a链接的样式*/

}

a:link{

    color:black;    /*设置超链接a在未被访问前的样式*/

}

a:visited{

    color:gray;     /*设置超链接a在其链接地址已被访问过时的样式*/

}

a:hover{

    color:blue;     /*设置元素在其鼠标悬停时的样式*/

}

a:active{

    color:red;      /*设置元素在被用户激活时的样式*/

}

<!-- HTML代码 -->

<body>

    <p><a href="###">点击我吧</a></p>

</body>

　　效果：

　　点击我吧

　　例子2　　源代码：

/* CSS代码 */

.ul1 li:first-child{color:red;}     /*第一个*/

.ul1 li:last-child{color:blue;}     /*最后一个*/

.ul1 li:nth-child(2){color:green;}     /*第二个*/

.ul1 li:nth-last-child(2){color:yellow;}    /*倒数第二个*/

<!-- HTML代码 -->

<body>

    <ul class="ul1">

        <li>这是列表的第1行</li>

        <li>这是列表的第2行</li>

        <li>这是列表的第3行</li>

        <li>这是列表的第4行</li>

        <li>这是列表的第5行</li>

        <li>这是列表的第6行</li>

     </ul>

</body>

　　效果：

这是列表的第1行
这是列表的第2行
这是列表的第3行
这是列表的第4行
这是列表的第5行
这是列表的第6行

　　例子3 （乘法因子n）　　源代码：

/* CSS代码 */

/*乘法因子 奇数*/

.ul2 li:nth-child(odd){

    color:red;

}

.ul2 li:nth-child(2n+1){

    border-left:3px solid red;

}

/*乘法因子 偶数*/

.ul2 li:nth-child(even){

    color:blue;

}

.ul2 li:nth-child(2n){

    border-left:3px solid blue;

}

/*乘法因子 3的倍数*/

.ul2 li:nth-child(3n){

    font-weight:bold;

}

<!-- HTML代码 -->

<body>

    <ul class="ul2">

        <li>这是列表的第1行</li>

        <li>这是列表的第2行</li>

        <li>这是列表的第3行</li>

        <li>这是列表的第4行</li>

        <li>这是列表的第5行</li>

        <li>这是列表的第6行</li>

     </ul>

</body>

　　效果：

这是列表的第1行
这是列表的第2行
这是列表的第3行
这是列表的第4行
这是列表的第5行
这是列表的第6行

7.属性选择符

　　a. E[att]

　　　选择具有att属性的E元素。

　　例子源代码：

/* CSS代码 */

p[class] {

    color:red;

}

<!-- HTML代码 -->

<body>

    <p class="aaa">这是第一个p标签</p>

    <p>这是第二个p标签</p>

</body>

　　效果：

这是第一个p标签

这是第二个p标签

　　b. E[att="val"]

　　　选择具有att属性且属性值等于val的E元素。

　　例子源代码：

/* CSS代码 */

p[class="content"] {

    color:red;

}

<!-- HTML代码 -->

<body>

    <p class="title">这是第一个p标签</p>

    <p class="content">这是第二个p标签</p>

</body>

　　效果：

这是第一个p标签

这是第二个p标签

　　c. E[att~="val"]

　　　选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。

　　例子源代码：

/* CSS代码 */

p[class~="content"] {

    color:red;

}

<!-- HTML代码 -->

<body>

    <p class="content abc">这是第一个p标签</p>

    <p class="cba content">这是第二个p标签</p>

</body>

　　效果：

这是第一个p标签

这是第二个p标签

　　d. E[att^="val"]

　　　选择具有att属性且属性值为以val开头的字符串的E元素。

　　例子源代码：

/* CSS代码 */

p[class^="a"] {

    color:red;

}

<!-- HTML代码 -->

<body>

    <p class="aaa">这是第一个p标签</p>

    <p class="bbb">这是第二个p标签</p>

    <p class="abc">这是第三个p标签</p>

</body>

　　效果：

这是第一个p标签

这是第二个p标签

这是第三个p标签

　　e. E[att$="val"]

　　　选择具有att属性且属性值为以val结尾的字符串的E元素。

　　例子源代码：

/* CSS代码 */

p[class$="a"] {

    color:red;

}

<!-- HTML代码 -->

<body>

    <p class="aaa">这是第一个p标签</p>

    <p class="abc">这是第二个p标签</p>

    <p class="cba">这是第三个p标签</p>

</body>

　　效果：

这是第一个p标签

这是第二个p标签

这是第三个p标签

　　f. E[att*="val"]

　　　选择具有att属性且属性值为包含val的字符串的E元素。

　　例子源代码：

/* CSS代码 */

p[class*="a"] {

    color:red;

}

<!-- HTML代码 -->

<body>

    <p class="abc">这是第一个p标签</p>

    <p class="a-b-c">这是第二个p标签</p>

    <p class="c_b_a">这是第三个p标签</p>

</body>

　　效果：

这是第一个p标签

这是第二个p标签

这是第三个p标签

　　g. E[att|="val"]

　　　选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。

　　例子源代码：

/* CSS代码 */

p[class|="a"] {

    color:red;

}

<!-- HTML代码 -->

<body>

    <p class="abc">这是第一个p标签</p>

    <p class="a-b-c">这是第二个p标签</p>

    <p class="c-b-a">这是第三个p标签</p>

</body>

　　效果：

这是第一个p标签

这是第二个p标签

这是第三个p标签

8.伪对象选择符

　　*CSS3将伪对象选择符前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符，但以前的写法仍然有效。

　　*伪对象选择符与包含规则的花括号之间不能紧挨着，需留有空格或换行。

　　a. E:first-letter/E::first-letter

　　　设置对象内的第一个字符的样式。

　　例子源代码：

/* CSS代码 */

p:first-letter {

    font-size:30px;font-weight:bold;

}

p::first-letter {

    font-size:30px;font-weight:bold;

}

<!-- HTML代码 -->

<body>

    <p>早起的鸟儿有虫吃</p>

</body>

　　效果：

早起的鸟儿有虫吃

　　b. E:first-line/E::first-line

　　　设置对象内的第一行的样式。

　　例子源代码：

/* CSS代码 */

p:first-line {

    color:gray;

}

p::first-line {

    color:gray;

}

<!-- HTML代码 -->

<body>

    <p>早起的鸟儿有虫吃：其它鸟儿还在窝里睡觉，那些勤劳的鸟儿早早勤劳，很快就抓到虫子吃了，就是辛勤劳动的人可以得到好的回报。 早起的虫儿被鸟吃：其它虫儿还在窝里睡觉，而那些不安分的虫儿、因为早早起来活动被鸟发现了，最后成了鸟儿的腹中餐，否定了勤奋，问题不在于早起，而是该谁做什么就做什么，不该谁做什么就不要去做。</p>

</body>

　　效果：

早起的鸟儿有虫吃：其它鸟儿还在窝里睡觉，那些勤劳的鸟儿早早勤劳，很快就抓到虫子吃了，就是辛勤劳动的人可以得到好的回报。早起的虫儿被鸟吃：其它虫儿还在窝里睡觉，而那些不安分的虫儿、因为早早起来活动被鸟发现了，最后成了鸟儿的腹中餐，否定了勤奋，问题不在于早起，而是该谁做什么就做什么，不该谁做什么就不要去做。

　　c. E:before/E::before

　　　设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用。

　　例子源代码：

/* CSS代码 */

p:before {

    content:"广州是个好地方，";color:gray;

}

p::before {

    content:"广州是个好地方，";color:gray;

}

<!-- HTML代码 -->

<body>

    <p>高楼大厦，四通八达。</p>

</body>

　　效果：

高楼大厦，四通八达。

　　d. E:after/E::after

　　　设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用。

　　例子源代码：

/* CSS代码 */

p:after {

    content:"高楼大厦，四通八达。";color:gray;

}

p::after {

    content:"高楼大厦，四通八达。";color:gray;

}

<!-- HTML代码 -->

<body>

    <p>广州是个好地方，</p>

</body>

　　效果：

广州是个好地方，

　　e. E::placeholder

　　设置对象文字占位符的样式。

　　*::placeholder 伪元素用于控制表单输入框占位符的外观。

　　*需要注意的是，除了Firefox是 ::[prefix]placeholder，其他浏览器都是使用 ::[prefix]input-placeholder。

　　例子源代码：

/* CSS代码 */

input::-webkit-input-placeholder {      /*Chrome4.0+*/

    color: green;

}

input:-ms-input-placeholder {       /*IE10+*/

    color: green;

}

input:-moz-placeholder {        /*Firefox4-18*/

    color: green;

}

input::-moz-placeholder {       /*Firefox19+*/

    color: green;

}

<!-- HTML代码 -->

<body>

    <input type="text"  placeholder="请输入..."/>

</body>

　　效果：

　　f. E::selection

　　　设置对象被选择时的颜色。

　　*需要注意的是，::selection只能定义被选择时的background-color，color及text-shadow (IE11尚不支持定义该属性)。

　　例子源代码：

/* CSS代码 */

p::-moz-selection{

    background:#000;color:#f00;

}

p::selection{

    background:#000;color:#f00;

}

<!-- HTML代码 -->

<body>

    <h3>选中下面的文字，看看它的颜色</h3>

    <p>你选中这段文字后，看看它们的文本颜色和背景色，就能明白::selection的作用。</p>

</body>

　　效果：

选中下面的文字，看看它的颜色

你选中这段文字后，看看它们的文本颜色和背景色，就能明白::selection的作用。