HTML5中CSS3的结构伪类选择器

CSS3结构伪类选择器:
1、E:nth-child(n)实现奇偶:
(li:nth-child(2n){color:#f00;} /* 偶数 */
li:nth-child(2n+1){color:#000;} /* 奇数 */

2、E:nth-last-child(n) { sRules }
(匹配父元素的倒数第n个子元素E,假设该子元素不是E,则选择符无效。)
3*、E:nth-of-type(n) { sRules }
(匹配同类型中的第n个同级兄弟元素E。 )
4、E:first-child { sRules }
(匹配父元素的第一个子元素E。 )
5、E:last-child { sRules }

(匹配父元素的最后一个子元素E。 )


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        li:nth-child(2n-1){
            color: red;
        }
        li:nth-last-child(2){/*反向,倒数第二条*/
            color: yellow;
        }
        p:nth-of-type(2){
            color: red;
        }
    style>
    <title>结构伪类选择器title>
head>
<body>
<ul>
    <li>列表项1li>
    <li>列表项2li>
    <li>列表项3li>
    <li>列表项4li>
    <li>列表项5li>
    <li>列表项6li>
    <li>列表项7li>
    <li>列表项8li>
ul>

<div>
    <p>段落1p>
    <div>伪段落div>
    <p>段落2p>
    <p>段落3p>
    <p>段落4p>
div>
body>
html>
HTML5中CSS3的结构伪类选择器_第1张图片

你可能感兴趣的:(HTML5+CSS)