6、CSS权威指南--选择符
1、元素选择符，文档中的元素是最基本的选择符
html { color: red; }
p { font: medium Helvetica; }
2、群组选择符
a、多个选择符之间用逗号隔开
h1 , p { color : gray; }
即对 h1 元素和 p 元素均设置颜色gray
b、 * 星号在做选择符时，被称为通用选择符，，意思是选择符匹配所有元素，很像通配符。
* { color：red }
文档上的每个元素都显示红色。
3、类选择符
应用样式、而不关心所涉及的元素，最常使用类选择符。在使用之前，要修改文档的标记，让类选择符起作用修改方式是设定class属性。
p.warning { ... }
表示类warning中的p元素被选中。
.warning.urent { ... }
表示的是选择同时具有两个类名的元素，而且对类名的顺序没有要求。
4、ID选择符
ID选择符是个散列字元（#） ， 也叫井号。
#ID-name { ... }
5、属性选择符
不管是类选择符还是ID选择符，我们选择的其实都是属性的值。在其他标记语言中，这样编写的类选择符和ID选择符可能无法使用（class 和 ID 属性或许根本不存在）。为了解决这个问题，CSS2 引入了属性选择符（attribute selector），根据属性及其值，选择元素。
属性选择符大致可以分为四类：简单属性选择符、精准属性选择符、部分匹配属性选择符和起始值属性选择符。
简单属性选择符
如果想选择具有某个属性的元素，而不管属性的值是什么、可以使用简单属性选择符。
例如，若想选择具有class属性的所 h1 元素，把文本设为银色，可以这样写：
h1[class] { color: silver; }
若是想选中所有带 class 属性的元素，则可以这样写 ： [ class ] { ... }
若想让同时具有 href 和 title 属性的HTML超链接被选中，可以这样写：
a[href][title] { ... }
当然了，也可以根据精确的属性值选择
比如：div[name="zhangsan"] { ... } 选中属性 name 为 zhangsan 的元素
可以为任何元素指定任务属性和值的组合
注意：
<div type="barren rocky">Mercury</div>
若想选中上述元素，需要写成：
[type="barren rocky"] {
background-color: black;
color: rgb(241, 248, 241);
}
如何根据部分属性值选择元素：
[foo|="bar"] {
/* 选择的元素有 foo 属性，且其值以 bar 和一个英文（U+002D）开头， 或者值就是 bar 本身 如：foo="bar-" */ color: aqua; } [foo~="bar"] { /* 选择的元素有 foo 属性，且其值是包含 bar 这个词的一组词 如：foo="sprit bar journey" */ color: blue; } [foo*="bar"] { /* 选择的元素有 foo 属性，且其值包含子串 bar 如：foo="abarabc" */ color: blueviolet; } [foo^="bar"] { /* 选择的元素有 foo 属性，且其值以 bar 开头 如：foo="sbac" */ color: rgb(222, 135, 139); } [foo$="bar"] { /* 选择的元素有 foo 属性，且其值以 bar 结尾 如：foo="cbar" */ color: red; } a[href$=".pdf" i] { /* 在结束方括号钱加 i ，属性选择符便不管文档语言的要求，匹配属性值时不区分大小写 在加上 i 之后，本例子便能匹配href属性的值以 .pdf 结尾的任何 a 元素， 且不区分 p、d、f 字母的大小 */
color: green; }
根据文档结构选择
在学习更多选择符之前，需要先理解父子关系。
理解父子关系，CSS发挥功能在很大程度上依赖于元素的父子关系，HTML 文档中的元素是一种层次结构（其实，多数结构化文档都是如此）
在文档的层次结构中，如果一个元素的位置直接宰另一个元素的上方，我们说前者是后者的父元素。反之，如果一个元素的位置直接宰另一个元素的下方，前者是后者的子元素。
“父元素” 和 “子元素” 是 “祖辈元素” 和 “后代元素” 的特例。二者之间有区别：如果两个元素所在的层级是连续的，它们之间是父子关系；如果两个元素之间跨两个层级以上，它们之间是祖辈和后代的关系，而不是父子关系。
body 元素是浏览器中默认显示的所有元素的祖辈，而 html 是整个文档的祖辈，鉴于此，HTML 或 XML 文档中的 html 元素也被称为根元素（root element）。
6、后代选择符
后代选择符，又叫上下文选择符。在后代选择符中·，规则中的选择符由两个或多个空格分隔的选择符构成。选择符之间的空格是一种连结符。
<!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>后代选择符</title> <style> /* 根据上下文选择后代元素 */ div em , div i{ /* 根据上下文选择元素,会忽视元素的距离（可以跨越层级） */ color: rgb(236, 195, 10); } div:not(.help) span { /* class 属性中不包含 help 这个词的 div 元素中的 span 元素显示为灰色 */ color: gray; } div.help span { /* class 属性中包含 help 这个词的 div 元素中的 span 元素显示为红色 */ color: red; } /* 选择子元素。而非单纯的后代元素 */ div > strong { /* 选中 div 元素直接子代中的 strong 元素。大于号在这里被称作子代连结符 */ color: blue; } /* 选择紧邻同胞元素，若想选中同一个父元素中紧跟在另一个元素后面的一个元素，要使用紧邻同胞连结符，即“+”号 */ h3 + p { color: cadetblue; /* "+" 号与 “>" 的区别就是前者是只选择相邻的一个符合要求的兄弟元素(一定要相邻），而后者是选中父级元素的所有符合要求的子级元素 */ } /* 选择后续同胞，同胞连结符，即波浪号 “~” */ h5 ~ol { /* 选中所有符合要求的兄弟元素 ，不论是否相邻*/ color: coral; list-style: none; } </style> </head> <body> <div><em>根据上下文选择元素</em></div> <div><p><i>中间隔了 p 元素，依旧被选中</i></p></div> <div class="help"> <span>class 属性中包含 help 这个词的 div 元素中的 span 元素显示为红色</span> </div> <div class="fight"> <span>class 属性中不包含 help 这个词的 div 元素中的 span 元素显示为灰色</span> </div> <div> <strong>选择子元素，字体显示蓝色1</strong> <br> <strong>选择子元素，字体显示蓝色2</strong> </div> <div> <p> <strong>选择子元素，字体不显示蓝色</strong> </p> </div> <div> <h3>选择紧邻同胞元素</h1> <p>选择紧邻同胞元素1</p> <br> <p>选择紧邻同胞元素2</p> </div> <div> <h5>选中 h5 的所有叫 ol 的兄弟元素，不必紧邻</h5> <ol> <li>后续同胞1,改变字体颜色</li> </ol> <p>"+" 选择紧邻的一个符合要求兄弟元素， 而 “~” 号选择的是所有符合要求的兄弟元素，不一定是紧邻 </p> <ol> <li>后续同胞2，改变字体颜色</li> </ol> </div> </body> </html>
7、伪类选择符
讲到伪类选择符，事情就变的有趣了。利用这种选择符可以为文档中不一定真实存在的结构指定样式，或者为某些元素（甚至文档本身）的特定状态赋予幽灵类。
幽灵类，听起来有点古怪，却是理解伪类的最好方式。
a、拼接伪类：
CSS允许把伪类拼接（串联）在一起，例如，可以把有鼠标悬停其上的、未访问链接，显示为红色，把有鼠标悬停其上的、已访问链接显示为红褐色：
a:link:hover { color: red; }
a:visited:hover { color: maroon; }
拼接伪类的顺序其实没什么先后关系，也可以写成 a:hover:link ，它的效果与 a:link:hover 一样。此外还可以为其他语言（如德语）下的未访问链接和已访问链接指定悬停样式：
a:link:hover:lang(de) { color: gray; }
a:visited:hover:lang(de) { color: silver; }
注意：别拼接互相排斥的伪类。例如，链接不可能既是已访问，又是未访问，这样什么也匹配不了。
b、结构伪类
伪类大多数是结构上的，即它们指代文档中的标记结构。所有伪类无一例外，都是一个冒号（ ：） 后面跟着一个词，而且可以出现在选择符的任何位置。需要明确一点：伪类始终指代所依附的元素。
结构伪类的简单由此体现： :root 伪类选择文档的根元素，在HTML中，根元素始终是 html 。当然了，在HTML文档，可以直接选择 html 元素，而不使用 :root 伪类。（但二者的特制度是有区别的）
选择空元素： 使用 :empty 伪类可以选择没有任何子代的元素。 它是CSS唯一 一个匹配时考虑文本节点的选择符。
你也许想使用它匹配所有空元素，但是这里有一个陷阱，那就是 :empty 是匹配 HTML 文档中的空元素，例如 img 和 input ， 但是还能匹配里面没有内容的 textarea 。就匹配效果而言，img 和 img:empty 其实是一样的。
选择唯一的子代：如果想选择带超链接的图像，可以使用 :only-chile 伪类。它选择的元素是另一个元素的唯一子元素，匹配没有任何兄弟元素的元素。（只匹配独生子女）
使用 :only-child 伪类，有两点需要注意。一、它始终依附在希望是唯一子元素的那个元素上，而不是父元素。二，由一可以引出，在后代选择符上使用 :only-chile 伪类时，列出的元素不一定是父子关系。
<!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>伪类</title> <style>
/* 匹配唯一的元素 */ .d1 b:only-of-type {color: rgb(255, 0, 0);} .d1 p:only-of-type {color: rgb(255, 0, 0);} .d1 span:only-child {color:rgb(255, 0, 0);} /* 选择第一个或最后一个子代 */ #ol-1 :first-child {color: red;} #ol-1 :last-child{color: red;} #ol-2 li:first-child {color: red;}/* 在#ol1子代中检查第一个元素，如果第一个元素是 li 元素，则匹配 */ #ol-2 li:last-child{color: red;} /* :first-child:last-child 两个伪类结合在一起相当于 :only-child */ i:last-child {color: rgb(206, 12, 12);}/* 如果一个 i 元素在兄弟元素中是最后一个，则匹配 */ /* 所以，只要这个元素在兄弟元素中是最后一个，则匹配 */ ol:last-child {/* 将匹配 #ol-3 和 #ol-3 ol */ color: aquamarine; } /* 匹配第一个或最后一个指定元素类型的元素 */ .d2 em:first-of-type{color: red;} .d2 em:last-of-type{color: aqua;} /* 选择每第 n 个子元素 伪类 :nth-child(an + b) ，匹配起点为 b ，递增 a 的所有元素 */ #ul-1 :nth-child(1) {color: aqua;} /* 起点为 1 ， a 为 0 ，无递增，所以选中第一个 */ #ul-1 :nth-child(2n) {color: rgb(255, 0, 98);}/* 2n 可用 even 替代，表示匹配偶数位置元素，odd 则表示匹配奇数位置元素 */ #ul-1 :nth-child(-n+3) {font-size: 26px;} /* 起点为3，a为负数，即向数字小的方向匹配，所以匹配1-3 */ #ul-1 :nth-child(2n-1) {border: rgb(206, 12, 12) solid 1px;} /* b为负数 */ #ul-1 :nth-last-child(1) {border-radius: 8px;} /* 作用与:nth-child()一样，只不过是从一组同胞的最后一个元素开始，从后向前计算 */ /* 选择第 n 个某种元素 :nth-of-type() :nth-last-of-type() 匹配指定的元素类型，正方向查找和反方向查找 */ #d3 p:nth-of-type(1) {font-size: 26px;} #d3 p:nth-of-type(even) {color: rgb(10, 247, 168);} #d3 i:nth-last-of-type(1) {font-size: 36px;} #d3 i:nth-last-of-type(odd) {color: royalblue;} </style> </head> <body> <div class="d1"> <!-- :only-of-type 匹配同胞中唯一的那种元素 --> <!-- 而 :only-child 只匹配完全没有同胞的元素 --> <b>不被匹配</b> <b>不被匹配</b> <!-- div 有两个 b 元素，所以使用 :only-of-type 不会被匹配 --> <p>被匹配</p> <!-- div 只有一个 p 元素，所以，能被 :only-of-type 匹配 --> <span>不被匹配</span> <!-- span 有兄弟元素， 所以不会被 only-chile 匹配 --> </div> <!-- 选择第一个或最后一个子代 --> <ol id="ol-1"> <li>第一个</li> <li>第二个</li> <li>最后一个 li </li> </ol> <ol id="ol-2"> <i>i 元素 1 </i> <li>第一个</li> <li>第二个</li> <li>最后一个 li </li> <i>i 元素 2 </i> </ol> <ol id="ol-3"> <li>如果这行颜色也被修改，说明 #ol3 被匹配</li> <ol>最后一个 ol 元素</ol> </ol> <!-- 匹配第一个或最后一个指定元素类型的元素 --> <div class="d2"> <span>不被匹配</span><br> <em>被匹配</em><br> <em>不被匹配</em><br> <em>被匹配</em><br> <span>不被匹配</span> </div> <!-- 选择每第 n 个子元素 伪类 :nth-child(an + b) --> <ul id="ul-1"> <li>:nth-child(1)</li> <li>二</li> <li>三</li> <li>四</li> <li>五</li> </ul> <!-- 选择第 n 个某种元素 :nth-of-type() :nth-last-of-type() --> <div id="d3"><!-- 匹配偶数位 p 元素 ， 匹配奇数位 i 元素 --> <p>第一个 p 元素，字体被设置为26px</p> <i>倒数第四个 i 元素</i> <p>第二个 p 元素</p> <p>第三个 p 元素</p> <i>倒数第三个 i 元素</i><br> <i>倒数第二个 i 元素</i> <p>第四个 p 元素</p> <i>倒数第一个 i 元素，字体被设置为36px</i> </div> </body> </html>
c、动态伪类：
除了结构伪类之外，还有一些与结构有关的伪类。不过它们在页面渲染之后根据页面的变化而变化
超链接伪类：:link 和 :visited 这两个伪类用在具有 href 属性的 a 元素上。
用户操作伪类：:focus 指代当前获取输入焦点的元素
:hover 指代鼠标指针放置其上的元素
:active 指代由用户输入激活的元素
与 :link ， :visited 一起， 这些伪类通常用于超链接。而且他们的顺序不是随意的。推荐顺序是：link visited focus hover active 。
注意：动态伪类可以用在任何元素，并不局限于 a 元素。比如使得一个 input 元素在获得焦点时发生改变， 或者在鼠标放在一个元素上时实现“突出显示”效果。
d、UI 状态伪类：
这些伪类根据用户界面元素（例如复选框）的当前状态应用样式。
启用和禁用的 UI 元素：我们可以把一个用户界面元素（或一组用户界面元素）标记为禁用的。禁用的元素也能显示出来，但是无法选择、激活或与用户交互。
若想把元素设为禁用的，可以使用 DOM 脚本，也可以在 HTML5 元素的标记中添加 disable 属性。
选择状态：除了启用和禁用之外，某些 UI 元素还可以选中或不选。复选框和单选框就是这种。
默认选项伪类：:default 伪类匹配一组相似元素中、取默认值的 UI 元素。
可选性伪类：:required 伪类匹配必填的表单控件，这一要求由 required 属性指定。:optional 伪类匹配没有 required 属性的表单控件，或者 required 属性的值为 false 的控件。
若想提交表单，表单中匹配 :required 的元素必须有值，匹配 :optional 的元素可有值，也可没有值。
范围伪类：范围伪类有两个 :in-range ， :out-of-range 。前者表示用户输入的值在 HTML5 的 min 和 max 属性设定的最小值和最大值范围之内，而后者表示用户输入的值小于控件接受的最小值或最大值。
可变性伪类：可变性伪类有 :read-write 和 :read-only 两个，前者表示输入框可由哟经胡编辑，而后者匹配不能编辑的输入框。只有能被用户编辑的元素才能匹配 :read-write 。
在 HTML 中，未禁用的非只读 input 元素，以及设定了 contenteditable 属性的元素匹配 :read-write 。其他所有元素匹配 :read-only 。
target伪类： :target伪类用来改变页面中锚链接URL所指向的ID元素的样式（即修改以锚链接为 ID 的元素的样式）
:lang() 伪类：如果想根据文本使用的语言选择元素，可以使用 :lang() 伪类，在匹配方式上， :lang() 伪类与 |= 属性选择符类似。
在 HTML 中，语言可以通过 lang 属性判断，也可以通过 meta 元素和协议（HTTP首部）判断。
:lang 伪类可以使用各种信息，而 |= 属性选择符只能用于标记中有 lang 属性的元素。因此，伪类比属性选择符更可靠，多数情况下是装饰特定语言的理想之选。
否定伪类：选择不满足条件的元素，使用否定伪类 :not() ， :not() 伪类依附在元素上， 括号中是简单的选择符， 根据W3C的定义，简单的选择符指一个类型选择符、
通用选择符、属性选择符、类选择符、ID 选择符 或 伪类。定义中的“或”字，它的意思是 :not() 伪类中只能使用其中一个选择符。
不能使用群组选择符，也不能使用连结符，因此不能使用后代选择符，因为后代选择符中分隔元素的空格是连结符。
8、伪元素选择符
伪元素与伪类很像，为了实现特定的效果，它在文档中插入虚构的元素。伪类使用一个冒号，而伪元素使用两个冒号，例如： ::first-line ， 这么做是为了把伪元素与伪类分开。
a、装饰首字母： ::first-letter 用于装饰任何非行内元素的首字母，或者开头的标点和首字母。
b、装饰首行： ::first-line 用于装饰元素的首行文本。
c、对 ::first-letter 和 ::first-line 的限制：目前这两个伪元素只能应用到块级元素上，不能应用到行内元素上。并且二者可使用的 CSS 属性也是有限制的。
d、使用CSS可以插入生成的内容，生成的这些内容，可以直接使用 ::before 和 ::after 伪元素进行装饰。
<!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>伪类</title> <style> /* 超链接伪类 :link :visited 只作用在具有 href 属性的 a 元素上 */ .d1 :link {color: red;} /* 未被访问时应用规则 */ .d1 :visited {color: green;} /* 被访问后应用规则 */ .d2 a:link , .d2 a:visited {font-size: 13px;} .d2 a:hover , .d2 a:active {font-size: 20px;} /* UI 状态伪类 这些伪类根据用户界面元素（例如复选框）的当前状态应用样式 */ /* :enabled 指代启用的用户界面元素（例如表单元素），即接受输入的意思 :disabled 指代禁用的用户界面元素（例如表单元素），即不接受输入的元素 :checked 指代由用户或文档默认选中的单选按钮或复选框 :indeterminate 指代既未选中也没有未选中的单选按钮或复选框；这个状态只能由DOM脚本设定，不能由用户设定。 :default 指代默认选中的单选按钮、复选框或选项 :required 指代必须输入值的输入框 :optional 指代无需一定输入值的输入框 :valid 指代满足所有数据有效性语义的输入框 :invalid 指代不满足所有数据有效性语义的输入框 :in-range 指代输入的值在最小值和最大值之间的输入框 :out-of-range 指代输入的值小于控件允许的最小值或大于控件允许的最大值的输入框 :read-write 指代可由用户编辑的输入框 :read-only 指代不能由用户编辑的输入框 虽然 UI 元素的状态能被用户操作改变，例如用户勾选或不勾选一个复选框， 但是 UI 状态伪类不是单纯动态的，因为它们还受到文档结构或 DOM 脚本的影响 */ form input {width: 560px;height: 38px;} form input:nth-of-type(1):enabled {width: 360px;height: 38px; } /*没设置属性 disabled ，禁止输入无效,即伪类 :disabled 指代设置 disabled 属性的元素 */ form input:nth-of-type(2):disabled {background-color: rgb(206, 202, 202);} form input:nth-of-type(3) {color: red;} /* checked , indeterminate , default */ .d3 ul li:first-child input:checked+span {color: blue;} /* checked 指代被选中的 input 元素 */ .d3 ul li:nth-child(2) input:checked+span {color:red;} .d3 ul li:nth-child(3) input:checked+span {color: gray;} .d3 ol li :only-child:checked::after { color: red; display:block; width: 160px; margin-left: 26px; content: '我被选中了~~'; } /* :not(:checked)指代未被匹配的元素 */ .d3 ol li :only-child:not(:checked)::after { display: block; width: 160px; color: blueviolet; margin-left: 26px; content: "我没被选中"; } /* indeterminate 表示状态不确定的表单元素。 不确定状态存在的目的是从视觉上提示用户需要选中（或不选）某个元素。不过要注意， 这只是视觉上的效果，对 UI 元素底层的状态没有影响。 元素的底层状态只能是选中或未选中，这取决于文档标记和 DOM 脚本。 */ /* default 元素添加 checked 属性 ，表示默认被选中的项，用伪类 :default 指代 */ .d4 li:nth-child(2) input:default+span {color: blueviolet;} /* 可选性伪类 :required :optional */ .d5 input:required {background-color: aqua; width: 520px;} .d5 input:optional {background-color: rgb(240, 174, 174);} /* 有效性伪类 :valid :invalid */ .d6 input:valid {background-color: aquamarine;} .d6 input:invalid{background-color: gainsboro;} /* 范围伪类 :in-range :out-of-range step属性 */ .d7 input {width: 260px;} .d7 input:first-child:in-range{background-color: beige;} .d7 input:first-child:out-of-range{background-color: aquamarine;} .d7 input:first-child:invalid {border-radius: 8px;} /* 如果一个值不符合 step 要求，那么所在的元素可以匹配 :invalid ， 如果超出范围，可以匹配 :out-of-range */ .d7 input:last-child:invalid {border: 2px solid red;} .d7 input:last-child:out-of-range {border-radius: 8px;} /* 可变性伪类 :read-write :read-only */ .d8 :nth-child(1):read-write {background-color: gray;} .d8 :nth-child(2):read-write {background-color: green;} .d8 :nth-child(2):read-only {color: red;} .d8 textarea:read-write {background-color: antiquewhite;} .d8 pre:read-write {color: purple;} /* 未能匹配 */ .d8 pre:read-only {border: 2px solid purple;} /* target 伪类 URL 片段标识符指向的目标元素可以使用 :target 伪类特别装饰 */ /* 片段标识符由 # 符号标记 */ .d9 div:target{color: rgb(7, 149, 192);} /* :lang 伪类 如果想根据文本使用的语言选择元素，可以使用 :lang() 伪类， 在匹配方式上，:lang() 伪类与 |= 属性选择符类似 需要在要修改是元素上添加 lang 属性，属性值 = :lang() 伪类括号内的值 */ .d10 :lang(hans) {color: red;} .d10 :lang(english) {color: rgb(8, 240, 66);} /* 否定伪类 :not() */ .d11 :not(:last-child) {color: red;} .d11 :not(i) {font-size: 32px;} .d11 :not(p em) {color: green;}/* 权威指南说不能使用空格连结符，但这里有效匹配，是否已修改使用规则？ */ /* 否定伪类不能嵌套 p:not(:not(p)) 是无效的 */ /* 伪元素选择符 （在文档中插入虚构的元素，一种无名元素，你去设置它的各种属性样式） 所有伪元素只能出现在选择符的最后，不能出现在选择符的主词之前。 （主词是选择符中的最后一个元素），这也表明一个选择符只能有一个伪元素， 不过将来可能会取消这一限制。 */ .d12 :first-child::before {content: "这是添加在 p 元素之前的文本";} .d12 ::before{color: rgb(255, 187, 0);} /* ::before伪元素除了创建新的元素，还能对已添加的伪元素进行匹配 */ .d12 :first-child::after {content: "这是添加在 p 元素之后的文本"; color: red;} .d12 :nth-child(2)::first-letter {color: orange; font-size: 32px;} .d12 :last-child::first-line {color: darkviolet; font-size: 32px;} </style> </head> <body> <!-- :link 指向尚未访问的地址； :visited 指向已访问地址的超链接，出于安全考虑，能应用到已访问链接上的样式已十分有限。 --> <div class="d1"> <a href="https://developer.mozilla.org/zh-CN/docs/Web" target="_blank">有href属性1</a><br> <a href="https://www.runoob.com/cssref/css-reference.html" target="_blank">有href属性2</a><br> <a>无href属性，所以不会被匹配</a> <p href="hr">具有 href 属性的非 a 元素不会被匹配</p> </div> <!-- 鼠标悬停和点击的时候，字号增大，可能导致链接后面的内容重排 --> <div class="d2"><a href="https://www.baidu.com/?tn=49055317_40_hao_pg&H123Tmp=nunew11" target="_blank">百度一下</a></div> <br><br> <!-- UI 状态伪类 这些伪类根据用户界面元素（例如复选框）的当前状态应用样式 --> <form action=""><!-- disabled --> <input type="text" value=":enabled 允许在输入框内进行输入"><br> <input type="text" value=":disabled 禁止在输入框内输入，未设置属性 disabled（无效）"><br> <input type="text" disabled="disabled" value=":disabled 禁止在输入框内输入，设置属性disabled=disabled"> <input type="text" disabled="disabled" value="不设置伪类，单纯设置属性disabled=disabled，也能实现禁止输入效果"> <!-- 若想把元素设为禁用的，可以使用 DOM 脚本，也可以在 HTML5 元素的标记中添加 disable 属性。 --> </form> <!-- checked , indeterminate , default --> <div class="d3"> <ul> <li><label for=""><input type="radio" name="colour-group" value="0" /><span>蓝色~~</span></label></li> <li><label for=""><input type="radio" name="colour-group" value="0" /><span>红色~~</span></label></li> <li><label for=""><input type="radio" name="colour-group" value="0" /><span>灰色~~</span></label></li> </ul> <ol> <li><input id="init" type="checkbox"></li> <li><input type="checkbox"></li> <li><input type="checkbox"></li> </ol> </div> <!-- indeterminate --> <!-- default --> <a href="https://demo.cssworld.cn/selector/9/2-6.php">:indeterminate伪类与复选框半选状态实例页面</a> <div class="d4"> <ul> <li><label for=""><input class="input" type="radio" name="colour-group" value="0" /><span>蓝色~~</span></label></li> <li><label for=""><input checked type="radio" name="colour-group" value="0" /><span>添加 checked 属性，默认被选中</span></label></li> <li><label for=""><input type="radio" name="colour-group" value="0" /><span>灰色~~</span></label></li> </ul> <ol> <li><input class="input" type="checkbox"></li> <li><input checked type="checkbox"><span>添加 checked 属性，默认被选中</span></li> <li><input type="checkbox"></li> </ol> </div> <script> let inputs = document.getElementsByClassName('input'); inputs[0].indeterminate = true; inputs[1].indeterminate = true; </script> <!-- 可选性伪类 :required :optional --> <div class="d5"> <input type="email" required><br> <!-- 在页面布局时经常会用到input输入框，有时为了提示用户输入正确的信息，需要用placeholder属性加以说明。 --> <input type="email" placeholder="email address"><br> <input type="email" required="false" value="只要设置了required 属性，就会被伪类 :required 匹配,即使属性值设置为 false"> <!-- required 属性值为 false 表示输入框是可填也可不填 --> </div> <!-- 有效性伪类 :valid :invalid --> <div class="d6"> <input type="email" value="12345@qq.com"> <input type="email" value="不符合 email 格式"> </div> <!-- 范围伪类 :in-range :out-of-range step属性 --> <div class="d7"> <input type="number" min="0" max="100"> <input type="number" min="0" max="100" step="2"> </div> <!-- 可变性伪类 :read-write :read-only --> <div class="d8"> <input type="text"> <input type="text" disabled value="只读，字体变红色"><br> <textarea cols="60" rows="3" >textarea元素是可读可写的</textarea> <pre> pre 元素是只读的 </pre> </div> <!-- :target 伪类 --> <div class="d9"> <a href="#monkey-king">(点击)孙悟空</a> <a href="#greedy-pig">（点击）猪八戒</a> <a href="#the-tang-monk">（点击）唐僧</a> <div id="monkey-king">齐天大圣</div> <div id="greedy-pig">天蓬元帅</div> <div id="the-tang-monk">金蝉子</div> </div> <!-- :lang() 伪类 --> <div class="d10"> <span lang="hans">中文</span> <span lang="english">English</span> </div> <!-- 否定伪类 :not() --> <div class="d11"> <span>红色文字</span> <span>默认颜色文字</span> <p><em>不会被匹配？</em></p> </div> <!-- 伪元素选择符 --> <div class="d12"> <p> 在html的标签中，系统会给每个标签都加上两个伪元素, 即：开始：< before >,结束：< after > </p> <p>Are you ready to go</p> <p>装饰首行，不管显示区域有多宽或多窄都是这样， 如果首行只包括一段的前五个词，那就只有这五个词被装饰，如果首行包含三十个词， 那么钱三十个都将被装饰。(试着调整浏览器窗口宽度) </p> </div> </body> </html>
