What is a css selector? Summary of basic css selectors (nine types)-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

What is a css selector? Summary of basic css selectors (nine types)

不言

Jul 27, 2018 pm 04:02 PM

css selector

What is a css selector? The css selector specifies the tag that CSS should act on, and the name of that tag is the selector. Meaning: Which container to choose. Elements in HTML pages are controlled through CSS selectors. So, what are the css selectors? Let’s take a look at the commonly used selectors in css

1: css wildcard selector

The wildcard selector is represented by an asterisk (*), for example:

*{
    font-size : 12px;
}

means that the font size of all elements is 12px;

2: css group selector

When several elements have the same style attributes, you can Called together into a statement, elements are separated by commas. For example:

p, li {

line-height:20px;

color:#c00;

}

#main p, #sider span {

color:#000;

line-height:26px;

}

Using the group selector will greatly simplify the CSS code. Elements with multiple identical attributes can be merged into groups for selection, and the same CSS attributes can be defined, which greatly improves coding efficiency. It also reduces the size of CSS files.

3: css tag selector

A complete HTML page is composed of many different tags, and the tag selector determines which tags use the corresponding CSS style, for example:

p{ 
    color: red; 
}

This code will make all p tags turn red

4: css class selector

class The selector targets any element with the specified class name in the class attribute. The class selector starts with a "." symbol. For example:

.info { 
    color:black; 
}

This will change the color of all elements with the class name info. Is black

5:css ID selector

The ID selector can specify a specific style for the HTML element marked with a specific ID; the ID selector starts with a "# ” symbol begins. For example:

#demop{

    color:#000;

}

This means that the font color of the element with the id demop is set to black.

6: css pseudo-class selector

Sometimes it is necessary to apply the style of an element using other conditions outside the document, such as mouse hover, etc. At this time we need to use pseudo classes. The following is the pseudo-class definition for the linked application. For example:

a:link{
    color:green ;
    font-size: 50px
}

a:hover{
    color:pink;
    font-size: 50px
}

a:active{
    color:yellow;
    font-size: 50px
}

a:visited{
    color:red;
    font-size: 50px
}

Effect:
The label is green when the web page is opened
The label is pink when the mouse is placed on the label
The label is yellow after clicking the label
The label is red after clicking .

7: css descendant selector

The descendant selector is used to select the descendants of a specific element or element group. The selection of the parent element is placed in front, and the selection of the child element is placed first. The selection of elements is placed at the end, separated by a space. There can be more than just two elements in the descendant selector. For multi-level ancestor-descendant relationships, there can be multiple spaces to separate them. For example, if there are three elements with IDs a, b, and c, the descendant selector can be written as #a In the form of #b #c{}, as long as the selection of ancestor elements is separated by spaces before and in the middle of descendant elements. For example:

#people em{ 
    color: red; 
}

This rule sets the color of any em elements contained in elements with the ID value "people" to red.

8: css combined selector

can combine two or more types of selectors; for example:

p.info { 
    color:blue; 
}

It only Select paragraphs that belong to the info class. Other elements that belong to this class and other paragraphs that do not belong to the info class will be ignored.

9: css attribute selector

Format: Basic selector [attribute = 'attribute value']{ }, you can also just write attributes, for example:

<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
    input[type = &#39;text&#39;] {background-color: red}
    input[type = &#39;password&#39;] {background-color: pink}
</style>
</head>
<body>
    <form>
        name:<input type = "text"><br/>
        pass:<input type = "password">
    </form>

</body>
</html>

Run results:
What is a css selector? Summary of basic css selectors (nine types)

css selector priority size:

!important > Interline style>ID selection Selector> Class|Attribute Selector> Tag> Wildcard> Inheritance> Browser Default Attribute

When there are some complex selectors that cannot be selected by the priority size ratio, then we will use it Weight calculation

css selector weight calculation:

##!important Interline Style1000ID Selector100Class|Attribute|Pseudo-class selector ##10Tag selector0

Infinity



Wildcard Selector 1	Convert all selectors on each line into these values and add them up. The larger the result, the higher the priority! Recommended related articles: css class Selectors and id selectors CSS selector organization Related course recommendations: Basic video tutorial for getting started with CSS3

The above is the detailed content of What is a css selector? Summary of basic css selectors (nine types). 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

Weekly Platform News: Web Apps in Galaxy Store, Tappable Stories, CSS SubgridApr 14, 2025 am 11:20 AM

In this week's roundup: Firefox gains locksmith-like powers, Samsung's Galaxy Store starts supporting Progressive Web Apps, CSS Subgrid is shipping in Firefox

Weekly Platform News: Internet Explorer Mode, Speed Report in Search Console, Restricting Notification PromptsApr 14, 2025 am 11:15 AM

In this week's roundup: Internet Explorer finds its way into Edge, Google Search Console touts a new speed report, and Firefox gives Facebook's notification

The Power (and Fun) of Scope with CSS Custom PropertiesApr 14, 2025 am 11:11 AM

You’re probably already at least a little familiar with CSS variables. If not, here’s a two-second overview: they are really called custom properties, you set

We Are ProgrammersApr 14, 2025 am 11:04 AM

Building websites is programming. Writing HTML and CSS is programming. I am a programmer, and if you're here, reading CSS-Tricks, chances are you're a

How Do You Remove Unused CSS From a Site?Apr 14, 2025 am 10:59 AM

Here's what I'd like you to know upfront: this is a hard problem. If you've landed here because you're hoping to be pointed at a tool you can run that tells

An Introduction to the Picture-in-Picture Web APIApr 14, 2025 am 10:57 AM

Picture-in-Picture made its first appearance on the web in the Safari browser with the release of macOS Sierra in 2016. It made it possible for a user to pop

Ways to Organize and Prepare Images for a Blur-Up Effect Using GatsbyApr 14, 2025 am 10:56 AM

Gatsby does a great job processing and handling images. For example, it helps you save time with image optimization because you don’t have to manually

Oh Hey, Padding Percentage is Based on the Parent Element's WidthApr 14, 2025 am 10:55 AM

I learned something about percentage-based (%) padding today that I had totally wrong in my head! I always thought that percentage padding was based on the

See all articles