Skip to content

Latest commit

 

History

History
332 lines (286 loc) · 11.7 KB

File metadata and controls

332 lines (286 loc) · 11.7 KB

第14节 css3

❤️💕💕HTML和CSS高级教程。更多的文章请移步博客Myblog:http://nsddd.top


[TOC]

css3选择器

css3在css2基础上添加的一些功能,是升级版,css3完全先后兼容,所以没必要改变现在的设计来让它们继续运作

  • + 的意思是紧跟在child后面的li元素
  • ~ 的意思是child后面的所有li元素
.child+li { 
    border: 1px solid #00F; 
    color: #0FF;
    /* 选择器+选择器 */
}
.child2~li {
    border: 1px solid #00F;
    color: #0F0;
}

结构伪类选择器

  • div:last-child 选择器选择父元素的最后一个子元素
  • div:last-of-type 选择器选择父元素的最后一个同类型的子元素
  • div:first-child 选择器选择父元素的第一个子元素
  • div:first-of-type 选择器选择父元素的第一个同类型的子元素
  • div:nth-child(n) 选择器选择父元素的第n个子元素
  • div:nth-of-type(n) 选择器选择父元素的第n个同类型的子元素
  • div:nth-last-child(n) 选择器选择父元素的倒数第n个子元素
  • div:nth-last-of-type(n) 选择器选择父元素的倒数第n个同类型的子元素
  • div:only-child 选择器选择父元素的唯一子元素
  • div:only-of-type 选择器选择父元素的唯一同类型的子元素
  • div:empty 选择器选择没有子元素的元素
  • div:target 选择器选择当前活动的元素
  • div:enabled 选择器选择可用的元素
  • div:disabled 选择器选择不可用的元素
  • div:checked 选择器选择被选中的元素
  • div:not(selector) 选择器选择不匹配指定选择器的元素

💡简单的一个案例如下:

<!--
 * @Description: 
 * @Author: xiongxinwei 3293172751nss@gmail.com
 * @Date: 2022-09-30 21:39:09
 * @LastEditTime: 2022-09-30 21:49:17
 * @FilePath: \HTML\markdown\code\div.html
 * @Github_Address: https://github.com/3293172751/cs-awesome-Block_Chain
 * Copyright (c) 2022 by xiongxinwei 3293172751nss@gmail.com, All Rights Reserved. @blog: http://nsddd.top
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body ul li:nth-child(2n){
            /* 偶数 */
            background-color: yellow;
        }
        body ul li:nth-child(2n+1){
            /* 奇数 */
            background-color: green;
        }
        body ul li:nth-child(2n+1):hover{
            /* 奇数 */
            background-color: blue;
        }
        li:nth-child(2),li:nth-child(4){
            /* 1、4位置红色 */
            background-color: red;
        }
        
        </style>
</head>
<body>
    <ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    </ul>
</body>
</html>

image-20220930215051764

目标伪类选择器

目标伪类选择器:

  • :target 选择器选择当前活动的元素
  • :enabled 选择器选择可用的元素
  • :disabled 选择器选择不可用的元素
  • :checked 选择器选择被选中的元素
  • :not(selector) 选择器选择不匹配指定选择器的元素
div:target {
    /* 目标伪类选择器 */
    background: red;
}

选中文件的背景颜色和特性

  • div::selection 选择器选择被用户选取的元素部分
  • div::before 选择器在元素之前插入内容
  • div::after 选择器在元素之后插入内容
  • div::first-letter 选择器选择元素的第一个字母
  • div::first-line 选择器选择元素的第一行
  • div::marker 选择器选择列表元素的标记
  • div::placeholder 选择器选择元素的占位符文本
  • div::backdrop 选择器选择元素的背景
  • div::spelling-error 选择器选择拼写错误的元素部分
  • div::grammar-error 选择器选择语法错误的元素部分

💡简单的一个案例如下:

<!--
 * @Description: 选择文字 的属性
 * @Author: xiongxinwei 3293172751nss@gmail.com
 * @Date: 2022-09-30 22:12:04
 * @LastEditTime: 2022-09-30 22:15:03
 * @FilePath: \HTML\markdown\code\text.html
 * @Github_Address: https://github.com/3293172751/cs-awesome-Block_Chain
 * Copyright (c) 2022 by xiongxinwei 3293172751nss@gmail.com, All Rights Reserved. @blog: http://nsddd.top
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div::selection { 
            /* 选择文字 的属性 */
            background: #F00; 
            color: #FFF; 
        }
        div::-moz-selection { 
            /* 选择文字 的属性 */
            background: #F00; 
            color: #FFF; 
        }

    </style>

</head>
<body>
    <div>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sed deserunt reiciendis placeat voluptatibus possimus, cumque neque laborum delectus cum quam, perspiciatis accusantium magni aut sit error tenetur numquam natus ea!
    </div>
    <div>
    <!-- 清除div的默认样式使用 -->
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sed deserunt reiciendis placeat voluptatibus possimus, cumque neque laborum delectus cum quam, perspiciatis accusantium magni aut sit error tenetur numquam natus ea!
    </div>

</body>
</html>

🚀 编译结果如下:

image-20220930221543904

Ui元素状态伪类选择器

  • input:enabled 选择器匹配所有启用的 <input> 元素。
  • input:disabled 选择器匹配所有禁用的 <input> 元素。
  • input:checked 选择器匹配所有被选中的 <input> 元素。
  • input:indeterminate 选择器匹配所有不确定的 <input> 元素。
  • input:default 选择器匹配所有默认的 <input> 元素。
  • input:valid 选择器匹配所有有效的 <input> 元素。
  • input:invalid 选择器匹配所有无效的 <input> 元素。
  • input:in-range 选择器匹配所有在范围内的 <input> 元素。
  • input:out-of-range 选择器匹配所有在范围外的 <input> 元素。
  • input:required 选择器匹配所有必填的 <input> 元素。
  • input:optional 选择器匹配所有非必填的 <input> 元素。
  • input:read-only 选择器匹配所有只读的 <input> 元素。
  • input:read-write 选择器匹配所有可读写的 <input> 元素。
  • input:placeholder-shown 选择器匹配所有显示了占位符的 <input> 元素。
  • input:target 选择器匹配所有当前锚点的 <input> 元素。
  • input:root 选择器匹配所有根元素的 <input> 元素。
  • input:empty 选择器匹配所有空的 <input> 元素。
  • input:link 选择器匹配所有未访问的 <input> 元素。
  • input:visited 选择器匹配所有已访问的 <input> 元素。
  • input:active 选择器匹配所有活动的 <input> 元素。
  • input:hover 选择器匹配所有鼠标悬停的 <input> 元素。
  • input:focus 选择器匹配所有获得焦点的 <input> 元素。
  • input:lang(language) 选择器匹配所有指定语言的 <input> 元素。
  • input:dir(ltr) 选择器匹配所有从左到右的 <input> 元素。
  • input:dir(rtl) 选择器匹配所有从右到左的 <input> 元素。
  • input:enabled 选择器匹配所有启用的 <input> 元素。
  • input:disabled 选择器匹配所有禁用的 <input> 元素。

💡简单的一个案例如下:

<!--
 * @Description: UI状态伪类选择器
 * @Author: xiongxinwei 3293172751nss@gmail.com
 * @Date: 2022-09-30 21:58:57
 * @LastEditTime: 2022-09-30 22:03:28
 * @FilePath: \HTML\markdown\code\UI状态伪类选择器.html
 * @Github_Address: https://github.com/3293172751/cs-awesome-Block_Chain
 * Copyright (c) 2022 by xiongxinwei 3293172751nss@gmail.com, All Rights Reserved. @blog: http://nsddd.top
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input:enabled { 
            /* UI状态伪类选择器 */
            background: #5FF;   
        }
        input:disabled{
            /* 设置禁用状态 */
            background: #F55;
        }
        input:checked{
            /* 设置选中状态 */
            background: #FF5;
        }
        input:indeterminate{
            /* 设置不确定状态 */
            background: #F5F;
        }
        input:default{
            /* 设置默认状态 */
            background: #5F5;
        }
        input:valid{
            /* 设置有效状态 */
            background: #55F;
        }
        input:invalid{
            /* 设置无效状态 */
            background: #F55;
        }
        input:in-range{
            /* 设置在范围内状态 */
            background: #5FF;
        }
/* 
+ `input:enabled` 选择器匹配所有启用的 `<input>` 元素。
+ `input:disabled` 选择器匹配所有禁用的 `<input>` 元素。
+ `input:checked` 选择器匹配所有被选中的 `<input>` 元素。
+ `input:indeterminate` 选择器匹配所有不确定的 `<input>` 元素。
+ `input:default` 选择器匹配所有默认的 `<input>` 元素。
+ `input:valid` 选择器匹配所有有效的 `<input>` 元素。
+ `input:invalid` 选择器匹配所有无效的 `<input>` 元素。
+ `input:in-range` 选择器匹配所有在范围内的 `<input>` 元素。
+ `input:out-of-range` 选择器匹配所有在范围外的 `<input>` 元素。
+ `input:required` 选择器匹配所有必填的 `<input>` 元素。
+ `input:optional` 选择器匹配所有非必填的 `<input>` 元素。
+ `input:read-only` 选择器匹配所有只读的 `<input>` 元素。
+ `input:read-write` 选择器匹配所有可读写的 `<input>` 元素。
+ `input:placeholder-shown` 选择器匹配所有显示了占位符的 `<input>` 元素。
+ `input:target` 选择器匹配所有当前锚点的 `<input>` 元素。
+ `input:root` 选择器匹配所有根元素的 `<input>` 元素。
+ `input:empty` 选择器匹配所有空的 `<input>` 元素。
+ `input:link` 选择器匹配所有未访问的 `<input>` 元素。
+ `input:visited` 选择器匹配所有已访问的 `<input>` 元素。
+ `input:active` 选择器匹配所有活动的 `<input>` 元素。
+ `input:hover` 选择器匹配所有鼠标悬停的 `<input>` 元素。
+ `input:focus` 选择器匹配所有获得焦点的 `<input>` 元素。
+ `input:lang(language)` 选择器匹配所有指定语言的 `<input>` 元素。
+ `input:dir(ltr)` 选择器匹配所有从左到右的 `<input>` 元素。
+ `input:dir(rtl)` 选择器匹配所有从右到左的 `<input>` 元素。
+ `input:enabled` 选择器匹配所有启用的 `<input>` 元素。
+ `input:disabled` 选择器匹配所有禁用的 `<input>` 元素。

 */
    </style>
</head>
<body>
    <form action="">
    用户名<input type="text"><br>
    密码<input type="password"><br>
    记住密码<input type="checkbox"><br>
    <input type="submit" value="提交" disabled>
    <!-- disabled表示禁用 -->
</body>
</html>

🚀 编译结果如下:

image-20220930220731180

END 链接