当前位置:Gxlcms > 前端框架 > css如何选择元素

css如何选择元素

时间:2021-07-01 10:21:17 帮助过:29人阅读

css选择元素的方法:首先创建一个HTML示例文件;然后在body中创建多行文本;最后使用“:nth-of-type(n)”选择器或“:last-child”选择器来选择元素即可。

本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。

要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的。

css该如何选择元素呢?

css可以使用:nth-of-type(n)选择器或:last-child选择器来选择元素。:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。:last-child选择器匹配属于其父元素的最后一个子元素的每个元素。

使用:nth-of-type选择器选择元素示例:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <style>
  7. p:nth-of-type(2)
  8. {
  9. background:#ff0000;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <h1>This is a heading</h1>
  15. <p>The first paragraph.</p>
  16. <p>The second paragraph.</p>
  17. <p>The third paragraph.</p>
  18. <p>The fourth paragraph.</p>
  19. </body>
  20. </html>

效果图:

2977704230acb2ff8346af928a24abc.png

使用last-child选择器选择元素示例:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. p:last-child
  6. {
  7. background:#ff0000;
  8. }
  9. </style>
  10. </head>
  11. <body>
  12. <h1>这是标题</h1>
  13. <p>第一个段落。</p>
  14. <p>第二个段落。</p>
  15. <p>第三个段落。</p>
  16. <p>第四个段落。</p>
  17. <p>第五个段落。</p>
  18. </body>
  19. </html>

效果图:

0cb0d69fffbc829fdf886241e4d2c4b.png

更多详细的HTML/CSS知识,请访问CSS视频教程栏目!

以上就是css如何选择元素的详细内容,更多请关注gxlcms其它相关文章!

人气教程排行