Есть ли селектор для исключения элементов display: none?

Если эти display стили объявлены встроенными, вы можете использовать следующие селекторы: div[style*="display: none;"] (если элемент имеет встроенный атрибут стиля, содержащий "display: none;", тогда применяется стиль)

Селекторы атрибутов:

CSS селектор атрибутов сопоставляет элементы на основе наличия или значения заданного атрибута.

Источник: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Атрибут содержит селектор:

При поиске элемента на основе части значения атрибута, но не точного совпадения, в квадратных скобках селектора может использоваться символ звездочки *. Звездочка должна располагаться сразу после имени атрибута, непосредственно перед знаком равенства. Это означает, что последующее значение должно появляться или содержаться только в значении атрибута.

Источник: https://learn.shayhowe.com/advanced-html-css/complex-selectors/

На самом деле есть решение CSS3 для выбора элементов, которые не имеют стиля display:none или имеют явное свойство style:

*:not([style*="display: none"]) button{ ... }

Демонстрация:

*:not([style*="display: none"]) button{
    color:yellow;
}

<p style="display:block">
  My name is A.
  <button>
a
</button>
</p>
<p style="display: none">
  <button>
b
</button>
</p>

No.

Нет селекторов, которые выбирают элементы на основе значений свойств, которые к ним применяются.

Я не думаю, что для CSS было бы целесообразно вводить такую ​​функцию. Представить:

:has-property-value(display: none) {
   display: block;
}

В CSS нет такого селектора для выбора по значениям их свойств. Вы можете попробовать что-то с jquery, используя селектор :hidden, чтобы найти кнопки с display:none. Проверьте приведенный ниже фрагмент для справки.

$( ".btnShow" ).click(function() {
  $( ".btn:hidden" ).show( "fast" );
});

.hidden{
  display:none;
}
.btnShow{
  display:block;
  margin-top: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="button 1" class="btn">
<input type="button" value="button 2" class="btn">
<input type="button" value="button 3" class="btn hidden">
<input type="button" value="button 4" class="btn">
<input type="button" value="button 5" class="btn hidden">
<input type="button" value="button 6" class="btn">
<input type="button" value="button 7" class="btn">
<input type="button" value="Show hidden buttons" class="btnShow">

Пока это невозможно с чистым CSS, если вы явно не укажете встроенный css для style="display: none".

Вы можете использовать некоторый javascript для фильтрации набора видимых buttons.

var buttons = document.querySelectorAll('.block button');

var visibleButtons = [];

buttons.forEach(function (element) {
  if (window.getComputedStyle(element.parentNode).display !== 'none') {
   visibleButtons.push(element);
  }
});

console.log(visibleButtons);

.block {
  display: block;
}

.hidden {
  display: none;
}

<div class="block">
  <button>btn 1</button>
</div>

<div class="block hidden">
  <button>btn 2</button>
</div>

<div class="block">
  <button>btn 3</button>
</div>

Вы можете проверить с помощью jquery. Код ниже означает

"Get all buttons, filtered by ones whose parent is visible on page", loop through and print html of each one.

$(document).ready(function(){
$(":button").filter(function() { return $(this).parent().is(':visible') 
       }).each(function(){
		      console.log($(this).html());
		});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="intro" style="display:block">
    My name is someone.    
   <button>    a    </button>    <button>    b    </button>    
</p>
<p>I live somewhere.</p>    <p>My best friend is someone.</p>
Who is your favourite:    
<ul id="find" style="display:none">
  <li>One</li>      <li>Two</li>      <li><button>    x    </button>    
  <button>    y    </button></li>    
</ul>