Why an expression with operator AND doesn't work in css selector-CodePudding

I wrote two css selector expression that look pretty similar with only one change. I can't understand why the second one doesn't work:

a>div[id='nav-cart-count-container']>span[id='nav-cart-count'].nav-cart-count

a>div[id='nav-cart-count-container']>span[id='nav-cart-count'][class='nav-cart-count']

I understand that one is enough but i want to understand them both. So i will be glad if someone can explain me what's wrong in writing [class='nav-cart-count'] because i've seen an example that looks the same and works:

input[key='something'][type='sometype']

CodePudding user response：

This

span[id='nav-cart-count'].nav-cart-count

expression means literally, that we are locating span element with id attribute value equals to nav-cart-count and it has class nav-cart-count.
The second expression

span[id='nav-cart-count'][class='nav-cart-count']

means span element with id attribute value equals to nav-cart-count and class attribute value equals to nav-cart-count.
So, in case this span element has class attribute value like following: nav-cart-count counter the first locator expression will match it while the second will not!
To match both cases you can use the first expression

span[id='nav-cart-count'].nav-cart-count

or the second expression can be modified to search for contains instead of equals, like this:

span[id='nav-cart-count'][class*='nav-cart-count']