css选择器（2)_css first-child-CSDN博客

文章目录

一、结构伪类first-child

1.1基本用法

语法：

选择器:first-child { /* first-child代表的是选择器下面的第一个元素 */
  property: value;
}

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      ul>li:first-child {
        color: red;
      }
    </style>
</head>

<body>
  <ul>
    <li>熊大</li>
    <li>熊二</li>
    <li>熊三</li>
  </ul>
</body>

</html>

效果：

在这里插入图片描述

:first-child CSS 伪类表示在一组兄弟元素中的第一个元素。

二、结构伪类last-child

语法：

选择器:last-child { /* last-child代表的是选择器下面的最后一个元素 */
  property: value;
}

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      ul>li:last-child {
        color: red;
      }
    </style>
</head>

<body>
  <ul>
    <li>熊大</li>
    <li>熊二</li>
    <li>熊三</li>
  </ul>
</body>

</html>

效果：

在这里插入图片描述

:last-child CSS 伪类代表一组兄弟元素中的最后元素。

三、结构伪类nth-child

语法：

选择器:ntn-child(n) { /* nth-child(n)选中第几个元素，n代表的是第几个的意思 */
  property: value;
}

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      ul>li:nth-child(2) {
        color: red;
      }
    </style>
</head>

<body>
  <ul>
    <li>熊大</li>
    <li>熊二</li>
    <li>熊三</li>
  </ul>
</body>

</html>

效果：

在这里插入图片描述

CSS :nth-child() 伪类根据元素在父元素的子元素列表中的索引来选择元素。换言之，:nth-child() 选择器根据父元素内的所有兄弟元素的位置来选择子元素。

3.1 n的倍数

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      /* 
        2 * 0 = 0
        2 * 1 = 2
        2 * 2 = 4
        2 * 3	= 6
      */
      ul>li:nth-child(2n) {
        color: red;
      }
    </style>
</head>

<body>
  <ul>
    <li>熊大</li>
    <li>熊二</li>
    <li>熊三</li>
    <li>熊四</li>
    <li>熊五</li>
  </ul>
</body>

</html>

效果：

在这里插入图片描述

3.2 偶数even

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      ul>li:nth-child(even) {
        color: red;
      }
    </style>
</head>

<body>
  <ul>
    <li>熊大</li>
    <li>熊二</li>
    <li>熊三</li>
    <li>熊四</li>
    <li>熊五</li>
  </ul>
</body>

</html>

效果：

在这里插入图片描述

3.3 奇数odd

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      ul>li:nth-child(odd) {
        color: red;
      }
    </style>
</head>

<body>
  <ul>
    <li>熊大</li>
    <li>熊二</li>
    <li>熊三</li>
    <li>熊四</li>
    <li>熊五</li>
  </ul>
</body>

</html>

效果：

在这里插入图片描述

可以使用公式表达式：nth-child(2n+1)

3.4 选中前几个

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      /*
        -0 + 2 = 2
        -1 + 2 = 1
        -2 + 2 = 0
      */
      ul>li:nth-child(-n + 2) {
        color: red;
      }
    </style>
</head>

<body>
  <ul>
    <li>熊大</li>
    <li>熊二</li>
    <li>熊三</li>
    <li>熊四</li>
    <li>熊五</li>
  </ul>
</body>

</html>

效果:

在这里插入图片描述

3.5 公式写法

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      /*
        2 * 0 + 2 = 2
        2 * 1 + 2 = 4
        2 * 2 + 2 = 6
      */
      ul>li:nth-child(2n + 2) {
        color: red;
      }
    </style>
</head>

<body>
  <ul>
    <li>熊大</li>
    <li>熊二</li>
    <li>熊三</li>
    <li>熊四</li>
    <li>熊五</li>
  </ul>
</body>

</html>

效果：

在这里插入图片描述

3.6 first-of-type

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     /* 第一个这种类型的元素 */
      /*
      1. ul
      2. ul的儿子li
      3. ul的儿子li的第一个
    */
      ul>li:first-of-type {
        color: red;
      }
    </style>
</head>

<body>
  <ul>
    <p>游客</p>
    <li>熊大</li>
    <li>熊二</li>
    <li>熊三</li>
    <li>熊四</li>
    <li>熊五</li>
  </ul>
</body>

</html>

效果：

在这里插入图片描述

3.7 last-of-type

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     
      ul>li:last-of-type {
        color: red;
      }
    </style>
</head>

<body>
  <ul>
    <p>游客</p>
    <li>熊大</li>
    <li>熊二</li>
    <li>熊三</li>
    <li>熊四</li>
    <li>熊五</li>
    <span>熊六</span>
  </ul>
</body>

</html>

效果：

在这里插入图片描述

3.8 nth-of-child

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      ul>li:nth-of-type(1) {
        color: red;
      }
    </style>
</head>

<body>
  <ul>
    <p>游客</p>
    <li>熊大</li>
    <li>熊二</li>
    <li>熊三</li>
    <li>熊四</li>
    <li>熊五</li>
    <span>熊六</span>
  </ul>
</body>

</html>

效果：

在这里插入图片描述

四、结构伪类nth-last-child

语法：

选择器:nth-last-child(n) { /* 查找选择器下面所有的节点nth-last-child从下往上，n代表第几个 */
  property: value;
}

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      ul>li:nth-last-child(3) {
        color: red;
      }
    </style>
</head>

<body>
  <ul>
    <li>熊大</li>
    <li>熊二</li>
    <li>熊三</li>
    <p>熊四</p>
  </ul>
</body>
</html>

效果：

在这里插入图片描述

五、结构伪类nth-last-of-type

语法：

选择器:nth-last-of-type(n) { /* 查找选择器下面指定类型的节点nth-last-of-type从下往上，n代表第几个 */
  property: value;
}

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      ul>li:nth-last-of-type(2) {
        color: red;
      }
    </style>
</head>

<body>
  <ul>
    <li>熊大</li>
    <li>熊二</li>
    <li>熊三</li> 
    <p>熊四</p>
  </ul>
</body>
</html>

效果：

在这里插入图片描述

六、结构伪类only-child

语法：

选择器:only-child { /* 查找选择器下面只有一个标签 */
  property: value;
}

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      /* 选中的是没有任何类型 兄弟节点的标签 */
    li:only-child {
        color: red;
    }
    </style>
</head>

<body>
  <ul>
    <li>光头强</li>
  </ul>
    <ul>
        <li>熊大</li>
        <li>熊二</li>
        <li>熊三</li>
    </ul>
</body>

</html>

效果：

在这里插入图片描述

七、结构伪类only-of-type

语法：

选择器:only-of-type { /* 查找选择器下面只有指定类型的一个标签 */
  property: value;
}

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      /* 选中只有一个li的标签 */
    li:only-of-type {
        color: red;
    }
    </style>
</head>

<body>
    <ul>
        <li>光头强</li>
    </ul>
    <ul>
        <p>游客</p>
        <li>熊大</li>
    </ul>
</body>

</html>

效果：

在这里插入图片描述

八、结构伪类root

语法：

:root { /* 根元素指的就是html标签 */
  property: value;
}

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      /* 选中html标签然后添加背景色为红色 */
    :root {
      background: red;
    }
    </style>
</head>

<body>
    <ul>
        <li>光头强</li>
    </ul>
    <ul>
        <p>游客</p>
        <li>熊大</li>
    </ul>
</body>

</html>

效果：

在这里插入图片描述

九、结构伪类empty

语法：

:empty { /* 选中里面为空的标签 */
  property: value;
}

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      /* ul中没有任何内容的标签 */
    ul:empty {
      width: 300px;
      height: 200px;
      background: red;
    }
    </style>
</head>

<body>
    <ul></ul>
    <ul>
        <p>游客</p>
        <li>熊大</li>
    </ul>
</body>

</html>

效果：

在这里插入图片描述

十、否定伪类

语法：

选择器:not(选择器) { /* 排除满足括号中条件的元素 */
  property: value;
}

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      /* 选中了ul的子标签li，但是排除了最后一个li  */
      ul>li:not(:last-child) {
        color: red;
      }
    </style>
</head>

<body>
    <ul>
        <li>熊大</li>
        <li>熊二</li>
        <li>熊三</li>
    </ul>
</body>

</html>

效果：

在这里插入图片描述

除了使用结构伪类选择器还可以使用 class、属性选择器等

class选择器：

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
     /* 排除class为three的  */
     ul>li:not(.three) {
       color: red;
     }
   </style>
</head>

<body>
   <ul>
       <li>熊大</li>
       <li>熊二</li>
       <li class="three">熊三</li>
   </ul>
</body>

</html>

在这里插入图片描述

属性选择器：

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
     /* 排除class为three的  */
     ul>li:not([title^="我是"]) {
       color: red;
     }
   </style>
</head>

<body>
   <ul>
       <li>熊大</li>
       <li>熊二</li>
       <li title="我是熊三">熊三</li>
       <li title="我是熊四">熊四</li>
   </ul>
</body>

</html>

在这里插入图片描述

十一、UI伪类

11.1 checked

语法：

选择器:checked {
  property: value;
}

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      /* input被选中时候的样式 */
      input:checked {
        width: 50px;
        height: 50px;
      }
    </style>
</head>

<body>
    <input type="checkbox" />
</body>

</html>

效果：

在这里插入图片描述

11.2 disabled

语法：

选择器:disabled {
  property: value;
}

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      /* 如果input被禁用了设置样式 */
      input:disabled {
        background: red;
      }
    </style>
</head>

<body>
    <input type="text" disabled/>
</body>

</html>

效果：

在这里插入图片描述

11.3 enabled

语法：

选择器:enabled {
  property: value;
}

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     /* 选中可用的input */
      input:enabled {
        background:green;
      }
    </style>
</head>

<body>
   
    <input type="text">
</body>

</html>

效果：

在这里插入图片描述

十二、目标伪类

语法：

选择器:target {/* target选中哪个标签 */
  property: value;
}

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 100%;
      height: 360px;
      background: gray;
    }
    div:target {
      background:red
    }
  </style>
</head>
<body>
  <a href="#one">去第一个</a>
  <a href="#two">去第二个</a>
  <a href="#three">去第三个</a>
  <a href="#four">去第四个</a>
  <div id="one">第一个</div>
  <br>
  <div id="two">第二个</div>
  <br>
  <div id="three">第三个</div>
  <br>
  <div id="four">第四个</div>
</body>
</html>

效果：

在这里插入图片描述

十三、语言伪类

语法：

选择器:lang(语言类型) {/* 根据lang指定的语言选中标签 */
  property: value;
}

代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
   :lang(zh-CN) {
    color: red;
   }
   :lang(en) {
    color: blue;
   }
  </style>
</head>
<body>
  <div>熊大</div>
  <div>熊二</div>
  <div lang="en">光头强</div>
  <div>熊三</div>
</body>
</html>

效果：

在这里插入图片描述

十四、伪元素选择器

14.1 first-letter

语法：

选择器::first-letter { /* 选中选择器中的第一个文本 */
  property: value;
}

代码：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 选中div中的第一个文本 */
   div::first-letter {
    color: red;
    font-weight: bold; /* 加粗 */
   }
  </style>
</head>
<body>
  <div>how are you!</div>
</body>
</html>

效果：

在这里插入图片描述

14.2 first-line

语法：

选择器::first-line { /* 选中选择器中的第一行文本 */
  property: value;
}

代码：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 选中div的第一行文本 */
   div::first-line {
    color: red;
    font-weight: bold;
   }
  </style>
</head>
<body>
  <div>王毅说，石破茂政府成立以来，确认将全面推进中日战略互惠关系，无意同中国“脱钩断链”，坚持福岛核污染水排海问题双边共识，愿同中方开展高层交往和各领域对话合作，中日关系实现平稳开局。</div>
</body>
</html>

效果：

在这里插入图片描述

14.3 selection

语法：

选择器::selection { /* 选中的文本 */
  property: value;
}

代码：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
   div::selection {
    color: white;
    font-weight: bold;
    background: skyblue;
   }
  </style>
</head>
<body>
  <div>王毅说，石破茂政府成立以来，确认将全面推进中日战略互惠关系，无意同中国“脱钩断链”，坚持福岛核污染水排海问题双边共识，愿同中方开展高层交往和各领域对话合作，中日关系实现平稳开局。</div>
</body>
</html>

效果：

在这里插入图片描述

14.4 placeholder

语法：

选择器::placeholder { /* 选中input的提示文本 */
  property: value;
}

代码：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
   input::placeholder {
    color: skyblue;
    font-weight: bold;
    
   }
  </style>
</head>
<body>
  <input type="text" placeholder="请输入用户名" />
</body>
</html>

效果：

在这里插入图片描述

14.5before和after

语法：

选择器::before { /* before在选中元素的内容之前 */
 content: value; /* 在选中的元素内容之前添加什么内容 */
}
选择器::after { /* after在选中元素的内容之后 */
 content: value; /* 在选中的元素内容之后添加什么内容 */
}

代码：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
   div::before {
    content:'¥';
   }
   div::after {
    content: '.00';
   }
  </style>
</head>
<body>
  <div>99</div>
  <div>99</div>
  <div>99</div>
  <div>99</div>
  <div>99</div>
</body>
</html>