CSS3擬似要素セレクタとセレクタに擬似クラスのコンフィギュレーションを使用する方法

構造疑似クラスセレクタの紹介

構造は擬似クラスハンドルにいくつかの特殊効果を選択するために使用されます。
構造プロパティ擬似クラスセレクタ説明表

プロパティ	説明
E：最初の子	E要素は、最初の子要素にマッチします。
E：最後の子	Eは、最後の子要素に一致します。
E：n番目の子（N）	要素Eのn番目の要素をマッチング。
E：n番目の子（2N）或者E：n番目の子（さえ）	Eの試合要素でもサブ要素。
E：n番目の子（2N + 1）或者E：n番目の子（奇数）	素子Eの奇数のサブ要素に一致
E：のみ、子	素子Eの唯一の子要素をマッチング

第一子の練習

使用するfirst-childプロパティulでラベルのをliラベルテキストの色は赤です。
ブロック

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>结构伪类选择器</title>
  <style>  
    ul li:first-child{
      color: red;
    }
  </style>
</head>

<body>
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
     <li>6</li>
   </ul>
</body>

</html>

結果の図

最後の子の練習

使用last-childするプロパティをulして最後のラベルliラベルテキストの色は赤です。
ブロック

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>结构伪类选择器</title>
  <style>  
    ul li:last-child{
      color: red;
    }
  </style>
</head>

<body>
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
     <li>6</li>
   </ul>
</body>

</html>

結果の図

n番目の子の練習

使用するnth-child(n)プロパティul第三にタグをliラベルテキストの色は赤です。
ブロック

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>结构伪类选择器</title>
  <style>  
    ul li:nth-child(3){
      color: red;
    }
  </style>
</head>

<body>
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
     <li>6</li>
   </ul>
</body>

</html>

結果の図

使用nth-child(even)プロパティulにもタグliラベルテキストの色は赤です
ブロック

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>结构伪类选择器</title>
  <style>  
    ul li:nth-child(even){
      color: red;
    }
  </style>
</head>

<body>
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
     <li>6</li>
   </ul>
</body>

</html>

結果の図

使用nth-child(2n+1)プロパティul奇数タグliラベルテキストの色は赤です
ブロック

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>结构伪类选择器</title>
  <style>  
    ul li:nth-child(2n+1){
      color: red;
    }
  </style>
</head>

<body>
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
     <li>6</li>
   </ul>
</body>

</html>

結果の図

唯一の子の練習

使用してonly-childプロパティをulで唯一のラベルというliラベルのテキストの色は赤です。
ブロック

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>结构伪类选择器</title>
  <style>  
    ul li:only-child{
      color: red;
    }
  </style>
</head>

<body>
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
     <li>6</li>
   </ul>
   <ul>
     <li>就我一个li标签</li>
   </ul>
</body>

</html>

結果の図

導入擬似要素セレクタ

擬似要素の主な役割は、テキストと追加コンテンツの操作要素です。
手順擬似要素テーブル

プロパティ	説明
E：最初の文字	E要素は最初の単語を提供します。
E：最初の行	最初のワード線E要素。
E ::前	E要素の先頭にコンテンツを追加します。
E ::後	Eは、最終的な表面要素にコンテンツを追加します。

first-letter实践

使用first-letter属性设置ul标签中li标签的文本第一个字颜色为红色。
代码块

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>伪元素选择器</title>
  <style>  
    ul li:first-letter{
      color: red;
    }
  </style>
</head>

<body>
   <ul>
     <li>微笑是最初的信仰</li>
   </ul>
</body>

</html>

结果图

first-line实践

使用first-line属性设置div标签的文本第一行字颜色为红色。
代码块

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>伪元素选择器</title>
  <style>  
    div:first-line{
      color: red;
    }
  </style>
</head>

<body>
   <div>
     微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，
     微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰。
   </div>
</body>
</html>

结果图

before实践

使用before属性设置div标签的文本前面添加“加油”2个字。
代码块

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>伪元素选择器</title>
  <style>  
    div::before{
      content:"加油";
    }
  </style>
</head>

<body>
   <div>微笑是最初的信仰。</div>
</body>

</html>

结果图

注意：添加的文本必须写在content:"加油";里面。

after实践

使用after属性设置div标签的文本最后面添加“加油”2个字。
代码块

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>伪元素选择器</title>
  <style>  
    div::after{
      content:"加油";
    }
  </style>
</head>

<body>
   <div>微笑是最初的信仰，</div>
</body>

</html>

结果图

注意：添加的文本必须写在content:"加油";里面。

CSS3擬似要素セレクタとセレクタに擬似クラスのコンフィギュレーションを使用する方法

構造疑似クラスセレクタの紹介

第一子の練習

最後の子の練習

n番目の子の練習

唯一の子の練習

導入擬似要素セレクタ

first-letter实践

first-line实践

before实践

after实践

おすすめ