Home Web Front-end CSS Tutorial How to use attribute selectors and pseudo-class selectors

How to use attribute selectors and pseudo-class selectors

Nov 24, 2017 am 10:00 AM
Instructions Attributes Selector

Today we will tell you about the usage and related connections and differences between Attribute Selector and PseudoClass Selector. Here is a small example.

Attribute selector:

[attr~="value"] Word Word Space Word Word must be valid

[attr|="value"] Value starts with or value - Word

Note:

It is difficult to use rules expressions to identify selected elements when selecting attributes, which is more efficient

Pseudo-class Selector:

: before

: after

:lang(val) val/val-word

:nth-child(n) nfrom Starting from 1, odd base and even even number

:nth-of-type(n) selector matches every element that is the Nth child element of a specific type of the parent element.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--
<p>aaaaaaa</p>
<p>aaaaaaa</p>
<p>aaaaaaa</p>
--->
<div>
       <p>aaa</p>
       <p>aaa</p>
       <p>aaa</p>
       <p>aaa</p>
</div>
</body>
</html>
Css部分:
@charset "utf-8";
/* CSS Document */
/*
p:before{
       content:"ccc"; 
}
 
p:lang(en){
       border:1px solid #ff0000;  
}
p:nth-child(even){
       background:#F00; 
}
*/
p:nth-of-type(3){  /* p标记的父元素 下的 第3个p元素*/
       background:#F00; 
}
Copy after login

Related Read:

How to hide content that overflows a DIV

What are the techniques for CSS layout

Font styles in CSS How to set up

The above is the detailed content of How to use attribute selectors and pseudo-class selectors. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to use DirectX repair tool? Detailed usage of DirectX repair tool How to use DirectX repair tool? Detailed usage of DirectX repair tool Mar 15, 2024 am 08:31 AM

The DirectX repair tool is a professional system tool. Its main function is to detect the DirectX status of the current system. If an abnormality is found, it can be repaired directly. There may be many users who don’t know how to use the DirectX repair tool. Let’s take a look at the detailed tutorial below. 1. Use repair tool software to perform repair detection. 2. If it prompts that there is an abnormal problem in the C++ component after the repair is completed, please click the Cancel button, and then click the Tools menu bar. 3. Click the Options button, select the extension, and click the Start Extension button. 4. After the expansion is completed, re-detect and repair it. 5. If the problem is still not solved after the repair tool operation is completed, you can try to uninstall and reinstall the program that reported the error.

How to use Baidu Netdisk-How to use Baidu Netdisk How to use Baidu Netdisk-How to use Baidu Netdisk Mar 04, 2024 pm 09:28 PM

Many friends still don’t know how to use Baidu Netdisk, so the editor will explain how to use Baidu Netdisk below. If you are in need, hurry up and take a look. I believe it will be helpful to everyone. Step 1: Log in directly after installing Baidu Netdisk (as shown in the picture); Step 2: Then select "My Sharing" and "Transfer List" according to the page prompts (as shown in the picture); Step 3: In "Friend Sharing", you can share pictures and files directly with friends (as shown in the picture); Step 4: Then select "Share" and then select computer files or network disk files (as shown in the picture); Fifth Step 1: Then you can find friends (as shown in the picture); Step 6: You can also find the functions you need in the "Function Treasure Box" (as shown in the picture). The above is the editor’s opinion

What is the KMS activation tool? How to use the KMS activation tool? How to use KMS activation tool? What is the KMS activation tool? How to use the KMS activation tool? How to use KMS activation tool? Mar 18, 2024 am 11:07 AM

The KMS Activation Tool is a software tool used to activate Microsoft Windows and Office products. KMS is the abbreviation of KeyManagementService, which is key management service. The KMS activation tool simulates the functions of the KMS server so that the computer can connect to the virtual KMS server to activate Windows and Office products. The KMS activation tool is small in size and powerful in function. It can be permanently activated with one click. It can activate any version of the window system and any version of Office software without being connected to the Internet. It is currently the most successful and frequently updated Windows activation tool. Today I will introduce it Let me introduce to you the kms activation work

How to merge cells using shortcut keys How to merge cells using shortcut keys Feb 26, 2024 am 10:27 AM

How to use the shortcut keys for merging cells In daily work, we often need to edit and format tables. Merging cells is a common operation that can merge multiple adjacent cells into one cell to improve the beauty of the table and the information display effect. In mainstream spreadsheet software such as Microsoft Excel and Google Sheets, the operation of merging cells is very simple and can be achieved through shortcut keys. The following will introduce the shortcut key usage for merging cells in these two software. exist

How to use potplayer-How to use potplayer How to use potplayer-How to use potplayer Mar 04, 2024 pm 06:10 PM

Potplayer is a very powerful media player, but many friends still don’t know how to use potplayer. Today I will introduce how to use potplayer in detail, hoping to help everyone. 1. PotPlayer shortcut keys. The default common shortcut keys for PotPlayer player are as follows: (1) Play/pause: space (2) Volume: mouse wheel, up and down arrow keys (3) forward/backward: left and right arrow keys (4) bookmark: P- Add bookmarks, H-view bookmarks (5) full screen/restore: Enter (6) multiple speeds: C-accelerate, 7) Previous/next frame: D/

What is PyCharm? Function introduction and detailed explanation of usage What is PyCharm? Function introduction and detailed explanation of usage Feb 20, 2024 am 09:21 AM

PyCharm is a professional Python integrated development environment (IDE) developed by JetBrains. It provides Python developers with powerful functions and tools, making writing Python code more efficient and convenient. PyCharm supports multiple operating systems, including Windows, macOS and Linux, and also supports multiple Python versions, and provides a wealth of plug-ins and extension functions to facilitate developers to customize the IDE environment according to their own needs. P

How to use Xiaoma win7 activation tool - How to use Xiaoma win7 activation tool How to use Xiaoma win7 activation tool - How to use Xiaoma win7 activation tool Mar 04, 2024 pm 06:16 PM

I believe that many users are using the Xiaoma win7 activation tool, but do you know how to use the Xiaoma win7 activation tool? Then, the editor will bring you how to use the Xiaoma win7 activation tool. For those who are interested in this, please come to the following article Let's see. The first step is to go to "My Computer" after reinstalling the system, click "System Properties" in the upper menu, and check the Windows activation status. In the second step, click to download the win7 activation tool online and click to open it (there are many resources available everywhere). The third step is to open the Xiaoma activation tool and click "Activate Windows permanently". The fourth step is to wait for the activation process to complete activation. Step 5: Check the Windows activation status again and find that the system has been activated.

How to use magnet links - How to use magnet links How to use magnet links - How to use magnet links Mar 04, 2024 pm 04:37 PM

Are you also using magnet link software? But do you know how to use magnet links? The following is the method of using magnet links brought by the editor. Interested users can come and take a look below. The first method is relatively simple. If [PC] uses a magnet link to download, first open Thunder. Then, copy the magnet link directly. The link will be automatically detected in Thunder, and a download window will pop up. Just click to confirm the download to start the download process. Note: Some old versions of Xunlei cannot automatically detect the magnet links you copied. To use them, you need to update to the latest version of Xunlei.

See all articles