Detailed explanation of HTML5+CSS3 application

Copy the code

The code is as follows:

<section> 
      <article> 
        <header> 
            <h1>p Soup Demonstration</h1> 
            <p>Posted on July 11th, 2009</p> 
        </header> 
        <section> 
            <p>Lorem ipsum text blah blah blah.</p> 
            <p>Lorem ipsum text blah blah blah.</p> 
            <p>Lorem ipsum text blah blah blah.</p> 
        </section> 
        <footer> 
            <p>Tags: HMTL, code, demo</p> 
        </footer> 
      </article> 
      <aside> 
        <header> 
            <h1>Tangential Information</h1> 
        </header> 
        <section> 
            <p>Lorem ipsum text blah blah blah.</p> 
            <p>Lorem ipsum text blah blah blah.</p> 
            <p>Lorem ipsum text blah blah blah.</p> 
        </section> 
        <footer> 
            <p>Tags: HMTL, code, demo</p> 
        </footer> 
      </aside> 
  </section> 
</section>

As we can see, HTML5 allows us to replace a large number of meaningless

tags with many more semantic structured code tags. This semantic feature not only improves the quality and semantics of our web pages, but also greatly reduces the class and id attributes that must be called for CSS in the code. In fact, CSS3 also allows us to ignore all classes and ids.

Say goodbye to class attributes and welcome neat tags　

Combined with HTML5 rich in new semantic tags, CSS3 provides web designers with magic for their web pages. General strength. With the power of HTML5, we will get more control over the document code. With the power of CSS3, our control will become infinite!

Even without those advanced CSS selectors, we can still call different containers through powerful HTML5 clauses without bothering with attributes such as class and id. Like the previous p layout, we may have to call it like this in css: p#news {}

Copy code

The code is as follows:

div.section {} 
div.article {} 
div.header  {} 
div.content {} 
div.footer  {} 
div.aside  {}

Let’s take a look at an example based on HTML5: section {}

Copy code

The code is as follows:

article {} 
header  {} 
footer  {} 
aside  {}

This is progress, but there are still some issues that need to be resolved. In the

example, we need to call the element in the page through the class or id attribute. This logic will allow us to apply styles to any element in the document, whether as a whole or individually. For example, in the

example, the .section and .content elements are easy to locate. But in the HTML5 example, there will be many section elements in the actual document. Actually, we could add some specific attribute selectors to call those different section elements, but thankfully, I don't have a few advanced CSS selectors to target different section elements now.

Locating HTML-5 elements without using class and id

Let’s take a look at how to locate an instance of HTML5 page elements without using class and id. We can use three A CSS selector to locate and identify elements within an instance. as follows:

后代选择器:[CSS 2.1]: EF
兄弟选择器:[CSS 2.1]: E + F
子元素选择器:[CSS 2.1]: E > F

下面让我们来看看如何不使用class和id而完成对文档中的那些section元素的定位吧:

定位最外层的