HTML&CSS Experiment (3)---Master how CSS selectors are used

"Experimental topic"html&css Experiment (3)

"Experimental Purpose" master the use of CSS selectors.

----------------------personal Work, if you have the work of the younger generation of the same, you can refer to study, Exchange, do not copy directly

The Debug Tools browser and editor. Three optional editing options:

(1) Local debugging: Notepad

(2) Online debugging: http://172.18.187.11:8080/lab/html3/index.jsp

"Experimental Content"

This experiment does not use a single child selector (nth-child) and a child type selector (Nth-of-type).

1, for the page song1.html plus selector as far as possible to get the following effect (text):

After completing the Save (song1.html) and screenshot browser (ctrl+alt+printscreen):

Style sheet:

<style type= "Text/css" >

Span{color:green}

P Em{color:blue}

P.b{font-style:italic}

Em{font-style:normal}

Em:not (. Class) {Font-size:larger}

#c {Text-decoration:underline}

</style>

2, for the page song2.html plus selector as far as possible to obtain the following effects:

After completing the Save (song2.html) and screenshot the browser:

Style sheet:

<style type= "Text/css" >

UL ul{font-size:200%;}

#last, #first Li+li+li{font-weight:bold;}

UL Ul{color:green}

#last,. Boat{font-style:italic}

#first Li+li+li+li{color:blue}

UL ul Ul{color:black}

UL ul ul{font-size:100%;} Self-added parts

</style>

3, for the page song3.html plus selector as far as possible to obtain the following effects:

After completing the Save (song3.html) and screenshot browser (ctrl+alt+printscreen):

Style sheet:

<style type= "Text/css" >

Em{font-weight:bolder;color:blue;}

{Color:brown;}

em+span,b+span{color:red;}

Span+span{color:green;}

B{text-decoration:underline;}

</style>

(The first two small oriole: <b style= "Text-decoration:none" >)

4, for the Web page song4.html plus attribute selector (using the Title property) as far as possible to get the following effect:

Save the webpage with the file song4.html and screenshot the browser (Ctrl+alt+printscreen) when finished:

Style sheet:

<style type= "Text/css" >

. erge a+a+a,.new Div a{color:red}

. Cool A+a+a{color:green}

. Cool A+a+a+a+a,.new a+a+a+a,a[href*= "i358"][title= "plucking radish"]{color: #0066CC}

. New A+a+a+a+a,.cool Div a,.erge Div A{font-style:italic}

. Cool A+a,.erge a+a{font-style:normal}//self-added parts

</style>

"Completion"

Have you completed these steps? (√ completed x not done or not completed)

1 [√] 2 [√] 3 [√] 4 [√]

"Experimental Experience"

Write out the problems encountered in the process of the experiment, the solutions and their own thinking, and briefly describe the experimental experience (if any).

The first sample of the experiment was just beginning to feel relatively simple, and it was done smoothly. However, in the process of completing a few examples, the implementation seems very difficult, because it is not possible to use the structure of pseudo-class child selector, and just beginning to think that only the teacher given a style in which to choose, you can neither add a new style statement, or modify or define the element's class or ID, You cannot even write inline elements.

Because the above (may be my personal misunderstanding, or the teacher is forbidden to use the above content) reasons, I tried a lot of methods, W3s also carefully looked over, tried a variety of combinations of selector changes, can not. Finally, I ask some students, the result is: can not use the structure of pseudo-class child selector, and can not modify or define the element's class or ID, but to add a new style statement and write inline elements should be possible, and then through the two methods to achieve.

I have been thinking about trying for a long time, but the previous 4 methods do not need to implement a similar example, at my current level, I really can not think of a way, so in the experiment with the addition of new style statements and writing inline elements of the two methods.

HTML&CSS Experiment (3)---Master how CSS selectors are used