css子选择器的写法
在之前的选择器中当我们遇到一个元素下有多个子元素时（针对list列表元素），我们在进行css控制时都是在每个子元素定义class，通过class来控制对应的子元素，这样做会很麻烦，子元素选择器也可以不用定义class也能控制子元素的作用。
一、常见的子元素选择器
：first-child                     父元素的首个子元素
：last-child                      父元素的最后一个子元素
：nth-child(n)                    父元素的某个子元素，数是从1开始的
：nth-last-child(n)              父元素的倒数某个子元素
nth-child（n）扩展：
(1) 控制基数子元素--：nth-child（odd）
(2) 控制偶数子元素--：nth-child（even）
(3) 控制几倍子元素--：nth-child（数字n），数字n表示数字的倍数子元素，还可以进行数字n+1/数字n-1进行运算获取到子元素
在一个div下有多个标签类型的布局中，使用以下子元素选择器可以准确定位到某种类型的标签下的某个指定元素
：first-of-type                 父元素下特定类型的首个子元素
：last-of-type                  父元素下特定类型的最后一个子元素
   
：nth-of-type(n)                父元素下特定类型的某个子元素
   
：nth-last-of-type(n)          父元素下特定类型的倒数某个子元素
：
nth-of-type（n）与：nth-last-of-type（n）也可以控制偶数、基数子元素，倍数子元素，写法与之前的nth-child相同
具体的示例
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .list ,.list2 {
            list-style: none;
        }
        .list li,.list2 li {
            width: 125px;
            height: 125px;
            background-color: #dbdbdb;
            margin: 5px;
            float: left;
            text-align: center;
            line-height: 120px;
        }
        /*选择第一个子元素*/
        .list li:first-child {  background-color: ff;  }
        /*选择最后一个元素*/
        .list li:last-child {  background-color: #8da6fa;  }
        /*选择某一个元素：第八个元素*/
        .list li:nth-child(7) {  background-color: ca;  }
        /*选择倍数子元素：2n 2的倍数子元素*/
        .list li:nth-child(2n) { background-color: #41ca11}
        /*选择倒数第五个元素*/
        .list li:nth-last-child(5) { background-color: #befffc  }
        /*选择基数元素*/
        .list2 li:nth-child(odd) {  background-color: #f42f2a;  }
        /*选择偶数元素*/
        .list2 li:nth-child(even) {  background-color: #fffd06;  }
        /*父元素下特定类型的首个子元素*/
          .block h1:first-of-type {color: red}
        /*父元素下特定类型的最后一个子元素*/
        .block h1:last-of-type {color: #03bd4f }
        /*父元素下偶数子元素*/
        .block p:nth-of-type(2)  {color: orange}
        .block p:nth-last-of-type(2)  {color: ff  }
    </style>
</head>
<body>
<ul class="list">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
    <li>g</li>
    <li>h</li>
    <li>i</li>
</ul>
<hr>
<ul class="list2">
    <li>java</li>
    <li>web</li>
    <li>python</li>
    <li>linux</li>
    <li>c/c++</li>
</ul>
<div class="block">
    <h1>我和你的倾城时光</h1>
    <p>赵丽颖</p>
    <h2>金瀚</h2>
    <h1>我和你的倾城时光</h1>
    <p>赵丽颖</p>cssclass属性

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。