前端学习经验（8）

CSS

结构伪类选择器

type系列：

first-of-type：选择同类型的标签或选择器中第一个元素。

	父元素>标签或选择器:first-of-type{
										样式表
									}

如：

	<head>
		<style>
			.a>div:first-of-type{
	                      font-family: "楷体";
	                      font-size: 30px;
	                      color: aqua;   
             					}
            .a>.aa:first-of-type{
                          font-family: "黑体";
                          font-size: 50px;
                          color: green; 
             					}
		</style>
	</head>
	<body>
		 <div class="a">
            <h3>子元素1</h3>
            <div>子元素2</div>
            <p>子元素3</p>
            <span class="aa">子元素4</span>
            
            <h3>子元素5</h3>
            <h3  class="aa">子元素6</h3>
            <div>子元素7</div>
            <p>子元素8</p>

            <h3>子元素9</h3>
            <div>子元素10</div>
            <div  class="aa">子元素11</div>
            <p>子元素12</p>
        </div>
    </body>

first-of-type：选择同类型的标签或选择器中最后一个元素。

			父元素>标签或选择器:last-of-type{
												样式表
											}

如：

	 <head>
		<style>
			.a>div:last-of-type{
	                      font-family: "楷体";
	                      font-size: 30px;
	                      color: aqua;   
             					}
            .a>.aa:last-of-type{
                          font-family: "黑体";
                          font-size: 50px;
                          color: green; 
             					}
		</style>
	</head>
	<body>
		 <div class="a">
            <h3>子元素1</h3>
            <div>子元素2</div>
            <p>子元素3</p>
            <span class="aa">子元素4</span>
            
            <h3>子元素5</h3>
            <h3  class="aa">子元素6</h3>
            <div>子元素7</div>
            <p>子元素8</p>

            <h3>子元素9</h3>
            <div>子元素10</div>
            <div  class="aa">子元素11</div>
            <p>子元素12</p>
          </div>
    </body>

nth-of-type(n)：选择同类型的标签或选择器中第n个元素，n：可以使用数字，函数，英文等。
数字：0，1，2，3，…
公式：如 2n+1，3n+1，…
英文：odd(奇数)，even(偶数)

			父元素>标签或选择器:nth-of-type(n){
											样式表
										   }

如：

		<head>
			<style>
              	.a>li:nth-of-type(2n+1){
				                    font-family: "黑体";
				                    font-size: 30px;
				                    color:aqua;   
              							}
                .a>li:nth-of-type(1){
			                        font-family: "楷体";
			                        font-size: 50px;
			                        color: orange;   
			                 			}
                .a>li:nth-of-type(even){
			                        font-family: "宋体";
			                        font-size: 30px;
			                        color: green;   
              							}
           	</style>
     	 </head>
      <body>
          <ul class="a">
                <li>子元素1</li>
                <li>子元素2</li>
                <li>子元素3</li>
                <li>子元素4</li>
                <li>子元素5</li>
                <li>子元素6</li>
                <li>子元素7</li>
                <li>子元素8</li>
                <li>子元素9</li>
           </ul>
      </body>

nth-last-of-type(n)：选择同类型的标签或选择器中第n个元素，n：可以使用数字，函数，英文等。
数字：0，1，2，3，…
公式：如 2n+1，3n+1，…
英文：odd(奇数)，even(偶数)

				父元素>标签或选择器:nth-of-type(n){
													样式表
												 }

如：

		<head>
			<style>
              	.a>li:nth-last-of-type(2n+1){
				                    font-family: "黑体";
				                    font-size: 30px;
				                    color:aqua;   
              							}
                .a>li:nth-last-of-type(1){
			                        font-family: "楷体";
			                        font-size: 50px;
			                        color: orange;   
			                 			}
                .a>li:nth-of-type(even){
			                        font-family: "宋体";
			                        font-size: 30px;
			                        color: green;   
              							}
           	</style>
     	 </head>
      <body>
          <ul class="a">
                <li>子元素1</li>
                <li>子元素2</li>
                <li>子元素3</li>
                <li>子元素4</li>
                <li>子元素5</li>
                <li>子元素6</li>
                <li>子元素7</li>
                <li>子元素8</li>
                <li>子元素9</li>
           </ul>
      </body>

来源：CSDN

作者：黯黯°

链接：https://blog.csdn.net/weixin_44272970/article/details/103685984

标签

前端

我的前端学习经验（8）

CSS

结构伪类选择器