Install Android Studio on MacBook

2023-01-24  

In CSS3, there are two new selectors that can choose the corresponding sub -element under the parent element. One is:nth-childanother is:nth-of-type. But what is the difference between them?

In fact, the difference is very simple::nth-of-typeWhy is it called:nth-of-type? Because it is “type“to distinguish. That is:eLE: nth-of-type (n) refers
and ELE: NTH-Child (N) refers to the n n element under the parent element and this element is ELE. If not, choose a failure.

Text sounds more obscure and easy to understand. Here is an example of attached: here:

<style>
  .demo li:nth-child(2) {
     
    color: red;
  }

  .demo li:nth-of-type(2) {
     
    color: blue;
  }
</style>
<body>
<div>
  <ul class="demo">
    <p>zero</p>
    <li>one</li>
    <li>two</li>
  </ul>
</div>

The result is as follows:
在这里插入图片描述
The above example, .Demo Li: NTH-Child (2) Choose<li>one</li>nodes, and .demo li: nth-of-type (2) chose to choose<li>two</li>node.

.Demo li: nth-child (2) Selection process analysis:
: nth-child (2)Select numbersPreferred, it found the father class first.demo, and then look for the second child element of the parent class.demo,First determine whether this sub -element is li, if it is selected, the non -choice fails.

.demo li: NTH-OF-TYPE (2) Selection process analysis:
: NTH-OF-TYPE (2)Selection typePreferred, it found the father class first.demo, then from.demoSelectionlielementNo. 2

But if the label is not specified before NTH-Child and NTH-OF-Type?

<style>
  .demo :nth-child(2) {
     
    color: #ff0000;
  }

  .demo :nth-of-type(2) {
     
    color: #00ff00;
  }
</style>
<body>
	<ul class="demo">
	  <p>first p</p>
	  <li>first li</li>
	  <li>second li</li>
	  <p>second p</p>
	</ul>
</body>

As far as it can be seen, they do not specify the type of label before they,:nth-child(2)Selected stillSecond element, no matter what it is label. and: NTH-Type-OF (2) Select two elements, the second P label and the second li tag in the parent -level.Demo, which can be seen,When the label type is not specified,: NTH-Type-OF (2) Select the second type of all types of tags.

We have learned about the basic use and differences between NTH-Child and NTH-OF-TYPE, so further NTH-OF-Type (n) and nth-child (n)

What isnWhat is it?

NTH-OF-TYPE (n) and nth-child (n) N can be

numbers, keywords or formulas.
number: That is, the use of the above example will not be repeated.
Keywords:Odd 、even
ODD and EVEN can be used to match the bidding,#or#

The keywords of the sub -element of
Note: The first sub -bidding of the first child element is 1
Here, we specify two different background colors for strange numbers and even P elements:

<style>
<style> 
 // ODD Strange Number 
   P: NTH-OF-TYPE (ODD) {
     
    background: red;
  }
// Even even 
   P: NTH-OF-TYPE (EVEN) {
     
    background: blue;
  }
</style>
<body>
<div>
<ul class="demo">
  <p>first p</p>
  <p>second p</p>
  <p>first p</p>
  <p>second p</p>
  <p>first p</p>
  <p>second p</p>
  <p>first p</p>
  <p>second p</p>
</ul>
</div>
</body>
</style>

在这里插入图片描述
Formula: or an arithmetic expression

Use formula (an + b). Description: The length of the cycle, n is a counter (starting from 0), b is the offset value. Here, we specify the background color of all P elements of 3 multiple of the bidding:

<style>
  p:nth-of-type(3n+0) {
     
    background: #ff0000;
  }
</style>

If: NTH-OF-TYPE (4N+2) is to select all elements of the bid with 4 plus 2

source

Related Posts

Keras starts from scratch to train a model that reaches 89%on CIFAR10

Center 7 Create LNMP to build wordpress

[DCMTK] Excessive information of the console

linux often uses GDB shortcuts to complete

Install Android Studio on MacBook

Random Posts

MAC Get the system version and model

Charles debug & mock data skills

python high -level function – sorted

001-linux-IOCTL control of character device control — serial port send stonexinh

Common network testing tool