css3部分选择器整理

 

整理些选择器，加深印象和理解

标签选择器 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标签（内容包括空格）

目标选择器 <a href="#toP">hello</a>

               <p id="toP"></p>

               #top:target{color:red}

               当单击hello时定位到页内toP段落位置，并改变颜色为red

多层子标签选择器 ul li{}  表示选择ul下的所有li标签  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  表示在前后添加内容