• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • 位置: css 中文手册 -> css 选择器

    css 结构性伪类选择器

    结构伪类选择器,是针对HTML层次“结构”的伪类选择器。例如我们想要某一个父元素下面的第n个子元素。

    选择器 含义
    :root 匹配文档树的根元素。应用到HTML,:root 即表示为元素,除了优先级更高外,相当于html标签选择器。
    E:not() 排除结构元素E下的某子结构元素。
    E:empty 空元素是指没有任何内容的元素,甚至空格都不行。代表没有子元素的元素。
    E:target 对页面中某个target元素指定样式。该样式只在用户点击该链接并且跳转到target元素后生效


    选择器 含义
    E:nth-child(n) 选择所有在其父元素中第n个位置的匹配E的子元素。
    注意,参数n可以是数字(1、2、3)、关键字(odd、even)、公式(2n、2n+3)
    参数的索引从1开始。tr:nth-child(3)匹配所有表格中第3排的tr;
    tr:nth-child(2n+1)匹配所有表格的奇数行;tr:nth-child(2n)匹配所有表格的偶数行;
    tr:nth-child(odd)匹配所有表格的奇数行;tr:nth-child(even)匹配所有表格的偶数行;
    E:nth-last-child(n) 选择所有在其父元素中倒数第n个位置的匹配E的子元素
    E:nth-of-type(n) 选择父元素中第n个位置,且匹配E的子元素。
    所有匹配E的子元素被分离出来单独排序。非E的子元素不参与排序。
    参数n可以是数字,关键字、公式。例:p:nth-of-type(1)
    E:nth-last-of-type(n) 选择父元素中倒数第n个位置,且匹配E的子元素。
    E:last-child 选择位于其父元素中最后一个位置,且匹配E的子元素。
    E:first-of-type 选择位于其父元素中且匹配E的第一个同类型的子元素。
    E:last-of-type 选择位于其父元素中且匹配E的最后第一个同类型的子元素。
    E:only-child 选择其父元素只包含一个子元素,且该子元素匹配E。
    E:only-of-type 选择其父元素只包含一个同类型的子元素,且该子元素匹配E。


    :not

    选择除某个元素之外的所有元素。

    CSS:

    :root {
        --border: 1px solid #666;
        --green: lightgreen;
        --coral: lightcoral;
        --blue: blue;
        --yellow: yellow;
    }
    
    
    div {
        float: left;
        margin-left: 10px;
        width: 100px;
        height: 50px;
        border: var(--border);
        background-color: var(--green);
    }
    
    div:not(.item) {
        background-color: var(--coral);
    }
    


    HTML:

    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="diff"></div>
    <div class="item"></div>
    


    :empty

    选择没有任何内容的元素(有空格也不行)。

    CSS:

    div:empty{
    	background-color: var(--coral);
    }
    

    HTML:

    <div>    
    </div>
    <div>1231</div>
    <div>abc/div>
    <div>*()_</div>
    <div>...</div>
    <div></div>
    


    :target

    表示一个唯一的元素(目标元素),其ID与URL的片段匹配

    CSS:

    #first:target{
    	background-color: var(--coral);
    }
    #second:target{
    	background-color: var(--blue);
    }
    #third:target{
    	background-color: var(--yellow);
    }
    

    HTML:

    <a href="#first">first</a>
    <a href="#second">second</a>
    <a href="#third">third</a>
    <div id="first"></div>
    <div id="second"></div>
    <div id="third"></div>
    


    九个CSS3结构性伪类选择器。

    /*结构选择器:获去当前元素的第一个子元素*/
    li:first-child {
    	background-position: 2px 10px;
    	font-weight: bold;
    	font-style: initial;
    	font-size: 12px;
    }
    
    /*结构选择器:获去当前元素的最后一个子元素*/
    li:last-child {
    	background-position: 2px 10px;
    	font-weight: bolder;
    	font-style: normal;
    	font-size: 14px;
    }
    
    /*结构选择器:选择某个元素的一个或者多个特定的子元素*/
    li:nth-child(3) {
    	background-position: 2px 10px;
    	font-weight: bolder;
    	font-style: normal;
    	font-size: 18px;
    }
    
    /*结构选择器:选择某个元素的一个或者多个特定的子元素;从这个元素的最后一个子元素开始获取*/
    li:nth-last-child(2) {
    	background-position: 2px 10px;
    	font-weight: bolder;
    	font-style: normal;
    	font-size: 20px;
    }
    
    /*结构选择器:选择特定的元素*/
    li:nth-of-type(2) {
    	background-position: 2px 10px;
    	font-weight: bolder;
    	font-style: normal;
    	font-size: 20px;
    }
    
    /*结构选择器:选择特定的元素;从这个元素的最后一个元素开始获取*/
    li:nth-last-of-type(2) {
    	background-position: 2px 10px;
    	font-weight: bolder;
    	font-style: normal;
    	font-size: 20px;
    }
    
    /*结构选择器:选择一个上级元素下的第一个同类子元素*/
    li:first-of-type {
    	background-position: 2px 10px;
    	font-weight: bolder;
    	font-style: normal;
    	font-size: 20px;
    }
    
    /*结构选择器:选择一个上级元素下的最后一个同类子元素*/
    li:last-of-type {
    	background-position: 2px 10px;
    	font-weight: bolder;
    	font-style: normal;
    	font-size: 20px;
    }
    
    /*结构选择器:选择的元素是他父元素的唯一一个元素*/
    li:only-child {
    	background-position: 2px 10px;
    	font-weight: bolder;
    	font-style: normal;
    	font-size: 20px;
    }
    
    /*结构选择器:选择的元素是他上级元素的唯一一个相同类型的子元素*/
    li:only-of-type {
    	background-position: 2px 10px;
    	font-weight: bolder;
    	font-style: normal;
    	font-size: 20px;
    }
    
    /*结构选择器:现在的元素里面没有任何的内容*/
    li:empty {
    	background-position: 2px 10px;
    	font-weight: bolder;
    	font-style: normal;
    	font-size: 20px;
    }