CSS--选择符大全（常用css选择符）

（一）元素选择符

E（某个元素,如p）
id（使用id，如#idName）
class（使用class，如.myclass）
通配符：*

（二）关系选择符

包含选择符:E F（E所有的F包含子代，孙代，子子孙孙等等）
子选择符:E<F（与包含不同的是，子选择符仅限于子代）
相邻选择符:E F（和E相邻的F，相隔一个都不算）
兄弟选择符:E~F（和E同级的F的算）

（三）属性选择符:

E[att]（E中带有某个att属性的元素）
E[att="val"] (E中带有att且值为val的元素)
E[att~="val"] (E中包含att属性，中存在val值)
E[att^="val"] (E中att属性值以val开头的元素)
E[att$="val"] (E中att属性值为以val结尾的元素)
E[att*="val"] (E中att属性值为包含val字符的元素)
E[att|=="val"] (E中att属性值为val 或者是val-连接的字符串)

（四）伪类选择符

（基于元素某种特性定义的类，伪类通俗点就你不需要再自己定义class，直接使用即可）

E:link (a元素没有被访问时)
E:visited （a元素已经被访问了）
E:hover （鼠标悬浮在元素时）
E:active （鼠标点击到释放时）
E:focus （元素成为输入焦点时）
E:lang(fr) （匹配使用特殊语言）
E:not(s) （匹配没有s样式的元素E）
E:root （匹配E的根元素）
E:first-child （匹配父元素第一个子元素E）
E:last-child(css3) （匹配父元素的最后一个子元素E）
E:only-child（匹配父元素仅有的元素E）
E:nth-child(n)（匹配父元素第n个子元素E）
E:nth-last-child(n)（匹配父元素倒数第n个子元素E）
E:first-of-type（匹配同类型第一个同级兄弟元素E）
E:empty（匹配没有任何子元素（包括text节点）的E）
E:checked：（匹配处于选中状态的元素E，input的radio与checkbox）
E:enabled ：（匹配处于可用状态的元素E）
E:disabled：（匹配处于不可以状态的元素E）
E:target：（匹配相关url执行的E元素）

（五）伪对象选择符

E:first-letter （首字下沉）
E:first-line （第一行样式）
E:before （设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性）
E:after （设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性）
E::placeholder （设置input占位符的样式）
E::selection （设置文本被选择时的样式）

本篇是个人笔记，可经常看看。
向前走，也别忘记要多回顾

CSS--选择符大全（常用css选择符）相关推荐

css宋体代码_前端开发必备的CSS命名规范与常用CSS代码集合
编辑 | web前端开发来源 | web前端开发我们在用html+css进行网页的排版布局时,经常会遇到CSS命名,如果是在团队多人协作开发时,团队里都会有自己的命名规范与要求. 但如果是自己在个 ...
CSS大全_最全的常用css代码
1.字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 {font-style: o ...
[你必须知道的css系列]第一回：丰富的利器终结篇：选择符的组合关系及选择符总结...
介绍了这么多选择符,其实选择符的使用最大的优势不是单枪匹马奋斗,而应该是针对不同的页面结构组合成各种方阵.其主要方式体现在针对性使用类选择符或者 ID选择符.选择符群组及选择符组合这3种方式. 一.针 ...
【CSS选择器】CSS选择器有哪些？如何选择合适的使用？各类选择器的优劣势是什么？
我们所熟知的CSS选择器有:通用选择器.标签选择器.id选择器.类选择器.群主选择器.关系型选择器.伪类选择器--本文会详细展开介绍CSS选择器类型.优劣势及其运用. CSS选择器 1.基础选择器 c ...
css中的换行符_如何使用CSS防止项目列表中的换行符？
css中的换行符 Introduction: 介绍: Dealing with various items in CSS sometimes pose very different problems. ...
基础选择器之id选择器(CSS、HTML)
基础选择器之id选择器(CSS.HTML) <!DOCTYPE html> <html lang="en"> <head><meta ch ...
CSS基础选择器之标签选择器(CSS、HTML)
CSS基础选择器之标签选择器(CSS.HTML) <!DOCTYPE html> <html lang="en"> <head><meta ...
常用CSS元素div ul dl dt ol的简单解释
几个css元素的简单解释 div ul dl dt oldiv,这个很常见,块级元素,div尽量少用,和table一样,嵌套越少越好 ol 有序列表. <ol> <li>--& ...
怎么实现hover_写CSS动效的常用套路(附demo的效果实现与源码）
作者:alphardex https://juejin.im/post/5e070cd9f265da33f8653f0 前言本文是笔者写CSS时常用的套路.不论效果再怎么华丽,万变不离其宗. 1.交 ...
html与css结合动效案例,写CSS动效的常用套路(附demo的效果实现与源码）
作者:alphardex https://juejin.im/post/5e070cd9f265da33f8653f0 前言本文是笔者写CSS时常用的套路.不论效果再怎么华丽,万变不离其宗. 1.交 ...

CSS--选择符大全（常用css选择符）

（一）元素选择符

（二）关系选择符

（三）属性选择符:

（四）伪类选择符

（五）伪对象选择符

CSS--选择符大全（常用css选择符）相关推荐

最新文章

热门文章