css选择器总结

DirtyMind 发布于2019-08-30 15:52 / 601人阅读

摘要：伪类选择器之动态伪类序号选择器名称说明版本动态伪类选择器未被访问时动态伪类选择器已被访问时动态伪类选择器鼠标以上时动态伪类选择器访问中跳转页面时动态伪类选择器获得焦点时是有顺序的，其他顺序可能无效，这是个坑。

1. 基本选择器

序号	选择器	名称	说明	css版本
1	*	通用选择器	选择所有元素，包括html和body	2
2	div,span	标签选择器	根据标签选择元素	1
3	#	id选择器	选择指定id元素	1
4	.	类选择器	选择指定class	1
5	[attr]	属性选择器	根据元素属性去选择	2-3

属性选择器的几种用法

[href] {color: red;}

[type="password"] {color: red;}

[href^="http"] {color: red;}

[href$=".cn"] {color: red;}

[href*="baidu"] {color: red;}

[class~="def"] {color: red;}// 属性值具有多值时，使用如

[lang|="en"] {color: red;}// 属性中有"-"时使用，如

示例代码：

hello world

// 蓝框大字红色

hello world

// 蓝框小字

2. 复合选择器

序号	选择器	名称	说明	css版本
1	s1,s2,s3	分组选择器	选择多个选择器的元素	1
2	s1 s2	后代选择器	指定选择器的后代元素	1
3	s1 > s2	子选择器	指定选择器的子元素	1
4	s1+s2	相邻兄弟选择器	选择相邻且之后的元素	1
5	s1~s2	兄弟选择器	选择之后的元素	2-3

3. 伪元素选择器

序号	选择器	名称	说明	css版本
1	::first-line	伪元素选择器	块级首行	1
2	::first-letter	伪元素选择器	块级首字母	1
3	::before	伪元素选择器	选择元素之前插入内容	2
4	::after	伪元素选择器	选择元素之后插入内容	2
5	::selection	伪元素选择器	光标滑动选择内容	2

4. 伪类选择器之结构性伪类选择器

序号	选择器	名称	说明	css版本
1	:root	根元素选择器	文档根元素，一般为html	3
2	:first-child	子元素选择器	第一个子元素	2
3	:last-child	子元素选择器	最后一个子元素	2
4	:only-child	子元素选择器	只有一个子元素的	2
5	:only-of-type	子元素选择器	子元素只有一种类型的	1
6	:nth-child(n)	子元素选择器	第n个子元素	2

ul > li:first-child{ // li且是第一个子元素的li元素
    color:red;
}
ul > li:last-child{// li且是最后一个元素的li元素
    color: blue;
}
span:only-child{// span且在它父元素下是唯一的span元素；建议把父元素写出来
    color: green;
}
span:only-of-type{// span且在它父元素下是唯一类型的span元素；建议把父元素写出来
    color:green;
};

5. 伪类选择器之UI选择器(input标签用)

序号	选择器	名称	说明	css版本
1	:enabled	表单元素选择器	input非disabled时	2
2	:disable	表单元素选择器	input标签disabled时	1
3	:checked	表单元素选择器	input标签checked时	2
4	:default	表单元素选择器	选择元素之后插入内容	2
5	:valid	表单元素选择器	选择元素之后插入内容	2
6	:invalid	表单元素选择器	块级首字母	1
7	:required	表单元素选择器	选择元素之前插入内容	2
8	:optional	表单元素选择器	选择元素之后插入内容	2

enabled和disable对input的大部分type都有效，除了checkbox/radio/range三个外。

checked和default不知道怎么用。貌似只在opera上有效。

valid和invalid，是表单校验时使用，自己手动添加valid和invalid属性无用，必须是inp
ut使用pattern和required校验。

6. 伪类选择器之动态伪类

序号	选择器	名称	说明	css版本
1	:link	动态伪类选择器	未被访问时	2
2	:visited	动态伪类选择器	已被访问时	1
3	:hover	动态伪类选择器	鼠标以上时	2
4	:active	动态伪类选择器	访问中跳转页面时	2
5	:focus	动态伪类选择器	获得焦点时	2

link/visited/hover/active是有顺序的，其他顺序可能无效，这是个坑。

focus用在input获取焦点时使用。

7. 伪类选择器之其他

序号	选择器	名称	说明	css版本
1	:not	动态伪类选择器	反选	1
2	:empty	动态伪类选择器	空内容	2
3	:lang	动态伪类选择器	包含lang元素	2
4	:target	动态伪类选择器	url中有target时	2

示例代码：

ul > li:not(:first-child){
    color:red;
}
ul > li:not(:last-child){
    border: 1px solid blue;
}
:empty{display:"none"}

混合云私有云选择器总结 css选择器基础选择器css css选择

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116514.html

CSS选择器总结（分类、优先级）

摘要：样式选择器权重优先级如下的权重为选择器的权重为类选择器的权重为伪类选择器的权重为属性选择器的权重为标签选择器的权重为伪元素选择器的权重为通配符的权重为综合上述权重优先级来看，正确的优先级排序应该是内联样式类伪类属性选择标签伪元素继承通配符 CSS选择器是编写CSS代码时的一个核心概念，选择器定义了相应的样式将会影响到文档中的哪些部分，以下是自己在学习及工作过程中对CSS选择器的一些总结...

hedge_hog 2019-08-29 12:22 评论0 收藏0
《DOM编程艺术》中CSS—DOM的总结（三）

摘要：前言这是系列最后一篇，本文主要总结了的用法，以及最后对函数进行抽象。一个多说无益，还是上代码来得实在还记得编程艺术中的总结一中那个无聊的根据元素在节点树里的位置来设置样式的吧现在可以用属性直接更改样式了。前言：这是CSS－DOM系列最后一篇，本文主要总结了className的用法，以及最后对函数进行抽象。－－－－－－－－－－－－－－－－－－我是分割线－－－－－－－－－－－－－－－－...

liukai90 2019-08-19 18:32 评论0 收藏0
《DOM编程艺术》中CSS—DOM的总结（三）

摘要：前言这是系列最后一篇，本文主要总结了的用法，以及最后对函数进行抽象。一个多说无益，还是上代码来得实在还记得编程艺术中的总结一中那个无聊的根据元素在节点树里的位置来设置样式的吧现在可以用属性直接更改样式了。前言：这是CSS－DOM系列最后一篇，本文主要总结了className的用法，以及最后对函数进行抽象。－－－－－－－－－－－－－－－－－－我是分割线－－－－－－－－－－－－－－－－...

王岩威 2019-08-29 10:54 评论0 收藏0
css规范总结

摘要：通用选择器，子选择器和相邻同胞选择器并不在这四个等级中，所以他们的权值都为，优先级最高，万不得已的情况下才用。规范命名风格规范文件命名统一为小写的英文字母尽量少用拼音，如。当名字需要组合时，可以采用文件名的规范。 css样式的权值(权重) 权值等级的定义第一等：代表内联样式，如: style=，权值为1000。第二等：代表ID选择器，如：#content，权值为100。第三等：代表类...

CollinPeng 2019-08-30 12:48 评论0 收藏0
css选择器总结

摘要：今天在做项目的时候，发现选择器有些遗忘。文本也属于节点选择匹配的所有元素，且匹配元素被相关指向否定伪类选择器。相邻兄弟选择器。匹配的元素，该元素位于后面相邻位置通用兄弟选择器。今天在做项目的时候，发现选择器有些遗忘。特写此文章来加深记忆，也方便自己日后回顾。通用选择器 * //有时候为了浏览器内置样式，可能会这样写。 //但一般不推荐！！！ *{ margin:0;padding:...

Bowman_han 2019-08-30 13:01 评论0 收藏0