Css3: last-of-type has no effect on the use of class names?

<!DOCTYPE html>
<html>
<head>
<style> 
.p:last-of-type
{
background:-sharpff0000;
}
</style>
</head>

<body class="body">

<h1></h1>

<p class="p">

<p class="p">

<p class="p">



<div>11</div>

</body>
</html>

doesn"t work on the class name .p.last-of-type, just change it to p.last-of-type, why doesn"t it work on the class name?

Css
Aug.24,2021

this selector is also related to tags. You can try
to verify that 

<p class="p">

<p class="p">

<p class="p">

<div></div>

change the last one to a non -'p 'element to get the desired result
validation 2: 

<p class="p">

<p class="p">

<p class="p">

<div class='p'></div>

found that the last p element and div are both selected
clipboard.png

.p: last-of-type means classname contains p and is the last

of a type element under the parent element. The

selector first finds the corresponding element according to .p, and then starts to find the sibling node of the same type (p) according to the tag (p) of the corresponding element. If this element is the last of the siblings, it is true, otherwise it does not hold

.

if there are many sibling nodes of an element, it is impossible to use last-of-type to find the last element of a class.

here is an example 

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <style>
  .p:last-of-type {
    background: -sharpff0000;
  }
  
  div.p:last-of-type{
    color:blue;
  }
  </style>
</head>

<body class="body">
  <h1 class="p"></h1>
  <h1 class="p">2</h1>

  <p class="p">

  <p class="p">

  <p class="p">

  

  <div>div 111</div>
  <div class="p">div 222</div>
</body>

</html>
this is two css selectors.
different css selectors are mixed together on the premise that one is a child of the other or a lower-level relationship.

: nth-of-type () matches each element of the Nth child element of a specific type of parent element. Limited to the same element tag.
n can be a number, a keyword, or a formula.
1. First find the parent class
2 of the pseudo-class caller (element), and then find the nth child element of the same element name under the parent class. If so, apply css, or do not apply

. 
-sharp 
img:nth-of-type(2n+1) { float: right; }
img:nth-of-type(2n) { float: left; }

-sharp 
.className:nth-of-type(2n+1) { float: right; }
.className:nth-of-type(2n) { float: left; }

Previous: Aliyun has previously had a successful domain name, and now wants to add a domain name, as shown in the following figure.

Next: Vue cli configuration proxytable failure

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu