经验首页 前端设计 程序设计 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

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

CSS热门文章

  • CSS实现文字两端对齐
  • 【WEB基础】HTML & CSS 基础入门（6）超链接
  • Javascript 对象 - 数学对象
  • 对移动端兼容适配的分析
  • Element FORM结合Vue实现横向排列表单项
  • 如何让一个input输入框居中
  • CSS Grid 布局完全指南(图解 Grid 详细教程)
  • css常见的各种布局上（两列布局）
  • vue+element导入导出excel
  • WEB前端动态背景集

    • CSS推荐文章

  • CSS布局概念与技术教程
  • 15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder
  • 现代 CSS 解决方案：文字颜色自动适配背景色！
  • 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
  • 深入解析css-笔记
  • CSS 还原拉斯维加斯球数字动画
  • 震惊！CSS 也能实现碰撞检测？
  • 前端开发如何更好的避免样式冲突？级联层(CSS@layer)
  • 现代 CSS 解决方案：CSS 原生支持的三角函数
  • 利用css var函数让你的组件样式输出规范样式API，可定制性更高；

    • 本站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号