Selector 'not' does not work

Question

I have a gray box with a low opacity and inside it a word, when applying the 'not' selector to the main 'div' to cancel the opacity of the word that is in a "p" tag surrounded by that 'div' the 'not' selector does not do its function and the word continues with the low opacity, I intend to make the word does not take the opacity settings of the main div, without removing the tag "p" from inside it, ??

body{background-color:#6C9;}
.bl:not(p){ position: relative; 
z-index:-1; 
width:300px; 
opacity:0.5; 
height:200px; 
background-color:#CCC;
border:1px solid #000;
}
p{font-size:25px; 
font-weight:bold; 
opacity:1;
}

<div class="bl">
   <p>BLOCO</p>
</div>

Answer 1

Man what happens is when you put opacity on div everything that is inside it also inherits this opacity and there is no way to take, even as the selector :not() or using !important.

Using techniques to prevent this is creating a pseudo-elemento in that div that will take the elements inside, and put the opacity only in the pseudo-element

See in the example below how your code looks with a ::after

body{
    background-color:#6C9;
}
.bl { 
    position: relative; 
    width:300px; 
    height:200px; 
    border:1px solid #000;
}
.bl::after { 
    content: "";
    position: absolute; 
    top: 0;
    left: 0;
    z-index:-1; 
    width:100%; 
    opacity:0.5; 
    height:100%; 
    background-color:#CCC;
}
p {
    font-size:25px; 
    font-weight:bold; 
}
    

<div class="bl">
   <p>BLOCO</p>
</div>