How to use the pseudo-class configuration in CSS3 pseudo-element selector and the selector

Structure pseudo class selector Introduction

Structure is used to select the pseudo-class handle some special effects.
Structure Properties pseudo class selector Description Table

Attributes	description
E:first-child	E element matching the first child element.
E:last-child	E match last child element.
E:nth-child(n)	Matching element E n th element.
E:nth-child(2n)或者E:nth-child(even)	E match elements even sub-elements.
E:nth-child(2n+1)或者E:nth-child(odd)	Matching the odd sub-element of the element E.
E:only-child	Matching only a child element of the element E.

first-child practice

Using the first-childproperty ulof a label in lithe label text color is red.
Block

<!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>

Results Figure

last-child practice

Use the last-childproperty to ulthe last label in the lilabel text color is red.
Block

<!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>

Results Figure

nth-child practice

Using the nth-child(n)property ultag in the third lilabel text color is red.
Block

<!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>

Results Figure

Use nth-child(even)property uleven-tag lilabel text color is red
Block

<!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>

Results Figure

Use nth-child(2n+1)property ulodd tag lilabel text color is red
Block

<!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>

Results Figure

only-child practice

Using the only-childproperty ulthat only one label in lithe label text color is red.
Block

<!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>

Results Figure

Introduction pseudo-element selector

The main role of pseudo-elements is the operating elements of the text and add content.
Instructions pseudo-element table

Attributes	description
E:first-letter	E elements provided the first word.
E:first-line	A first word line E elements.
E::before	Add content to the top of E elements.
E::after	E add content in the final surface elements.

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:"加油";里面。

How to use the pseudo-class configuration in CSS3 pseudo-element selector and the selector

Structure pseudo class selector Introduction

first-child practice

last-child practice

nth-child practice

only-child practice

Introduction pseudo-element selector

first-letter实践

first-line实践

before实践

after实践

Guess you like