首页 > 代码库 > CSS3学习系列之选择器(二)

CSS3学习系列之选择器(二)

  • first-child选择器和last-child选择器

first-child指定第一个元素。last-child指定最后一个子元素。

例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>first-child选择器与last-child选择器使用示例</title>
    <style>
       li:first-child{
           background-color: yellow;
       }
        li:last-child{
            background-color: skyblue;
        }
    </style>
</head>
<body>
<h2>列表A</h2>
<ul>
    <li>列表项目1</li>
    <li>列表项目2</li>
    <li>列表项目3</li>
    <li>列表项目4</li>
    <li>列表项目5</li>
</ul>
</body>
</html>
  •   nth-child选择器和nth-last-child选择器

指定父元素中某个指定序号的子元素来指定样式。指定方法如下所示:

nth-child(n){

  //指定样式

}

<子元素>:nth-last-child(n){

//指定样式

}

例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>nth-child选择器与nth-last-child选择器使用示例</title>
    <style>
       li:nth-child(2){
           background-color: yellow;
       }
        li:nth-last-child(2){
            background-color: skyblue;
        }
    </style>
</head>
<body>
<h2>列表A</h2>
<ul>
    <li>列表项目1</li>
    <li>列表项目2</li>
    <li>列表项目3</li>
    <li>列表项目4</li>
    <li>列表项目5</li>
</ul>
</body>
</html>
  •  对所有第奇数个子元素或第偶数个子元素使用样式

使用方法如下:

nth-child(odd){

//指定样式

}

//所有正数下来的第偶数个子元素

<子元素>:nth-child(even){

//指定样式

}

//所有倒数上去的奇数个子元素

<子元素>:nth-last-child(odd){

//指定样式

}

//所有倒数上去的第偶数个子元素

<子元素>:nth-last-child(even){

//指定样式

}

例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>nth-child选择器与nth-last-child选择器使用示例</title>
    <style>
       li:nth-child(odd){
           background-color: yellow;
       }
        li:nth-child(even){
            background-color: skyblue;
        }
    </style>
</head>
<body>
<h2>列表A</h2>
<ul>
    <li>列表项目1</li>
    <li>列表项目2</li>
    <li>列表项目3</li>
    <li>列表项目4</li>
    <li>列表项目5</li>
</ul>
</body>
</html>
  •  选择器nth-of-type和nth-last-of-type

nth-child在使用过程中会有问题,问题产生的原因是,nth-child选择器在计算子元素是第奇数个元素还是第偶数个元素的时候,是连同父元素中的所有子元素一起计算的。CSS3中使用nth-of-type选择器和nth-last-of-type选择器可以避免这类问题的发生,使用这两个选择器的时候,CSS3在计算子元素时第奇数个子元素还是偶数个子元素的时候,就只针对同类型的子元素进行计算,使用方法如下:

h2:nth-of-type(odd){

  background-color:yellow;

}

h2:nth-of-type(even){

  background-color:skyblue;

}
  • 循环使用样式
li:nth-child(4n+1){

background-color:yellow

}

li:nth-child(4n+2){

  background-color:limegreen;

}

li:nth-child(4n+3){

  background-color:red;

}

li:nth-child(4n+4){

  background-color:white;

}

这样样式会隔4循环样式。奇数个和偶数个也可以改写成下面方式:

//所有正数下来的第奇数个子元素

<子元素>:nth-child(2n+1){

//指定样式

}

//所有正数下来的第偶数个子元素

<子元素>:nth-child(2n+2){

//指定样式

}

//所有倒数上去的第奇数个子元素

<子元素>:nth-last-child(2n+1){

//指定样式

}

//所有倒数上去的第偶数个子元素

<子元素>:nth-last-child(2n+2){

//指定样式

}
  • only-child选择器

only-child选择是指定当某个元素中只有一个子元素时才使用的样式。例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>nth-child选择器与nth-last-child选择器使用示例</title>
    <style>
       li:only-child{
           background-color: yellow;
       }
    </style>
</head>
<body>
<h2>列表A</h2>
<ul>
    <li>列表项目1</li>
</ul>
</body>
</html>
  •  UI元素状态伪类选择器

UI元素状态伪类选择器的共同特征是:指定的样式只有当元素处于某种状态下时才起作用,在默认状态下不起作用。在CSS3中,共有11种UI元素状态伪类选择器,分别是E:hover、E:active、E :focus、E:enabled、E:disabled、E:read-only、E:read-write、E:checked、E:default、E:indeterminate及E::selection。

  •  选择器:E:hover、E:active和E:focus

E:hover选择器用来指定当鼠标指针移动到元素上面时元素所使用的样式。

E:active选择器用来指定元素被激活(鼠标在元素上按下还没有松开)时使用的样式。

E:focus选择器用来指定元素获得光标焦点时使用的样式,主要在文本框控件获得焦点并进行文字输入的时候使用。例子如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>E:hover选择器、E:active选择器与E:focus选择器使用示例</title>
    <style>
        input[type="text"]:hover {
            background-color: greenyellow;
        }

        input[type="text"]:focus {
            background-color: skyblue;
        }
        input[type="text"]:active{
            background-color: yellow;
        }
    </style>
</head>
<body>
<form>
    <p>姓名:<input type="text" name="name"></p>
    <p>地址:<input type="text" name="address"></p>
</form>
</body>
</html>

 

CSS3学习系列之选择器(二)