经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS » 查看文章
首尾元素伪类选择_伪类选择唯一子元素_根据元素编号灵活选择_元素尾部伪类选择_not排除选择器_通过表单伪类创建个性化表单_文本伪类 -cyy
来源:cnblogs  作者:陈莺莺呀  时间:2020/11/9 15:18:38  对本文有异议

首尾元素伪类选择

  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. <meta name="keywords" content="关键词1,关键词2,关键词3">
  7. <meta name="description" content="网站描述bla bla">
  8. <title>网站标题</title>
  9. <style>
  10. article :first-child{
  11. background:Pink;
  12. }
  13. article>:first-child{
  14. color:red;
  15. }
  16. article h1:first-child{
  17. font-style:italic;
  18. }
  19. article h2:last-child{
  20. color:orange;
  21. }
  22. article h2:last-of-type{
  23. background-color:rgb(182, 145, 182);
  24. }
  25. </style>
  26. </head>
  27. <body>
  28. <a href="#cyy">cyy</a>
  29.  
  30. <ul>
  31. <li>111</li>
  32. <li></li>
  33. </ul>
  34.  
  35. <main>
  36. <a href="http://www.baidu.com" target="_blank">baidu</a>
  37. <input type="text" value="111">
  38. <article>
  39. <h1 title id>h1-title-id</h1>
  40. <h1 title='cyy'>h1-title</h1>
  41. <h1 title='cyyhahaha'>h1-title</h1>
  42. <h1 title='cyyhahahacyy'>h1-title</h1>
  43. <h1 title='cyyhahaha cyy'>h1-title</h1>
  44. <h1 title='cyy hahahacyy'>h1-title</h1>
  45. <h1 title='cyy-hahaha cyy'>h1-title</h1>
  46. <h2>h2</h2>
  47. <aside>
  48. aside
  49. <h2>aside-h2</h2>
  50. </aside>
  51. <h2>h2</h2>
  52. <div>111</div>
  53. </article>
  54. </main>
  55. <div id="cyy">cyy</div>
  56. </body>
  57. </html>

last-child和last-of-type的区别:

:last-child表示其父元素的最后一个子元素,且这个元素是css指定的元素,才可以生效。

:last-of-type表示其父元素下的最后一个指定类型的元素。

 

伪类选择唯一子元素:

  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. <meta name="keywords" content="关键词1,关键词2,关键词3">
  7. <meta name="description" content="网站描述bla bla">
  8. <title>网站标题</title>
  9. <style>
  10. article :only-child{
  11. background:Pink;
  12. }
  13. article>div:only-of-type{
  14. color:red;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <a href="#cyy">cyy</a>
  20.  
  21. <ul>
  22. <li>111</li>
  23. <li></li>
  24. </ul>
  25.  
  26. <main>
  27. <a href="http://www.baidu.com" target="_blank">baidu</a>
  28. <input type="text" value="111">
  29. <article>
  30. <h1 title id>h1-title-id</h1>
  31. <h1 title='cyy'>h1-title</h1>
  32. <h1 title='cyyhahaha'>h1-title</h1>
  33. <h1 title='cyyhahahacyy'>h1-title</h1>
  34. <h1 title='cyyhahaha cyy'>h1-title</h1>
  35. <h1 title='cyy hahahacyy'>h1-title</h1>
  36. <h1 title='cyy-hahaha cyy'>h1-title</h1>
  37. <h2>h2</h2>
  38. <aside>
  39. aside
  40. <h2>aside-h2</h2>
  41. </aside>
  42. <h2>h2</h2>
  43. <div>111</div>
  44. </article>
  45. </main>
  46. <div id="cyy">cyy</div>
  47. </body>
  48. </html>

 

根据元素编号灵活选择:

  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. <meta name="keywords" content="关键词1,关键词2,关键词3">
  7. <meta name="description" content="网站描述bla bla">
  8. <title>网站标题</title>
  9. <style>
  10. article :nth-child(1){
  11. background:Pink;
  12. }
  13. li:nth-child(2n){
  14. color:red;
  15. }
  16. li:nth-child(odd){
  17. color:green;
  18. }
  19. article h1:nth-child(2){
  20. color:purple;
  21. }
  22. article h1:nth-of-type(2){
  23. background-color:purple;
  24. }
  25. </style>
  26. </head>
  27. <body>
  28. <a href="#cyy">cyy</a>
  29.  
  30. <ul>
  31. <li>111</li>
  32. <li>111</li>
  33. <li>111</li>
  34. <li>111</li>
  35. <li>111</li>
  36. <li>111</li>
  37. <li>111</li>
  38. <li>111</li>
  39. <li>111</li>
  40. </ul>
  41.  
  42. <main>
  43. <a href="http://www.baidu.com" target="_blank">baidu</a>
  44. <input type="text" value="111">
  45. <article>
  46. <h1 title id>h1-title-id</h1>
  47. <div>111</div>
  48. <div>111</div>
  49. <h1 title='cyy'>h1-title</h1>
  50. <h1 title='cyyhahaha'>h1-title</h1>
  51. <h1 title='cyyhahahacyy'>h1-title</h1>
  52. <h1 title='cyyhahaha cyy'>h1-title</h1>
  53. <h1 title='cyy hahahacyy'>h1-title</h1>
  54. <h1 title='cyy-hahaha cyy'>h1-title</h1>
  55. <h2>h2</h2>
  56. <aside>
  57. aside
  58. <h2>aside-h2</h2>
  59. </aside>
  60. <h2>h2</h2>
  61. <div>111</div>
  62. </article>
  63. </main>
  64. <div id="cyy">cyy</div>
  65. </body>
  66. </html>

 

元素尾部伪类选择:

  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. <meta name="keywords" content="关键词1,关键词2,关键词3">
  7. <meta name="description" content="网站描述bla bla">
  8. <title>网站标题</title>
  9. <style>
  10. /* 最后两个li */
  11. ul li:nth-last-child(-n+2){
  12. font-weight:bold;
  13. }
  14. article h1:nth-last-of-type(2){
  15. color:red;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <a href="#cyy">cyy</a>
  21.  
  22. <ul>
  23. <li>111</li>
  24. <li>111</li>
  25. <li>111</li>
  26. <li>111</li>
  27. <li>111</li>
  28. <li>111</li>
  29. <li>111</li>
  30. <li>111</li>
  31. <li>111</li>
  32. </ul>
  33.  
  34. <main>
  35. <a href="http://www.baidu.com" target="_blank">baidu</a>
  36. <input type="text" value="111">
  37. <article>
  38. <h1 title id>h1-title-id</h1>
  39. <div>111</div>
  40. <div>111</div>
  41. <h1 title='cyy'>h1-title</h1>
  42. <h1 title='cyyhahaha'>h1-title</h1>
  43. <h1 title='cyyhahahacyy'>h1-title</h1>
  44. <h1 title='cyyhahaha cyy'>h1-title</h1>
  45. <h1 title='cyy hahahacyy'>h1-title-ok</h1>
  46. <h1 title='cyy-hahaha cyy'>h1-title</h1>
  47. <h2>h2</h2>
  48. <aside>
  49. aside
  50. <h2>aside-h2</h2>
  51. </aside>
  52. <h2>h2</h2>
  53. <div>111</div>
  54. </article>
  55. </main>
  56. <div id="cyy">cyy</div>
  57. </body>
  58. </html>

 

not排除选择器:

  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. <meta name="keywords" content="关键词1,关键词2,关键词3">
  7. <meta name="description" content="网站描述bla bla">
  8. <title>网站标题</title>
  9. <style>
  10. /* 前4个里排除第2个 */
  11. ul li:nth-child(-n+4):not(:nth-child(2)){
  12. color:red;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <a href="#cyy">cyy</a>
  18.  
  19. <ul>
  20. <li>111</li>
  21. <li>111</li>
  22. <li>111</li>
  23. <li>111</li>
  24. <li>111</li>
  25. <li>111</li>
  26. <li>111</li>
  27. <li>111</li>
  28. <li>111</li>
  29. </ul>
  30.  
  31. <main>
  32. <a href="http://www.baidu.com" target="_blank">baidu</a>
  33. <input type="text" value="111">
  34. <article>
  35. <h1 title id>h1-title-id</h1>
  36. <div>111</div>
  37. <div>111</div>
  38. <h1 title='cyy'>h1-title</h1>
  39. <h1 title='cyyhahaha'>h1-title</h1>
  40. <h1 title='cyyhahahacyy'>h1-title</h1>
  41. <h1 title='cyyhahaha cyy'>h1-title</h1>
  42. <h1 title='cyy hahahacyy'>h1-title-ok</h1>
  43. <h1 title='cyy-hahaha cyy'>h1-title</h1>
  44. <h2>h2</h2>
  45. <aside>
  46. aside
  47. <h2>aside-h2</h2>
  48. </aside>
  49. <h2>h2</h2>
  50. <div>111</div>
  51. </article>
  52. </main>
  53. <div id="cyy">cyy</div>
  54. </body>
  55. </html>

 

通过表单伪类创建个性化表单:

  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. <meta name="keywords" content="关键词1,关键词2,关键词3">
  7. <meta name="description" content="网站描述bla bla">
  8. <title>网站标题</title>
  9. <style>
  10. input:disabled{
  11. background:pink;
  12. }
  13. input:enabled{
  14. background:lightgreen;
  15. }
  16. input:checked+label{
  17. color:red;
  18. }
  19. /* 必填项 */
  20. input:required{
  21. border:1px solid yellow;
  22. }
  23. /* 选填项 */
  24. input:optional{
  25. border:1px solid blue;
  26. }
  27. input:valid{
  28. border-radius:5px;
  29. }
  30. input:invalid{
  31. border-radius:50%;
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <form action="">
  37. <input type="text" disabled>
  38. <input type="text">
  39. <hr>
  40. <input type="radio" id="boy">
  41. <label for="boy">boy</label>
  42. <input type="radio" id="girl" checked>
  43. <label for="girl">girl</label>
  44. <hr>
  45. <input type="text" required>
  46. <input type="email" name="" id="">
  47. <button>提交</button>
  48. </form>
  49. </body>
  50. </html>

 

文本伪类:

  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. <meta name="keywords" content="关键词1,关键词2,关键词3">
  7. <meta name="description" content="网站描述bla bla">
  8. <title>网站标题</title>
  9. <style>
  10. p::first-letter{
  11. color:red;
  12. }
  13. p::first-line{
  14. color:yellowgreen;
  15. }
  16. p+span::after{
  17. content:'hh~';
  18. color:red;
  19. position:relative;
  20. top:30px;
  21. left:30px;
  22. }
  23. p+span::before{
  24. content:'↓';
  25. color:red;
  26. }
  27. .form{
  28. border:1px solid #ddd;
  29. width:200px;
  30. margin:100px;
  31. }
  32. input[type='text']{
  33. border:none;
  34. outline:none;
  35. }
  36. input[type='text']+span::after{
  37. content:'?';
  38. cursor:pointer;
  39. }
  40. </style>
  41. </head>
  42. <body>
  43. <div style="width:300px;">
  44. <p>
  45. 这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~
  46. </p>
  47. <p>
  48. 这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~
  49. </p>
  50. <p>
  51. 这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~
  52. </p>
  53. <span>cyy</span>
  54. </div>
  55.  
  56. <div class="form">
  57. <input type="text">
  58. <span></span>
  59. </div>
  60. </body>
  61. </html>

 

原文链接:http://www.cnblogs.com/chenyingying0/p/13938993.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号