What are CSS selectors? What types of css selectors are there?-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

What are CSS selectors? What types of css selectors are there?

云罗郡主

Nov 03, 2018 pm 02:44 PM

css selector

In CSS styles, they are generally composed of three parts, selectors, attributes, and attribute values. However, many CSS novices are not very familiar with CSS selectors. Let’s explain what a CSS selector is? What types of css selectors are there? [Recommended reading: Summary of 30 CSS3 selector usage]

Let’s look at a piece of code first:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>什么叫CSS选择器？</title>
</head>
<body>
    <div>php1</div>
    <div>php2</div>
    <div>php3</div>
</body>
</html>

The effect is as follows:

What are CSS selectors? What types of css selectors are there?

What if we want to set php2 to blue? We must use a way to "select" the second div, and then change its CSS attribute color to blue. Like this, change a certain element to the effect you want, and select the label you want. The method is the so-called "selector", which means that the selector is a way of selecting elements.

The so-called selector, to put it bluntly, is to use a method to select the tag you want! Only after selecting it can you operate the CSS style of this tag. That's simple enough. CSS has many ways to select the tags you need, and these different ways are different selectors.

2: What types of css selectors are there?

1. Tag selector (such as: body, div, p, ul, li)

2. Class selector ( Such as: class="head", class="head_logo")

3. ID selector (such as: id="name", id="name_txt")

4. Global selection Selector (such as: *)

5. Combine selector (such as: .head .head_logo, note that the two selectors are separated by the space bar)

6. Inherit selector (such as: div p , note that the two selectors are separated by the space bar)

7. Pseudo-class selector (for example: it is the link style, the pseudo-class of the a element, 4 different states: link, visited, active, hover.)

8. Attribute selectors for string matching (^ $ * three types, corresponding to the beginning, end, and inclusion respectively)

The above is the explanation of what is a CSS selector? A full introduction to the types of css selectors. If you want to know more about CSS3 tutorial, follow the php Chinese website.

The above is the detailed content of What are CSS selectors? What types of css selectors are there?. For more information, please follow other related articles on the PHP Chinese website!

Statement

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

如何调整HTML文本框的大小Feb 20, 2024 am 10:03 AM

HTML文本框大小的设定在前端开发中是非常常见的操作。本文将介绍如何设置文本框的尺寸，并提供具体的代码示例。在HTML中，可以使用CSS来设置文本框的尺寸。具体的代码如下：input[type="text"

如何调整WordPress主题避免错位显示Mar 05, 2024 pm 02:03 PM

如何调整WordPress主题避免错位显示，需要具体代码示例WordPress作为一个功能强大的CMS系统，受到了许多网站开发者和站长的喜爱。然而，在使用WordPress创建网站时，经常会遇到主题错位显示的问题，这对于用户体验和页面美观都会造成影响。因此，合理调整WordPress主题以避免错位显示是非常重要的。本文将介绍如何通过具体的代码示例来进行主题调

了解CSS选择器通配符的权重和优先级的深层次理解Dec 26, 2023 pm 01:36 PM

深入理解CSS选择器通配符的权重和优先级在CSS样式表中，选择器是用来指定样式应用于哪些HTML元素的重要工具。选择器的优先级和权重决定了当多个规则同时作用于一个HTML元素时，应用哪个样式。通配符选择器是CSS中一种常见的选择器。它使用“*”符号表示，表示匹配所有HTML元素。通配符选择器虽然简单，但在某些情况下非常有用。然而，通配符选择器的权重和优先级也

css选择器哪些是高级选择器Oct 07, 2023 pm 02:59 PM

css选择器中的高级选择器有后代选择器、子元素选择器、相邻兄弟选择器、通用兄弟选择器、属性选择器、类选择器、ID选择器、伪类选择器和伪元素选择器等。详细介绍：1、后代选择器使用空格分隔的选择器，表示选取某个元素的后代元素；2、子元素选择器使用大于号分隔的选择器，表示选取某个元素的直接子元素；3、相邻兄弟选择器使用加号分隔的选择器，表示选取紧接在某个元素后面的第一个兄弟元素等等。

css选择器排除部分的元素是什么Apr 06, 2024 am 02:42 AM

:not() 选择器可用于排除特定条件的元素，其语法为 :not(selector) {样式规则}。示例：:not(p) 排除所有非段落元素，li:not(.active) 排除非活动列表项，:not(table) 排除非表格元素，div:not([data-role="primary"]) 排除非 primary 角色的 div 元素。

学会使用CSS选择器的基本语法Jan 13, 2024 am 11:44 AM

掌握基本的CSS选择器语法，需要具体代码示例CSS选择器是前端开发中非常重要的一部分，它可以用来选择和修改HTML文档的各个元素。掌握基本的CSS选择器语法对于编写高效的样式表是至关重要的。本文将介绍一些常见的CSS选择器以及对应的代码示例。元素选择器元素选择器是最基本的选择器，可以通过元素的标签名来选择对应的元素。例如，要选择所有的段落（p元素），可以使用

深入学习响应式布局框架：适合初学者到专家的详尽指南Feb 19, 2024 pm 05:43 PM

响应式布局框架解析：从初学者到专家的必备指南随着移动设备的普及和多样化，响应式布局成为了现代Web设计的必备技能。响应式布局框架以其简单、灵活和可维护的特点，成为了开发者们的首选工具。然而，对于初学者来说，学习和理解响应式布局框架可能会感到有些困惑。本文将从初学者到专家，为您提供一个详细的指南，帮助您掌握响应式布局框架，同时提供具体的代码示例。什么是响应式布

CSS样式无法正常显示的解决方式Feb 24, 2024 pm 01:18 PM

CSS显示不出来怎么办，需要具体代码示例CSS（层叠样式表）是一种用于描述网页元素样式的标记语言，通过设定不同的样式规则，可以控制网页的布局、颜色、字体等外观效果。然而，有时候我们会遇到CSS显示不出来的问题，导致网页无法正常呈现所设定的样式。本文将介绍一些常见的CSS显示问题，并提供具体的代码示例来解决这些问题。引入CSS文件错误在头部（

See all articles