学习重点,选择器

怼烎@ 2023-09-27 13:38 72阅读 0赞

42af06219fd85b2eca0e455f5b5bd24b.png

【1】代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style type="text/css">
  7. /*
  8. 【1】基本选择器:元素选择器:
  9. 通过元素的名字进行定位,它会获取页面上所有这个元素,无论藏的多深都可以获取到
  10. 格式:
  11. 元素名字{
  12. css样式;
  13. }
  14. * */
  15. h1{
  16. color: red;
  17. }
  18. i{
  19. color: blue;
  20. }
  21. /*
  22. 【2】基本选择器:类选择器
  23. 应用场合:不同类型的标签使用相同的类型
  24. 格式:
  25. .class的名字{
  26. css样式;
  27. }
  28. */
  29. .mycls{
  30. color: green;
  31. }
  32. /*
  33. 【3】基本选择器:id选择器:
  34. 应用场合:可以定位唯一的一个元素
  35. 不同的标签确实可以使用相同的id,但是一般我们会进行人为的控制,让id是可以唯一定位到一个元素。
  36. 格式:
  37. #id名字{
  38. css样式;
  39. }
  40. */
  41. #myid{
  42. color: yellow;
  43. }
  44. </style>
  45. </head>
  46. <body>
  47. <h1>我是<i>一个</i>标题</h1>
  48. <h1>我是一个标题</h1>
  49. <h1 class="mycls">我是一个标题</h1>
  50. <h1>我是一个标题</h1>
  51. <h2 class="mycls">我是h2标题</h2>
  52. <h2>我是h2标题</h2>
  53. <h2 id="myid">我是h2标题</h2>
  54. </body>
  55. </html>

【3】优先级别:
id选择器>class选择器>元素选择器:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style type="text/css">
  7. .mycls{
  8. color: red;
  9. }
  10. /*#myid{
  11. color: yellow;
  12. }*/
  13. h1{
  14. color: greenyellow;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <h1 class="mycls" id="myid">我是标题</h1>
  20. </body>
  21. </html>

关系选择器

【1】div 和 span

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style type="text/css">
  7. /*
  8. 我们可以通俗的理解,把div理解为一个“塑料袋”
  9. div属于块级元素--》换行
  10. span属于行内元素--》没有换行效果
  11. span:里面的内容占多大,span包裹的区域就多大*/
  12. div{
  13. border: 1px red solid;
  14. }
  15. span{
  16. border: 1px greenyellow solid;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <div>马士兵马士兵<br />马士兵马士兵</div>
  22. <div>马士兵</div>
  23. <span>马士兵马士兵</span>
  24. <span>马士兵</span>
  25. <span>马士兵</span>
  26. </body>
  27. </html>

div和span 结合css用于页面的布局。div+css 用于页面布局。

【2】关系选择器:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style type="text/css">
  7. /*关系选择器:
  8. * 后代选择器:只要是这个元素的后代,样式都会发生变化
  9. * div下面的所有h1标签样式都会改变
  10. */
  11. /*div h1{
  12. color: red;
  13. }*/
  14. /*关系选择器:子代选择器
  15. 只改变子标签的样式*/
  16. div>h1{
  17. color: royalblue;
  18. }
  19. span>h1{
  20. color: yellow;
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <div>
  26. <h1>这是标题</h1>
  27. <h1>这是标题</h1>
  28. <h1>这是标题</h1>
  29. <h1>这是标题</h1>
  30. <h1>这是标题</h1>
  31. <span>
  32. <h1>这是标题</h1>
  33. <h1>这是标题</h1>
  34. <h1>这是标题</h1>
  35. <h1>这是标题</h1>
  36. <h1>这是标题</h1>
  37. </span>
  38. </div>
  39. </body>
  40. </html>

发表评论

表情:
评论列表 (有 0 条评论,72人围观)

还没有评论,来说两句吧...

相关阅读

    相关 选择排序(重点)

    简介 选择排序的核心实现思路,是随机确定一个标志位(一般为第一个数字)作为最小数,然后向后遍历,找到比标志位更小的数字后,便与标志位互换位置,并更新最小数。选择排序同样可

    相关 NIO选择学习笔记

    选择器的作用 >      《Java NIO》上面的例子感觉有点晦涩,个人觉得Selector就像一条传送带一样,很多商品(Channel)通过传送带传过来,在另一端很多人

    相关 css学习选择

    做程序员,UI的设计大概是所有人的硬伤。对于样式的设计,做到能读懂和修改就可以了。 毕竟专门做这个的有UI设计师和美工,但是平时不阅读样式表,这块也会生疏。 现在开始复

    相关 jquery选择--学习笔记

    一、jquery选择器风格: jquery中的选择器完成继承了CSS的风格。利用JQ选择器,可以非常便捷和快速找出特定的DOM元素,然后为它们添加相应的行为。使用CSS选择