Here is the code from the current site: https://codepen.io/CeReRa/pen/qYYOeO The problem is that in the mobile version of the site the image inside the block crawls out and is visible immediately when the page loads. But I also have display: none ! What could be the problem?

  • >> What could be the problem? << override display in other classes and element styles - test123
  • I'm a newbie. Please explain how to solve it. - CeReRa
  • Chrome in the developer does not show such a problem. It shows everything well. Namely on the phone gets out. How is there to check and find out where it overrides? - CeReRa
  • and what browser on the phone? - yolosora
  • The laptop failed to play. As I understand it, you need to speak not in the "mobile version", but "on the phone", and indicate which browser on the phone, as mentioned above - Dmytryk

1 answer 1

Relying only on the information that you have posted, I can only show what happened, so that in the future you would not have such questions:

Sample page:

 Смотреть сюда: <div class="MyStyleName">Невидимый текст</div>

Style example:

 .MyStyleName { display: none; }

https://jsfiddle.net/cwd04vxv/

This is ideal, what you expect. Next, I suggest, without changing anything, add a little style:

 div.MyStyleName { display: block; }

https://jsfiddle.net/mz1LksL4/

And what will we see? And we will see that now everything that was invisible has become visible. Disorder - you say. No, that's right. The reason for this behavior is in theory. In order to understand what is happening, you need to understand what selectors are. It is the selector that plays the key role. In this example, the “Anything with MyStyleName” view selector is more general than the “MyStyleName class div”, which is why the second option has higher priority. (it is more specific than the first).

Also, changing the priority of the selector can be forced by overwriting the rewriting of the! Important property, as an example:

https://jsfiddle.net/xgpxhbyw/

We simply forced the interpreter not to look at the usual priority of selectors, and clearly said that for the property and value here is the main thing.

I hope you will not ask further questions in the style of "Why did this happen?"

  • Yes and no. First, there is no code with priority selectors. Everything is monosyllabic, there is nothing concrete about the type of div.class. Secondly, the modal window stops working with the! Impotant property. But it is still needed. - CeReRa
  • @CeReRa, I told you where you have an error, what you have in the code — it doesn't matter. The mistake is that you connect another style (for the mobile version of the site) and it overlaps your main style. If the style of the mobile version of such a curve, correct it. About! Important - I showed how exactly the priorities of the selectors affect the overall picture. Moreover,! Important is an exception to the rules, it is very ambiguous about it, because using it means that you are trying to make a crutch, or to make friends with several versions of styles. - test123
  • >> there is nothing concrete about the type of div.class. << I gave an example with a specific selector. You can have anything, for example, div.span .MyClass {...} here's an example of another specific selector, or rather, two selectors, one of which has a higher priority. - test123