热门关键字：
jquery > jquery教程 > html5 > CSS选择器

CSS选择器

473
作者：管理员
发布时间：2020/6/7 13:04:57
评论数：0
转载请自觉注明原文：http://www.jq-school.com/Show.aspx?id=1832

元素选择器：通过元素名来选择css作用的目标 比如<p>、<h1>等

类选择器：允许以一种独立于文档元素的方式来指定样式 语法为:.className{}

id选择器：选择id等于某值的唯一元素。以一种独立于文档元素的方式来指定样式，它仅作用于id属性的值*/

选择器组：写出一组选择器选中每个选择器所对应目标的并集


  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>选择器演示</title>
  7. <style type="text/css">
  8. /*2.类选择器：选择class等于某值的所有元素，class是程序员根据逻辑自己给元素增加的分类*/
  9. .day{
  10. color: blue;
  11. }
  12. /*3.id选择器：选择id等于某值的唯一元素。以一种独立于文档元素的方式来指定样式，它仅作用于id属性的值*/
  13. #fighting{
  14. color:red;
  15. }
  16. /*4.选择器组：写出一组选择器选中每个选择器所对应目标的并集*/
  17. .day,#fighting{
  18. font-weight: bold;
  19. }
  20. /*5.派生选择器*/
  21. /*5.1选择某元素的子孙*/
  22. #p5 b{
  23. color:red;
  24. }
  25. /*5.2选择某元素的儿子*/
  26. #p5>b{
  27. font-size: 30px;
  28. }
  30. /*6.伪类选择器：根据元素的状态选择选择器*/
  31. /*6.1选择未访问过的超链接*/
  32. a:link{
  33. color:green;
  34. }
  35. /*6.2选择已访问过的超链接*/
  36. a:visited {
  37. color: red;
  38. }
  39. /*6.3选择激活态（正在点）的按钮*/
  40. #i1:active{
  41. background-color: blue;
  42. }
  43. /*6.4选择有焦点的文本框、密码框、文本域*/
  44. #i2:focus {
  45. background-color: green;
  46. }
  47. /*6.5选择鼠标悬停态（触碰）的图片*/
  48. img:hover{
  49. width: 250px;
  50. height: 250px;
  51. }
  52. </style>
  53. </head>
  54. <body>
  55. <p class="day">昨天又是忙碌的一天</p>
  56. <p>今天也是忙碌的一天</p>
  57. <p class="day">后天又是忙碌的一天</p>
  58. <p id="fighting">不管怎么样，生活还得继续呀</p>
  60. <p id="p5">
  61. 北京市<u>海淀区<b>200号5号楼</b></u><b>5号房</b>
  62. </p>
  64. <p>
  65. <a href="http://www.baidu.com">百度</a>
  66. <a href="http://www.taobao.com">淘宝</a>
  67. <a href="http://error.com">错误的网站</a>
  68. </p>
  70. <p>
  71. <input type="button" value="按钮" id="i1">
  72. </p>
  74. <p>
  75. <input type="text" id="i2">
  76. </p>
  78. <p>
  79. <img alt="CSS选择器" src="../images/lcz.jpg">
  80. </p>
  81. </body>
  82. </html>

边框：


  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>Insert title here</title>
  7. </head>
  8. <style type="text/css">
  9. /*1.四个边设置相同的边框*/
  10. p{
  11. border:1px dashed red;
  12. }
  13. /*2.单个边设置边框*/
  14. /*left/right/top/bottom*/
  15. h1{
  16. border-left: 10px solid blue;
  17. }
  18. /*3.块元素一般宽度默认是100%，高度为自适应，内容越多，它越高。当给他固定高度时，可能会导致内容溢出，*/
  19. p{
  20. width: 300px;
  21. height: 60px;
  22. /*溢出时的处理*/
  23. overflow:auto;
  24. }
  25. </style>
  26. <body>
  27. <h1>李白</h1>
  28. <p>
  29. 李白（701年－762年） ，字太白，号青莲居士，又号“谪仙人”，是唐代伟大的浪漫主义诗人，
  30. 被后人誉为“诗仙”，与杜甫并称为“李杜”，为了与另两位诗人李商隐与杜牧即“小李杜”区别，
  31. 杜甫与李白又合称“大李杜”。据《新唐书》记载，李白为兴圣皇帝（凉武昭王李暠）九世孙，
  32. 与李唐诸王同宗。其人爽朗大方，爱饮酒作诗，喜交友。
  33. </p>
  34. </body>
  35. </html>

边距：


  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>Insert title here</title>
  7. <style type="text/css">
  8. div{
  9. border:1px solid red;
  10. width:100px;
  11. height:100px;
  12. }
  13. /*1.四个边设置相同的边距()*/
  14. #d1{
  15. padding:20px;
  16. margin:30px;
  17. }
  18. /*2.四个边设置不同的边距（上右下左）*/
  19. #d2{
  20. padding:10px 20px 30px 40px;
  21. margin:40px 30px 20px 10px
  22. }
  23. /*3.单个边设置边距
  24. left/right/top/bottom*/
  25. #d3{
  26. padding-left: 20px;
  27. margin-bottom: 40px;
  28. }
  29. /*4.对边设置相同的边距*/
  30. /*先上下 后左右*/
  31. #d4{
  32. padding:20px 40px;
  33. margin:30px 10px;
  34. }
  35. /*5.对边设置边距的特例*/
  36. /*在设置外边距时，若左右外边距值为auto，则该元素水平居中*/
  37. #d5{
  38. margin:20px auto;
  39. }
  40. </style>
  41. </head>
  42. <body>
  43. <div id="d0">d0</div>
  44. <div id="d1">d1</div>
  45. <div id="d2">d2</div>
  46. <div id="d3">d3</div>
  47. <div id="d4">d4</div>
  48. <div id="d5">d5</div>
  49. </body>
  50. </html>
CSS概述、CSS语法、CSS选择器、CSS声明




如果您觉得本文的内容对您的学习有所帮助：支付鼓励



关键字：CSS
友荐云推荐