Understanding ID and Class in CSS web page layout

Understanding and application of ID and class in XHTML CSS web page layout:

If only XHTML and CSS could be object-oriented. . The sun should be rising in the north. However, everything should be viewed with an OO mentality, and we can barely make up the numbers. In fact, someone proposed OO-style as early as 2000, but it can no longer be found.

So what to do? Now everyone knows that CSS can be written like this:

We can think of it as a prototype, or a class, -__-b seems to be a class originally, and then "instantiate" an object in HTML, for example:

This element will use the corresponding definition of CSS, but the corresponding class is not enough, because our page may apply this class in many places. In order to handle the "private" relationship, change the code just now to:

In this case, the element with the ID aaoao will apply the definition of the .G_G class, and you can use a selector like #aoao{} to enter the definition of the private effect, which will not affect the public .G_G class. , at the same time, the priority defined by #aoao will be higher than .G_G, which is consistent with the common sense that private definitions have higher priority than public definitions^^.

Since I use something unique like ID, reusing such privately defined things becomes a problem (an ID can only appear once on a page, I don’t know who said that, but it’s the truth anyway). What if we want to achieve privatization of many of the same things? Then we must implement "polymorphism". Dig haha. Change the code again:

One is "G_G" and the other is "o_O", but if we use .o_O{}, we can also define the element. If the CSS is like this:

Elements will all be defined, and since definitions don't stack, they will all be applied. If the code is like this, I don't know if it will be easier to understand.

Next, we need to implement "encapsulation". You should use the child selector frequently. Change the code:

Although both .bendan{} and .G_G .bendan{} can be defined, the latter can only be applied to elements with class "G_G". We can simply understand .bendan{} as a global definition and .G_G .bendan{ } is understood as a partial definition, which is beneficial to the modularization of our XHTML and CSS. ^^The legendary "encapsulation" appeared, and then it continued.

Such code can produce countless changes, and if you don't understand it, you have to start from scratch. ^^

Deeply understand the application of ID and class in XHTML CSS web page layout!