❤️💕💕HTML和CSS高级教程。更多的文章请移步博客Myblog:http://nsddd.top
[TOC]
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>
目标伪类选择器:
: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>
🚀 编译结果如下:
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>
🚀 编译结果如下: