Object-Oriented Programming with XHTML and CSS

<br />If only XHTML and CSS were object-oriented. . The sun should be rising from the north. However, we should look at everything from an OO perspective, and that will barely make up the numbers. In fact, someone proposed OO-style as early as a few years ago, but it can no longer be found.
So how do we do it? Now everyone knows that CSS can be written like this:
.G_G { /* xxxxxx */ }
We can think of it as a prototype , or a class , -__-b seems to be a class, and then we need to "instantiate" an object in HTML, for example:
<div class="G_G">Stupid ah ah</div>
The element will use the corresponding CSS definition, but the corresponding class alone is not enough, because our page may apply this class in multiple places. In order to handle the " private " relationship well, change the previous code to:
<div id="aoao" class="G_G">Stupid aoao</div>
In this case, the element with ID aoao will apply the definition of the .G_G class, and can use the selector #aoao{} to enter the definition of private effects, which will not affect the public .G_G class. At the same time, the priority of the #aoao definition will be higher than that of .G_G, which is in line with the common sense that private definitions take precedence over public definitions^^.
Since I used ID, a unique thing, the reuse of this privately defined thing became a problem (an ID can only appear once on a page, I don't know who said it, but it's the truth anyway). What if we want to implement multiple privatized things? Then we must implement " polymorphism ". Dig haha. Change the code again:
<div class="G_G o_O">Stupid ah ah</div>
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:
.G_G {width:100%} .o_O {color:#123456}
The elements will all be defined, and since definitions do not cascade, they will all be applied. If the code is like this, I wonder if it will be easier to understand.
<div class="layout color">Not a fool, owl</div>
.layout{width:100%} .color{color:#123456}
Next, we need to implement " encapsulation ". The child selector should be used frequently, change the code:
<div class="G_G"><span class="bendan">Stupid</span> Ouch</div>
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{} as a local definition, which will be beneficial to the modularization of our XHTML and CSS. ^^The legendary "encapsulation" appears, and then follows.
<div id="aoao" class="G_G o_O"><span class="bendan">Stupid</span> Aoao</div>
Such code can produce countless changes. If you still don't understand it, start from the beginning. ^^
In fact, these are still a long way from true object-oriented. I am just learning the clickbait, but it can be used to understand the application of ID and class.

<<: Docker stop stops/remove deletes all containers

>>: Example of making a butterfly flapping its wings with pure CSS3

MySQL example of getting today and yesterday's 0:00 timestamp

Object-Oriented Programming with XHTML and CSS

MySQL example of getting today and yesterday's 0:00 timestamp

Solution for Tomcat to place configuration files externally

About the selection of time date type and string type in MySQL

IE conditional comments for XHTML

Vue: Detailed explanation of memory leaks

A method of hiding processes under Linux and the pitfalls encountered

Introduction to Docker Architecture

How to keep the content within the container when the flex layout is stretched by child elements

Native JS to implement sharing sidebar

Unable to define IE6 font: 13px size is invalid, IE6 automatically displays a larger font solution

Recommend

How to install Nginx in CentOS7 and configure automatic startup

Detailed use cases of MySql escape

Vue v-model related knowledge summary

How to maintain a long connection when using nginx reverse proxy

Why not use UTF-8 encoding in MySQL?

Diagram of the process of implementing direction proxy through nginx

Vue implements QR code scanning function (with style)

Linux (center OS7) installs JDK, tomcat, mysql to build a java web project running environment

Detailed explanation of pid and socket in MySQL

Mysql modify stored procedure related permissions issue

What is TypeScript?

MySQL 8.0.16 winx64 installation and configuration method graphic tutorial under win10

How to use union all in MySQL to get the union sort

CSS to achieve horizontal lines on both sides of the middle text

Data URI and MHTML complete solution for all browsers