If XHTML and CSS are object-oriented .. The sun should have risen from the north. However, everything should look at the problem with the idea of OO, And we can barely pull together. In fact, some people proposed OO-style as early as a few years ago, but they cannot find it. So how OO? As we all know, CSS can be used as an example:. G_G {* xxxxxx *}. We can use it like XHTML and CSS to be object-oriented .. The sun should have risen from the north. However, everything should look at the problem with the idea of OO, And we can barely pull together. In fact, some people proposed OO-style as early as a few years ago, but they cannot find it.
So how OO? As we all know, CSS supports sample writing:
. G_G {/* xxxxxx */}
We can look at it like
Prototype, Or Cheng
Class,-_-B seems to be a class, and then "instantiate" an object in HTML, for example:
Dummies
This element uses the corresponding CSS definition, but only the corresponding class is not enough, because we may apply this class in multiple places on the page, in order to deal with the"
Private", Change the code:
Dummies
In this way, the element with the ID of aoao will be applied.
.G_GDefinition of this class, and can be used
#aoao{}This selection operator is used to define the private effect, which will not affect the public
.G_GThis class, at the same time, # The priority defined by aoao will be higher than. G_G, in line with common sense that the private definition is higher than the public definition ^.
Because I use the unique ID, reuse of this private definition becomes a problem (an ID can only appear once on a page, but I don't know who said it, it is truth ). What should we do if we want to achieve many things with the same privatization? Then we must implement"
Polymorphism". Digging haha. Modify the Code:
Dummies
One is "G_G" and the other is "o_O", but if we use
.o_O{}You can also define elements, if CSS is like this:
. G_G {width: 100%}. o_O {color: #123456}
All elements will be defined, and will be applied because the definition is not stacked. If the code is like this, I don't know if it will be better understood.
Not a Dummies
. Layout {width: 100%}. color {color: #123456}
Next, we want to implement"
Encapsulation". The sub-level selector should be used frequently. For code:
Dummies
Although
.bendan{}And
.G_G .bendan{}Can be defined, but the latter can only be applied to elements whose class is "G_G ".
.bendan{}As a global definition
.G_G .bendan{}It can be understood as a local definition, which facilitates the modularization of XHTML and CSS. ^ The legendary "encapsulation" appears, and then proceed.
Dummies
This code can generate countless changes, but it cannot be understood from the beginning. ^
In fact, there is still a long distance between these and the real object orientation. I am only learning about the title party, But I can use it to understand the application of ID and class.
