时间:2021-07-01 10:21:17 帮助过:15人阅读
整理些选择器,加深印象和理解标签选择器 body{} 表示body标签类选择器 .className{} 表示类名class为className的所有标签id选择器 #idName{} 表示id为idName的所有标签属性选择器 P[id="yt"]{} 表示所有P标签,且P标签的id属性为yt开头的所有标签属性选择器 P[id^="yt"]{} 表示所有P标签,且P标签的id属性以yt开头的所有标签属性选择器 P[id$="yt"]{} 表示所有P标签,且P标签的id属性以yt结尾的所有标签属性选择器 P[id*="yt"]{} 表示所有P标签,且P标签的id属性中有yt的所有标签根选择器 :root{} 相当于整个html的所有标签否定选择器 div:not([id="yt"]){} 表示所有div标签中出去id为yt的标签空选择器 P:empty{} 表示不含有任何内容的P标签(内容包括空格)目标选择器 hello #top:target{color:red} 当单击hello时定位到页内toP段落位置,并改变颜色为red子标签选择器 ul li{}或者ul>li{} 选择ul标签下的所有li子标签首标签选择器 ul>li:first-child{} 表示从ul中选出所有li标签,再从所有li标签中选择第一个标签尾标签选择器 ul>li:last-child{} 表示从ul中选出所有li标签,再从所有li标签中选择最后一个标签任意标签选择器 ul>li:nth-child(2n+3) 表示(n始终从0开始)3 5 7....等标签(第一个标签序号为1 不是0)任意标签选择器 ul>li:nth-last-child(2n+1) 表示从末尾开始计算标签父元素下某一类标签的第一个标签 div>p:first-of-type{}父标签下某一类标签的最后一个标签 div>p:last-of-type{}父标签下某一类标签中选择部分标签 div>p:nth-of-type(2n+1){} 同上,从后向前计数 div>p:nth-last-of-type(2n+1){}.className p:only-of-type{} 表示className类中只有一个p标签的话就选中这个P标签li:only-child 表示li是其父标签的唯一子标签,就选中这个li标签可用选择器 input[type="text"]:enabled{} 表示选择输入框为可用的标签不可用选择器 input[type="text"]:disabled{} 表示选择输入框为不可用的标签选中文本选择器 ::selection{} 当选中文本时可以改变选中文本的样式只读选择器 textarea:read-only{} 表示选择属性为只读的textarea标签非只读选择器 textarea:read-write{} 表示属性为非只读的textare标签(与上一个相反)前后标签 ::before ::after 表示在前后添加内容