How to use css pseudo-classes?
CSS pseudo-classes are used to add some special effects to selectors.
Pseudo class syntax:
selector:pseudo-class {property:value;}
CSS classes can also use pseudo classes:
selector.class:pseudo-class {property:value;}
anchor pseudo class
In browsers that support CSS, different states of the link can be displayed in different ways
Example
a:link {color:#FF0000;} /* 未访问的链接 */ a:visited {color:#00FF00;} /* 已访问的链接 */ a:hover {color:#FF00FF;} /* 鼠标划过链接 */ a:active {color:#0000FF;} /* 已选中的链接 */
Note: In the CSS definition, a:hover must be set It is only valid after a:link and a:visited.
Note: In the CSS definition, a:active must be placed after a:hover to be valid.
Note: Pseudo-class names are not case-sensitive.
Pseudo classes and CSS classes
Pseudo classes can be used with CSS classes:
a.red:visited {color:#FF0000;} <a class="red" href="css-syntax.html">CSS 语法</a>
If the link in the above example has been visited, It will appear in red.
CSS :first-child pseudo-class
You can use the :first-child pseudo-class to select the first child element of a parent element.
Note: In previous versions of IE8, must be declared so that :first-child can take effect.
Match the first
element
In the following example, the selector matches the
element that is the first child of any element:
Example
p:first-child { color:blue; }
Match the first element in all
elements
In the following example, select all
element of the element:
Instance
p > i:first-child { color:blue; }
Matches all elements within any
element that is the first child element
In the following example, the selector matches all elements within all
elements that are the first child of the element:
Example
p:first-child i { color:blue; }
CSS - :lang pseudo-class
:lang pseudo-class gives you the ability to define special rules for different languages
Note: IE8 must declare < ;!DOCTYPE> can support the ;lang pseudo-class.
In the following example, the :lang class defines the type of quotes for the q element with attribute value no:
Example
q:lang(no) {quotes: "~" "~";}
The above is the detailed content of How to use css pseudo-classes. For more information, please follow other related articles on the PHP Chinese website!

In this week's roundup: Firefox gains locksmith-like powers, Samsung's Galaxy Store starts supporting Progressive Web Apps, CSS Subgrid is shipping in Firefox

In this week's roundup: Internet Explorer finds its way into Edge, Google Search Console touts a new speed report, and Firefox gives Facebook's notification

You’re probably already at least a little familiar with CSS variables. If not, here’s a two-second overview: they are really called custom properties, you set

Building websites is programming. Writing HTML and CSS is programming. I am a programmer, and if you're here, reading CSS-Tricks, chances are you're a

Here's what I'd like you to know upfront: this is a hard problem. If you've landed here because you're hoping to be pointed at a tool you can run that tells

Picture-in-Picture made its first appearance on the web in the Safari browser with the release of macOS Sierra in 2016. It made it possible for a user to pop

Gatsby does a great job processing and handling images. For example, it helps you save time with image optimization because you don’t have to manually

I learned something about percentage-based (%) padding today that I had totally wrong in my head! I always thought that percentage padding was based on the


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

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

WebStorm Mac version
Useful JavaScript development tools

VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft

mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool