I would like to have two different looks for details>summary tag in one document.

The first one should look like this:

It is done through CSS style and the code looks like this:

<style>

details>summary { list-style-type: none; outline: none; cursor:     pointer; border-bottom: 1px solid rgb(0, 0, 0, 0.3);}

details>summary::-webkit-details-marker { display: none; }

details>summary::after{ content: '+ '; text-align: Right}

details[open]>summary::after{ content: '- '; text-align: Right;}

details>summary {margin-top: 15px; margin-bottom: 20px; border-bottom: 1px solid rgb(0, 0, 0, 0.3); font-weight: bold;}

details[open]>summary { margin-bottom: 20px; border-bottom: 1px solid rgb(0, 0, 0, 0.3);}
    
details[]>summary { margin-bottom: 20px; border-bottom: 1px solid rgb(0, 0, 0, 0.3);font-weight: bold;}
</style>

The second look should be this:

With the code:

<style>
details>summary { list-style-type: none; outline: none; cursor:pointer; }

details>summary::-webkit-details-marker { display: none; }

details>summary::before{ content: '+ '; text-align: Right}

details[open]>summary::before{ content: '- '; text-align:Right;}

details>summary {margin-top: 15px; margin-bottom: 20px; font-weight: bold;}

details[open]>summary { margin-bottom: 20px;}
    
details[]>summary { margin-bottom: 20px; }
</style>

I tried to create classes for these looks however ended up with this:

Which is a basic look of the detail tag.

The code for the classes looks like this:

<style>
.mainD{
    details>summary { list-style-type: none; outline: none; cursor:     pointer; border-bottom: 1px solid rgb(0, 0, 0, 0.3);}

    details>summary::-webkit-details-marker { display: none; }

    details>summary::after{ content: '+ '; text-align: Right}

    details[open]>summary::after{ content: '- '; text-align: Right;}

    details>summary {margin-top: 15px; margin-bottom: 20px; border-bottom: 1px solid rgb(0, 0, 0, 0.3); font-weight: bold;}

    details[open]>summary { margin-bottom: 20px; border-bottom: 1px solid rgb(0, 0, 0, 0.3);}
    
    details[]>summary { margin-bottom: 20px; border-bottom: 1px solid rgb(0, 0, 0, 0.3);font-weight: bold;}
}
 
.secondaryD{
    details>summary { list-style-type: none; outline: none; cursor:pointer; }

    details>summary::-webkit-details-marker { display: none; }

    details>summary::before{ content: '+ '; text-align: Right}

    details[open]>summary::before{ content: '- '; text-align:Right;}

    details>summary {margin-top: 15px; margin-bottom: 20px; font-weight: bold;}

    details[open]>summary { margin-bottom: 20px;}
    
    details[]>summary { margin-bottom: 20px; }
}
</style>

The code for the details is here:

<details> <summary  style="margin-left:3vw; font-weight:bold; " ><h3 style="font-size: 1.05em;"><sup>1</sup>What is this ID?</h3></summary>
<p  style="margin-left:5vw">This is the content of the details tag.</p>
</details>
<details> <summary  style="margin-left:3vw; font-weight:bold; " ><h3 style="font-size: 1.05em;">1.&nbsp;What is this ID?</h3></summary>
<p  style="margin-left:5vw">This is the content of the details tag.</p>
</details>

Issue

Plain CSS doesn't support style nesting, so the above styling doesn't do anything thus the default details styling is applied.

Solution

Below is one way to achieve your goal. Simply replace the details tag selector with the appropriate class selector.

.mainDetails>summary {
  list-style-type: none;
  outline: none;
  cursor: pointer;
  border-bottom: 1px solid rgb(0, 0, 0, 0.3);
}

.mainDetails>summary::-webkit-details-marker {
  display: none;
}

.mainDetails>summary::after {
  content: '+ ';
  text-align: Right
}

.mainDetails[open]>summary::after {
  content: '- ';
  text-align: Right;
}

.mainDetails>summary {
  margin-top: 15px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgb(0, 0, 0, 0.3);
  font-weight: bold;
}

.mainDetails[open]>summary {
  margin-bottom: 20px;
  border-bottom: 1px solid rgb(0, 0, 0, 0.3);
}

.mainDetails[]>summary {
  margin-bottom: 20px;
  border-bottom: 1px solid rgb(0, 0, 0, 0.3);
  font-weight: bold;
}

.secondaryDetails>summary {
  list-style-type: none;
  outline: none;
  cursor: pointer;
}

.secondaryDetails>summary::-webkit-details-marker {
  display: none;
}

.secondaryDetails>summary::before {
  content: '+ ';
  text-align: Right
}

.secondaryDetails[open]>summary::before {
  content: '- ';
  text-align: Right;
}

.secondaryDetails>summary {
  margin-top: 15px;
  margin-bottom: 20px;
  font-weight: bold;
}

.secondaryDetails[open]>summary {
  margin-bottom: 20px;
}

.secondaryDetails[]>summary {
  margin-bottom: 20px;
}

<details class="mainDetails">
  <summary style="margin-left:3vw; font-weight:bold; ">
    <h3 style="font-size: 1.05em; display:inline"><sup>1</sup>What is this ID?</h3>
  </summary>
  <p style="margin-left:5vw">This is the content of the details tag.</p>
</details>
<details class="secondaryDetails">
  <summary style="margin-left:3vw; font-weight:bold; ">
    <h3 style="font-size: 1.05em; display:inline">1.&nbsp;What is this ID?</h3>
  </summary>
  <p style="margin-left:5vw">This is the content of the details tag.</p>
</details>