как правильно написать полный селектор css3 для запросаSelectorAll

Question

как правильно написать этот запрос выбора css3?

var elements = document.querySelectorAll("[data-datasource='ds1']:not(input[type='button']):not(input[type='submit']):not(input[type='submit']):not(input[type='hidden']):not(input[type='reset']):not(input[type='file']):not(input[type='image']):not(input[type='search'])"); 

Запрос выше выдает синтаксическую ошибку.

Я хочу выбрать все элементы, имеющие data-datasource = 'ds1', за исключением ввода типов кнопок, отправки, отправки, скрытия, сброса, файла, изображения и поиска.

Answer 1

К сожалению, CSS3's :not() selector позволяет использовать только один простой селектор за раз. Вы получаете исключение, потому что все ваши селекторы :not(input[...]) являются недопустимыми CSS3, поскольку они содержат два простых селектора: input и селектор атрибутов.

Попробуйте вместо этого:

var elements = document.querySelectorAll("[data-datasource='ds1']:not(input), input[data-datasource='ds1']:not([type='button']):not([type='submit']):not([type='hidden']):not([type='reset']):not([type='file']):not([type='image']):not([type='search'])"); 

Поскольку это все-таки очень длинная строка селектор, вот разбивка:

/* Any elements except input that have this attribute value */ 
[data-datasource='ds1']:not(input), 

/* Only inputs that have this attribute value, but not any of these types */ 
input[data-datasource='ds1']:not([type='button']):not([type='submit']):not([type='hidden']):not([type='reset']):not([type='file']):not([type='image']):not([type='search'])