css之选择器
1.兄弟选择器
1.相邻兄弟选择器 相邻:与 某元素 紧紧挨在一起的元素
作用:匹配 下一个相邻元素(只能向下找不能向上找)
语法: + 作为结合符 selector1+selector2
<div>
<p></p>
<h1 class="head" id="myH1"></h1>
<p class="p1"></p> //被选中元素
</div>
h1+p{} / .head+p{} / #myH1+p{}
2.通用兄弟选择器
作用:匹配某元素后面【所有的】兄弟元素
语法:~ 作为结合符 selector1~elector2
2.属性选择器 id,class,style,title,type,name,value…
1.[attr] attr:表示任意一个元素所支持的属性
eg:
[id]:匹配页面中所有 附带 id
属性的元素
[type]:匹配页面中所有 附带 type
属性的元素
2.element[attr] element:表示页面中能够出现的任意一个元素
eg:
div[id] :匹配页面中所有 附带 id
属性的div元素
3.element [attr1][attr2…
4.element[attr=value] 匹配 页面中 attr = value 的 element
5.element[class~=value] 匹配class属性值中包含有value单独单词的元素 (value 是值列表中一个独立的 单词)
eg:
div[class~=lf btn] / div[class~=btn] 6.element[class~=value] 匹配class属性值中以value开头的元素 (value可以不是一个单词,以下同)
7.element[class$=value] 匹配class属性值中以value结尾的元素
8.element[class * =value] 匹配class属性值中含有value的元素
3.伪类选择器
1.分类
1、链接伪类
:link
:visited
2、动态伪类
:hover
:active
:focus
3、目标伪类
4、元素状态伪类
5、结构伪类
6、否定伪类
2.高级伪类
1.目标伪类 :target / element:target
2.元素状态伪类
语法:
:enabled , 匹配每个已启用的元素(非disabled)
:disabled , 匹配每个被禁用的元素(附带有disabled属性的元素)
:checked , 匹配被选中的input元素(只用在 checkbox 和 radio 上 )
3.结构伪类
语法:
1.:first-child 属于其 父元素中 的首个子元素
2.:last-child 属于其 父元素中 的最后一个子元素
3.:empty 没有子元素的每个元素 <div>fff</div>
不算
4.:only-child 其父元素中 的唯一元素
5.:nth-child(n) 其父元素中的第n个子元素
4.否定伪类 :not(selector)
4.伪元素选择器
伪元素:匹配内容
伪类:匹配元素
1.:first-letter / ::first-letter 首字符
2.:first-line / ::first-line 匹配指定选择器的首行
3.::selection 匹配被用户选取部分内容的样式
4.:before / ::before 用于匹配元素的内容区域的前端
5.:after / ::after 用于匹配元素的内容区域的后端
: 与 ::的区别
1、: 一般只用于伪类选择器
:: 一般只用于 伪元素选择器
2、在 CSS2 中 , 没有严格要求 伪元素只能用 :: 这个说法
:first-letter 在CSS2中允许使用