Example tutorial on the combined use of H5 and CSS3

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 use many more semantic structures Use code tags to replace a large number of meaningless

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 be 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 {}

The code is as follows:

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

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

The code is as follows:

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

This is progress, but there are still some problems that need to be solved. 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 handful of advanced CSS selectors to target the 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:

Descendant selector: [CSS 2.1]: EF
Sibling selector: [CSS 2.1]: E + F
Child element selector: [CSS 2.1]: E > F

Let’s take a look at how to locate the section elements in the document without using class and id:

Locate the outermost