Home Web Front-end CSS Tutorial What are the syntaxes for selectors in CSS3

What are the syntaxes for selectors in CSS3

Nov 30, 2017 pm 12:00 PM
css3 Selector

Today I will introduce to you the commonly used selector syntax in CSS3. The syntax is generally divided into three types, basic selector syntax, hierarchical selector syntax and dynamic pseudo-class selectorgrammar. Let me give you a detailed explanation below.

1. Basic selector syntax

(1)* Wildcard selector Selects all HTML elements in the document

(2)E Element selector Select the HTML element of the specified type

#id ID selector Select any type of element with the specified ID attribute value as "id"

.class Class selector Select the specified class attribute value as "class "Any multiple elements of any type

selector1,selectorN Group selector Merge the set of elements matched by each selector

2, Hierarchical selector syntax

(1)E F Descendant selector (including selector) Selects the matching F element, and the matching F element is included in the matching E element

(2)E>F Child The selector selects the matching F element, and the child element of the E element matched by the matching F element

(3)E+F Adjacent sibling selector Selects the matching F element, And the matching F element is located immediately after the matching E element

(4)E~F​​​​​​Universal selector​​Selects the matching F element, and is located after the matching E element all matches F element

3, dynamic pseudo-class selector syntax

(1)E:link Link pseudo-class selector selects the matching E element, and the matching element is defined and the hyperlink is not been visited. Commonly used on link description points

(2)E:visited Link pseudo-class selector selects matching E elements, and the matching elements are defined with hyperlinks and have been visited. Commonly used on link drawing points

(3)E:active User behavior selector selects the matching E element, and the matching element is activated. Commonly used on link drawing points and buttons

(4)E:hover User behavior selector Selects the matching E element, and the user's mouse stays on the element E. IE6 and below browsers only support a:hover

(5)E:focus The user behavior selector selects the matching E element, and the matching element gets focus


I believe you have mastered the method after reading the above introduction. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to use H5 to create fireworks particle effects

Tutorial on making div width adaptive

Development experience using h tags in web pages

The above is the detailed content of What are the syntaxes for selectors in CSS3. 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

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

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 implement lace borders in css3 How to implement lace borders in css3 Sep 16, 2022 pm 07:11 PM

In CSS, you can use the border-image attribute to achieve a lace border. The border-image attribute can use images to create borders, that is, add a background image to the border. You only need to specify the background image as a lace style; the syntax "border-image: url (image path) offsets the image border width inward. Whether outset is repeated;".

What is the identifier of the id selector in css What is the identifier of the id selector in css Sep 22, 2022 pm 03:57 PM

In CSS, the identifier of the id selector is "#". You can specify a specific style for the HTML element marked with a specific id attribute value. The syntax structure is "#ID value {attribute: attribute value;}". The ID attribute is unique and non-repeatable in the entire page; the ID attribute value should not start with a number. IDs starting with numbers will not work in Mozilla/Firefox browsers.

Use the :nth-child(n+3) pseudo-class selector to select the style of child elements whose position is greater than or equal to 3 Use the :nth-child(n+3) pseudo-class selector to select the style of child elements whose position is greater than or equal to 3 Nov 20, 2023 am 11:20 AM

Use the :nth-child(n+3) pseudo-class selector to select the style of child elements whose position is greater than or equal to 3. The specific code example is as follows: HTML code: <divid="container"><divclass="item"&gt ;First child element</div><divclass="item"&

What to do if the javascript selector fails What to do if the javascript selector fails Feb 10, 2023 am 10:15 AM

The JavaScript selector fails because the code is not standardized. The solution is: 1. Remove the imported JS code and the ID selector method will be effective; 2. Just introduce the specified JS code before introducing "jquery.js".

Learn new CSS features: Directional clipping overflow:clip Learn new CSS features: Directional clipping overflow:clip Oct 11, 2022 pm 07:12 PM

This article will introduce a new feature, starting from Chrome 90, a new feature added to overflow - overflow: clip. Use it to easily control the overflow direction.

Do selectors in css include hypertext tag selectors? Do selectors in css include hypertext tag selectors? Sep 01, 2022 pm 05:25 PM

Not included. CSS selectors include: 1. Tag selector, which locates specific HTML elements through the element name of the HTML page; 2. Class selector, which locates specific HTML elements through the value of the class attribute of the HTML element; 3. ID selector, which Locate specific HTML elements through the value of the id attribute of the HTML element; 4. The wildcard selector "*" can refer to all types of tag elements, including custom elements; 5. The attribute selector uses the existing attribute name of the HTML element or attribute value to locate a specific HTML element.

In-depth analysis of is and where selectors: improving CSS programming level In-depth analysis of is and where selectors: improving CSS programming level Sep 08, 2023 pm 08:22 PM

In-depth analysis of is and where selectors: improving the level of CSS programming Introduction: In the process of CSS programming, selectors are an essential element. They allow us to select and style elements in an HTML document based on specific criteria. In this article, we will take a deep dive into two commonly used selectors namely: is selector and where selector. By understanding their working principles and usage scenarios, we can greatly improve the level of CSS programming. 1. is selector is selector is a very powerful choice

From beginner to proficient: Master the skills of using is and where selectors From beginner to proficient: Master the skills of using is and where selectors Sep 08, 2023 am 09:15 AM

From beginner to proficient: Master the skills of using is and where selectors Introduction: In the process of data processing and analysis, the selector is a very important tool. Through selectors, we can extract the required data from the data set according to specific conditions. This article will introduce the usage skills of is and where selectors to help readers quickly master the powerful functions of these two selectors. 1. Use of the is selector The is selector is a basic selector that allows us to select the data set based on given conditions.

See all articles