CSS学习总结（二）

一、id及class选择符

id和class的名称是由用户自定义的。id号可以唯一地标识html元素，为元素指定样式。id选择符以#来定义。

1、id选择符注：在网页中，每个id名只能是唯一不重复的。

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #title2{   /*#后的是id名称*/
            background-color: red;
            font-family: "微软雅黑";
        }
    </style>
</head>
<body>
    <h2 id="title1">我是标题2</h2>
    <h2 id="title2">我也是标题2</h2>
</body>

2、class选择符注：class与id不同，class可以重复使用，定义一类的元素。class选择符以.来定义。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .pp{  /*将同一个class名的元素都选中了*/
            background-color: blue;
            font-family: "微软雅黑";
        }
    </style>
</head>
<body>
    <p class="pp">这是个段落</p>
    <h3 class="pp">这是个标题</h3>
</body>
</html>

这是个段落

这是个标题

二、伪类选择符

伪类选择符比较多，如下表所示：

下面简单举几个例子说明：

（一）、E：link、E：hover、E：visited

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
       #div1 a:link{
            background-color: red;    /*设置链接a在未访问前的样式为红色背景色*/ }        
        }
       #div1 a:visited{
            background-color: blue;/*设置链接a在访问后的样式的背景色为蓝色*/
        }
       #div1 a:hover{
            text-decoration: none; /*当鼠标悬停在链接上时，链接的下划线消失*/
        }
    </style>
</head>
<body>
    <div id="div1">
        <a href="#">点击链接</a>
    </div>
</body>
</html>

点击链接

（二）、E：first-child、E：last-child

注：这里可能会存在误区。要记住E元素是子元素，而不是父元素。所以这里要设置第一个li的样式就是li:first-child,而不是ul:first-child。而且必须是排在第一的元素才会被选中。E：last-child同理可得。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
      .ul li:first-child{color:red;} /*第一个*/
      .ul li:last-child{color:blue;} /*最后一个*/
      .ul li:nth-child(2){color:yellow;}/*第二个*/
       /*倒数第二个*/
      .ul li:nth-last-child(2){color:yellow;}
    </style>
</head>
<body>
        <ul class="ul">
            <li>test1</li>
            <li>test2</li>
            <li>test3</li>
            <li>test4</li>
            <li>test5</li>
        </ul>

</body>
</html>

test1
test2
test3
test4
test5

（三）、E：nth-child(n)

<!doctype html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
　 　/*奇数*/
     .ul2 li:nth-child(odd){background-color:#ccc;} 
     .ul2 li:nth-child(2n+1){border-left:2px solid red;}
    /* 偶数 */
     .ul2 li:nth-child(even){background-color:#0F7CCF;}
     .ul2 li:nth-child(2n){border-left:2px solid black;}        
    /* 3的倍数 */
     .ul2 li:nth-child(3n){color:red;font-weight:bold;}
    </style>
</head>
<body>        
        <ul class="ul2">
             <li>哈哈</li>
             <li>呵呵</li>
             <li>嘻嘻</li>
             <li>啊啊</li>
             <li>哦哦</li>
             <li>嗯嗯</li>
        </ul>
</body>
</html>

哈哈
呵呵
嘻嘻
啊啊
哦哦
嗯嗯

（四）、E：first-of-type。

注：要与E：first-child区分开。E：first-child 要求E元素是第一个子元素，但E：first-of-type不是，该选择符总是能命中父元素的第1个为E的子元素，不论第1个子元素是否为E。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    p:first-of-type {
    color: #f00;
        }
    </style>
</head>
<body>
    <div class="test">
    <div>我是一个div元素</div>
    <p>我是一个p元素</p>
    <p>我是一个p元素</p>
</div>
</body>
</html>

（五）、E：not(s)

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="utf-8" />
        <title></title>    
        <style type="text/css">
            p:not(.abc) {   /*设置除类名为.abc的元素的其他元素颜色*/
                color: #f00;
            }
        </style>
    </head>
    <body>
        <p class="abc">pppp p</p>
        <p id="abc">ppp</p>
        <p class="abcd">ppppp</p>
        <p>pppppp</p>
    </body>
</html>