Blogger Information
Blog 31
fans 2
comment 0
visits 27691
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
简单选择器
霏梦
Original
619 people have browsed it

- 作者:霏梦

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>选择器,简单选择器</title>
  7. <style>
  8. /* 元素选择器,也就是标签选择器 --> */
  9. body {
  10. background-color: lightcyan;
  11. }
  12. /* 类选择器对应者hmtl标签中的class属性 */
  13. .wsp {
  14. border: 1px solid rgb(10, 10, 10);
  15. }
  16. /* 多个类复合应用 */
  17. .wsp.center {
  18. background-color: yellow;
  19. }
  20. /* id选择器 */
  21. #first {
  22. background-color: lightpink;
  23. }
  24. /* id,class可以添加到任何元素上,所以可以省略 */
  25. /* *属于元素级别, 元素<class<id */
  26. /* #first.wsp { */
  27. /* background-color: red; */
  28. /* } */
  29. /* id选择器的应用场景只有二个场景,表单元素,锚点里 */
  30. </style>
  31. </head>
  32. <body>
  33. <h3 class="h3-title">我是标题</h3>
  34. <p class="wsp" id="first">我是第1行</p>
  35. <p class="wsp">我是第2行</p>
  36. <p class="wsp">我是第3行</p>
  37. <p class="wsp">我是第4行</p>
  38. <p class="wsp center">我是第5行</p>
  39. <p class="wsp">我是第6行</p>
  40. <p class="wsp">我是第7行</p>
  41. <p class="wsp">我是第8行</p>
  42. <p class="wsp">我是第9行</p>
  43. </body>
  44. </html>
Correcting teacher:WJWJ

Correction status:qualified

Teacher's comments:写的不错,下次一天的作业合在一块写!
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post