CSS & JS| por que o [style="display:block"] não funciona?

Qual o motivo do [style="display:block"] não funcionar sendo que o [style="display:none"] funciona normalmente?

eu consegui uma seleção parecida do [style="display:block"] usando [style*=block]

O código em que eu queria usar o seletor era parecido com esse

eu deixei de usar alguns elementos por eles ficarem subentedidos como a tag <script>

html

<div id=slide>
  <div class=page 
  style="display:block"><!--para pegar pelo seletor q não funcionou-->
  
  </div>
  <div class=page style="display:none">
  
  </div>
  
  <button id=next>Próximo</button>
</div>

js

let slide = document.getElementById('slide')
let next = slide.querySelector('#next')

next.addEventListener('click', () => {
  let data = slide.querySelector('[style="display:block"]')
  //send(data)
})

//import {Slide} from 'slide.js'
let sl = new Slide()
sl.init()

module js
o código tem elementos q não servem pra nada pois estou mudando ela

export class Slide
{
  constructor(itens, display = 'block')
  {
    this.slide = document.getElementById('slide');
    this.itens = this.slide.getElementsByClassName('page');
    this.counter = 0;
  }
  init()
  {
    let pn = this.slide.querySelector('[id=next]')
    if(pn != undefined){
      next.addEventListener('click', ()=>{
        this.next();
      });
    }
    pn = this.slide.querySelector('[id=previous]')
    if(pn != undefined){
      pn.addEventListener('click', ()=>{
        this.previous();
      });
    }
  next()
  {
    if(this.hasNextDecorator){
      this.nextDecorator(this.itens, this.counter); 
    }

    if(this.counter < this.itens.length-1){
      let elem = this.itens.item(this.counter);
    //elem = document.getElementById(elem);
      elem.style.display = 'none';
      this.counter += 1;
      elem = this.itens.item(this.counter);
      //elem = document.getElementById(elem);
      elem.style.display = 'block';
    }
  }
 ........
}