css五大选择器,css有哪三大基本选择器

css五大选择器,css有哪三大基本选择器详细介绍

本文目录一览： css有哪三大基本选择器

1. **标签选择器（Tag Selector）**

**描述**：

标签选择器是一种用于设置HTML元素样式的强大工具。它通过指定特定的标签名称，如`p`、`div`、`h1`等，来选择当前界面中所有具有该名称的标签，并为其设置属性。

**注意点**：

* 标签选择器会选择当前界面中所有同名标签的元素。

* 它不能单独选中一个特定的元素，而是根据标签名称来批量选择。

* 几乎所有的HTML标签都可以作为标签选择器的目标。

2. **ID选择器（ID Selector）**

ID选择器是一种根据特定ID属性值来选择HTML元素的方法。通过指定一个ID，如`#id`，它能在当前界面中找到具有该ID的元素，并为其设置样式属性。

* 每个HTML标签都有一个唯一的ID属性。

* 在同一个界面中，ID必须是唯一的，不能重复使用同一个ID。

* 使用ID选择器时，必须在ID前面加上一个`#`符号。

* ID的命名有一定的规范，只能由字母、数字和下划线组成。

* ID的名称不能以数字开头，也不能与HTML标签的名称相同。

* 尽管ID选择器可以用于设置样式，但在前端开发中，ID通常更多地被用于JavaScript操作，而不是仅仅用于样式设置。

3. **类选择器（Class Selector）**

类选择器是一种根据元素的类属性来选择HTML元素的方法。通过指定一个类名，如`.class`，它能在当前界面中找到所有具有该类名的元素，并为其设置样式属性。

* 每个HTML标签都可以有多个类属性。

* 在同一个界面中，类属性是可以重复使用的。

* 使用类选择器时，必须在类名前面加上一个`.`符号。

* 类名的命名也有一定的规范，只能由字母、数字和下划线组成。

* 类名不能以数字开头，也不能与HTML标签的名称相同。

* 一个元素可以同时拥有多个类属性，这允许开发者通过组合不同的类来实现复杂的效果。例如，一个`

`元素可以同时绑定`Testparagraph`三个类属性来应用多种样式效果。

* 类选择器提供了极大的灵活性，开发者可以通过组合不同的类来实现多种样式效果和页面布局。

标签选择器类选择器id选择器？

The sequence of the marker selector, class selector, ID selector, and pseudo-class selector is as follows. The class selector, denoted by a prefix of a period (.), is used to indicate which type of selector follows. This prefix is used because it is associated with the term "class" in many programming languages. The English translation for the identifier is that the symbol represents elements with class names.

In CSS, there are priority rules:

1. Calculate the number of ID selectors in the selector (a).

2. Calculate the sum of the number of class selectors, attribute selectors, and pseudo-class selectors in the selector (b).

3. Calculate the sum of the number of tag selectors and pseudo-element selectors in the selector (c). These pseudo-classes affect priority and are found within the brackets of the selector.

An example:

:not([rel=nofollow]) - Level 1: Tag Selector

Level 2: Class Selector, Attribute Selector, and Pseudo-Class

Explanation of CSS Style Selectors:

1. Tag Selector: The name of the selector represents an HTML tag on the page. It selects all tags of that type on the page, often used to describe "commonalities" and not specific "individualities" of an element.

2. Tag Selectors (such as: body, div, p, ul, li).

3. Class Selector (such as: class="head", class="head_logo").

4. ID Selector (such as: id="name", id="name_txt").

5. Attribute Selectors: Select elements based on their attributes, for example [type=text] selects all elements with a 'type' attribute of 'text'.

6. Pseudo-Class Selectors: Select elements based on their state or position, for example 'hover' selects the style when a user hovers over an element.

Types of CSS Selectors include: Tag Name Selector, Class Selector, ID Selector, Descendant Selector, Group Selector. To create a new file with a marker selector and see the effect, a class selector, and an ID selector with their respective outcomes, please provide a code snippet.

Furthermore, CSS selectors can be broadly categorized into three types: ID selectors, Class selectors, and Tag selectors. Each type plays a crucial role in styling and formatting web pages. When writing code for such selectors, it's essential to follow the correct order and priority to achieve the desired outcome.

Note: Please provide the source code for a more detailed explanation and visual representation of the effects mentioned.