简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > CSS Tutorial > body text

How to use attribute selectors and pseudo-class selectors

php中世界最好的语言
Release： 2017-11-24 10:00:43
Original
2380 people have browsed it

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!

Related labels：
Instructions Attributes Selector
source：php.cn
Previous article：How to use CSS3 text-shadow font shadow Next article：How to use CSS3 animation properties
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
Latest Articles by Author
Latest Issues
How to list data in a section by ID using while loop in PHP? I have a mysql table with these columns: series_id, series_color, product_name In the outp...
From 2023-11-17 20:03:03
0
1
290
How to make table cell values ​​hyperlinked in Dash? (Using Plotly, Dash, Pandas, etc.) I want to set the cell value under the "JobLink" column as a hyperlink. When I c...
From 2023-11-17 18:47:10
0
1
283
Best way to preload route data before accessing the route. Before rendering the page for a given route, I want to first get the necessary data synchr...
From 2023-11-17 14:54:42
0
2
379
Vue 3 and Vuetify 3 access SCSS/SASS variables in components I want to use predefined variables in my Vue3 component. <template><divclass=&quo...
From 2023-11-17 13:52:29
0
1
293
Module is not defined in Vue project I just created a new Vue application by running npmini tvue@latest as specified in the off...
From 2023-11-17 12:38:53
0
2
394
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！