Question

css类中，伪类后面跟了一个 ~ 是什么意思

input:nth-of-type(1):checked ~
顺便能告诉我nth-of-type的意思吗？谢谢了

Answer 1

　　选中状态，并且包括空格也匹配

　　CSS伪类(Pseudoclasses)是选择符的螺栓，用来指定一个或者与其相关的选择符的状态。它们的形式是selector:pseudoclass{property:value;}，简单地用一个半角英文冒号(:)来隔开选择符和伪类。

　　CSS很多的建议并没有得到浏览器的支持，但有四个可以安全使用的用在连接上的CSS伪类。

　　◆link用在为访问的连接上。

　　◆visited用在已经访问过的连接上。

　　◆hover用于鼠标光标置于其上的连接。
　　◆active用于获得焦点(比如，被点击)的连接上。

　　例如：
　　a:link{color:red }
a:visited{color:green}
a:hover{color:blue}
a:active{color:orange}

Answer 2

规定属于其父元素的第二个 p 元素的每个 p：
p:nth-of-type(2){background:#ff0000;}

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.
n 可以是数字、关键词或公式。
--------------------
而～这个符号是根据部分属性值选择

如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。

假设您想选择 class 属性中包含 important 的元素，可以用下面这个选择器做到这一点：
p[class~="important"] {color: red;}

Answer 3

选中状态，并且包括空格也匹配

追问

不好意思，没怎么明白你的意思，能再明白点吗

追答

checked伪类不是选中吗？ ~是一个匹配符，匹配空格或空！

追问

不写这个~会有影响吗

追答

一般不会