CSS selector tidying up
Many people think CSS
is very simple, but in fact it is not easy to write CSS
well. Every point of CSS
actually has a lot of content, just take In terms of selectors, CSS
selectors can be roughly divided into five categories:
Element selector
Relationship selection
Attribute selector
Pseudo class selector
Pseudo object selector
Element Selector
Selector | Name | Description |
---|---|---|
* |
Wildcard selector | Select all elements |
E |
Element selector | Select the specified element |
#idName |
id selector | Select elements whose id attribute is equal to idName |
.className |
class selector | Select elements whose class attribute contains className |
The element selector is often used as long as you write CSS
. The content of this section is very simple, nothing Something special to say.
Relationship Selector
Selector | Name | Description |
---|---|---|
E F |
Inclusion selector | Selects all F elements contained within the E element |
E>F |
Child selector | Select all elements that are children of the E elementF |
##E+ F
| Adjacent selectorSelects the F element immediately after the E element | |
E~F
| Brother selectorSelect all brother elements F |
The child selector can only select word elements, but not grandchildren; and the inclusion selector will select all qualified descendants, including sons, grandchildren, grandchildren of grandchildren...
The adjacent selector will only select adjacent sibling elements that meet the conditions; while the sibling selector will select all sibling elements that meet the conditions, not necessarily adjacent elements.
-
In Android Browser4.2.* and below, there will be a bug when the pseudo-class selector
:checked is used together with the sibling selector, check the details. Attribute Selector
Select the E element with att attribute
|
E[att=" val"] | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Select the E element that has the att attribute and the attribute value is equal to val
|
E[att~="val"] | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Select the E element that has the att attribute and one of the attribute values is equal to val (including the case where there is only one value and the value is equal to val)
|
E [att|="val"] | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Selects the E element that has the att attribute and the attribute value is a string starting with val and separated by the connector - , if the attribute value is only is val, it will also be selected |
| E[att^="val"]||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Select the attribute with att and the attribute value is val The E element of the string starting with
|
E[att$="val"] | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
selects the att attribute and the attribute value is val The E element of the string ending in
|
E[att*="val"] | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
selects the att attribute and the attribute value contains val The E element of the string
|
Pseudo class selector
注意事项:
总结选择器用得好其实可以让我们少些很多代码。其实还有一些东西没有展开来讲,比如 Many people think
Element Selector
The element selector is often used as long as you write Relationship Selector
The child selector can only select word elements, but not grandchildren; and the inclusion selector will select all qualified descendants, including sons, grandchildren, grandchildren of grandchildren...
|

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

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

Setting the size of HTML text boxes is a very common operation in front-end development. This article explains how to set the size of a text box and provides specific code examples. In HTML, you can use CSS to set the size of a text box. The specific code is as follows: input[type="text"

How to adjust WordPress themes to avoid misaligned display requires specific code examples. As a powerful CMS system, WordPress is loved by many website developers and webmasters. However, when using WordPress to create a website, you often encounter the problem of theme misalignment, which affects the user experience and page beauty. Therefore, it is very important to properly adjust your WordPress theme to avoid misaligned display. This article will introduce how to adjust the theme through specific code examples.

In-depth understanding of the weight and priority of CSS selector wildcards In CSS style sheets, selectors are an important tool for specifying which HTML elements the style applies to. The selector's priority and weight determine which style is applied when multiple rules apply to an HTML element at the same time. Wildcard selectors are a common selector in CSS. It is represented by the "*" symbol, which means it matches all HTML elements. Wildcard selectors are simple but can be very useful in certain situations. However, the weight and precedence of wildcard selectors also

CSS selector priority is determined in the following order: Specificity (ID > Class > Type > Wildcard) Source order (Inline > Internal style sheet > External style sheet > User agent style sheet) Declaration order (latest declarations take precedence) Importance (!important forces the priority to increase)

Advanced selectors in CSS selectors include descendant selectors, child element selectors, adjacent sibling selectors, universal sibling selectors, attribute selectors, class selectors, ID selectors, pseudo-class selectors and pseudo-element selectors wait. Detailed introduction: 1. The descendant selector uses a space-separated selector to select the descendant elements of an element; 2. The child element selector uses a selector separated by a greater than sign to select the direct child elements of an element; 3. Adjacent sibling selectors use selectors separated by a plus sign to select the first sibling element immediately following an element, and so on.

The :not() selector can be used to exclude elements under certain conditions, and its syntax is :not(selector) {style rule}. Examples: :not(p) excludes all non-paragraph elements, li:not(.active) excludes inactive list items, :not(table) excludes non-table elements, div:not([data-role="primary"]) Exclude div elements with non-primary roles.

Responsive Layout Framework Analysis: An Essential Guide from Beginners to Experts With the popularity and diversification of mobile devices, responsive layout has become an essential skill for modern web design. The responsive layout framework has become the preferred tool for developers due to its simplicity, flexibility and maintainability. However, for beginners, learning and understanding responsive layout frameworks can feel a little confusing. From beginner to expert, this article provides you with a detailed guide to mastering the responsive layout framework, along with concrete code examples. What is responsive cloth

To master basic CSS selector syntax, specific code examples are required. CSS selectors are a very important part of front-end development. They can be used to select and modify various elements of HTML documents. Mastering basic CSS selector syntax is crucial to writing efficient stylesheets. This article will introduce some common CSS selectors and corresponding code examples. Element selector The element selector is the most basic selector, which can select the corresponding element by its tag name. For example, to select all paragraphs (p elements), you can use
