css之选择器

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中允许使用