CSS伪类伪元素_html/css_WEB-ITnose
CSS选择器大致可以分成5类：基本选择器，层次选择器，属性选择器，伪类，伪元素。基本，层次，属性选择器比较容易理解，毕竟它们选择的对象都属于DOM中看得见摸得着的元素。但伪类和伪元素相对比较抽象，稍微有一点点理解上的难度。本篇就是我对伪类和伪元素的理解。
先介绍一下伪类和伪元素有什么区别？其实这是个纯概念上的问题，就算不理解也不影响实际的使用。但作为一个CSSer，概念这种东西有时候就像地基，地基越牢固，将来大厦也越坚挺。
伪类就是给既存的元素模拟新添加一个类来实现某种效果。伪元素就是模拟新添加一个元素来实现某种效果。不明白？举个例子就明白了。
用伪类:first-child将第一个p设成红色：
p:first-child {color: red}<div> <p>第一个段落</p> //我将变成红色 <p>第二个段落</p></div>等价于手动给DOM元素添加类：
.first-child {color: red}<div> <p class="first-child">第一个段落</p> <p>第二个段落</p></div>那伪元素呢？用伪元素::first-letter给第一个字设成红色：
p::first-letter {color: red}<div> <p>第一个段落</p> <p>第二个段落</p></div>如果不用伪元素，你需要多加一个元素（如span）这样来实现：
.first-letter {color: red}<div> <p><span class="first-letter">第</span>一个段落</p> <p>第二个段落</p></div>再回过头感受一下：伪类就是给既存的元素模拟新添加一个类来实现某种效果。伪元素就是模拟新添加一个元素来实现某种效果。现在我们来看看具体有哪些伪类和伪元素。
伪类：
可细分6类：动态，UI元素状态，目标，语言，结构，否定
动态伪类选择器：:link，:visited，:hover，:active，:focus。非常常用，从名字就能开出用途（事实上所有伪类选择器从名字上都能看出用途），具体就不赘述了。太基础的东西还是自行参考W3C吧
UI元素状态伪类选择器：:checked，:enabled，:disabled。常用且简单，不赘述。
目标伪类选择器：:target用来获取锚点#部分。页面实现跳转定位很多都是使用a标签的锚点来来定位。其实背后的原理是a标签的href属性能改变浏览器的location.hash，让页面在有滚动条的前提下实现页面内跳转。:target的作用就是获取跳转的目标元素，如下可以获取到id为logo的div：
<div id="logo"> …</div><a href="#logo">jump to logo</a>
语言伪类选择器：:lang根据lang属性匹配元素，如
<html lang="en"> //可在html标签上设，也可以<body lang="en">标签里设:lang(en) { …… } //根据页面的不同的语言（如英语和法语）对不同DOM元素进行处理:lang(fr) { …… }结构伪类选择器：:first-child，:last-child，:nth-child(n)，:nth-last-child(n)，:nth-of-type(n)，:nth-last-of-type(n)，:first-of-type，:last-of-type，:only-child，:only-of-type，:root，:empty。
:first-child看名字就知道了，第一个孩子。等同于:nth-child(1)。
:last-child看名字就知道了，最后一个孩子。等同于:nth-last-child(1)。
:nth-child(n)该标签是某类型，并且是父标签里第n个孩子。反之:nth-last-child就是倒数第n个孩子。
:nth-of-type(n)父标签里第n个某类型的孩子。反之:nth-last-of-type父标签里倒数第n个某类型的孩子。
:nth-child(n)和:nth-of-type(n)这两个伪类的参数n从0开始，你可以写出任意喜欢（奇葩）的公式，如n+4，-n+6，3n-2等，当结果值等于或小于0时直接被无视掉。当然最常用的还是奇数2n+1和偶数2n，因此有两个关键词odd和even。那它俩的差异在哪里呢？
例如div下有两个p，我们想将第二个p变成红色，用p:nth-child(2) { color: red; }和p:nth-of-type(2) { color: red; }都可以。但意义是不同的，前者表示该标签是p且是父标签里第二个孩子。后者表示父标签里第二个p。
现在把DOM结构变一下：div下依次有一个a，两个p。我们想将第二个p成红色，用p:nth-child(2) { color: red; }就不对了，会将第一个p（因为该标签是p且是父元素的第二个孩子）设成红色。用p:nth-of-type(2) { color: red; }才能将第二个p设成红色。
:first-of-type，:last-of-type同理可知就是父标签里第一个/最后一个某类型的孩子。等同于:nth-of-type(1)，:nth-last-of-type(1)。
:only-child父标签里仅有一个孩子。
:only-of-type父标签里唯一一个该类型的孩子。有什么用呢？例如当div里只有一张img时不浮动。当div里有多张img时，让它们从左至右依次浮动显示。你可以用div > img:only-of-type {…}，来控制当div里只有一张图片和不止一张图片时采用不同的布局
:root匹配根元素，HTML中根元素始终是html，等同于基本选择器html
:empty表示当元素里面什么都没有的时候（包括空格、标签内换行）应用相关样式，常用于高亮提示用户搜索的结果为空。例如.xx:empty { background-color: red; }，div里无内容时背景色成红色。div里有内容时无背景色。但要注意伪元素不算内容，如.xx::after { content: 'hello'; }，此时div里显示字但背景色仍旧是红色。想想也知道::before，::after是伪元素，不是真实元素，因此不会影响:empty判断。而且因为伪元素不在DOM树内，你无法取得::before, ::after伪元素生成的content。
否定伪类选择器：:not，例如不hover时显示某效果li:not(:hover)。
伪元素
用于定位文档中包含的文本，但无法在DOM树中定位。有::first-line，::first-letter，::before，::after，::selection（CSS3之前是一个冒号，CSS3后变成两个冒号，用于和伪类区分开）
::first-line，::first-letter分别是首行和首字母
::before，::after相当于在元素内部插入两个额外的标签，最适合也是最推荐的应用就是图形生成
::selection用于匹配选中的文本（注意Firefox下是::-moz-selection）。该伪元素只接受两个属性background和color
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1659
14
1415
52
1310
25
1258
29
1232
24
Is HTML easy to learn for beginners?
Apr 07, 2025 am 12:11 AM
HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
What is an example of a starting tag in HTML?
Apr 06, 2025 am 12:04 AM
AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.
HTML, CSS, and JavaScript: Essential Tools for Web Developers
Apr 09, 2025 am 12:12 AM
HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.
HTML: The Structure, CSS: The Style, JavaScript: The Behavior
Apr 18, 2025 am 12:09 AM
The roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.
The Future of HTML: Evolution and Trends in Web Design
Apr 17, 2025 am 12:12 AM
The future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.
The Future of HTML, CSS, and JavaScript: Web Development Trends
Apr 19, 2025 am 12:02 AM
The future trends of HTML are semantics and web components, the future trends of CSS are CSS-in-JS and CSSHoudini, and the future trends of JavaScript are WebAssembly and Serverless. 1. HTML semantics improve accessibility and SEO effects, and Web components improve development efficiency, but attention should be paid to browser compatibility. 2. CSS-in-JS enhances style management flexibility but may increase file size. CSSHoudini allows direct operation of CSS rendering. 3.WebAssembly optimizes browser application performance but has a steep learning curve, and Serverless simplifies development but requires optimization of cold start problems.
