This is my second article on getting started. # the boiling point

Hi, everybody. I’m Qi Bai. For front-end engineers, the common CSS selectors are not unfamiliar to everyone, but for a part of the usual will not use the selectors, you really know enough? This series will cover selectors in CSS in two parts. The first part will cover the basics of selectors. In the next article we will look at the derivations of these selectors.

1. Wildcard selector

* represents all elements.

/* Select all elements. * /* {margin:0px;
    padding:0px
}
Copy the code

2. Element selectors

Element selectors can select all the elements of the class on the page. They are rarely used alone and are often used in combination with other selectors.

/* Select all p elements. * /
p{
    font-size:16px;
}
Copy the code

3. Class selectors

Class selectors can select elements with the same class name and are often used in combination with element selectors. Of course, it can also be used alone.

/* Select all elements with classname */
.classname{
    color:blue;
}
Copy the code

4. The ID selector

The ID selector can select elements with a value of ID.

/* Select the element with id myid */
#myid{
    background-color:yellow;
}
Copy the code

5. Property selector

An attribute selector can select an element that contains an attribute.

/* Select all elements with the width attribute */
[width]{
    background-color:yellwo;
}
Copy the code

6. Pseudo class selector

Pseudo-class selectors can select elements that satisfy a certain state.

/* Select all the elements the user is hovering over */
:hover{
    color:yellow;
}
Copy the code

7. Pseudo element selectors

A pseudo-element selector can select a portion of an element that satisfies a condition.

/* Select the first word of the element */
:first-letter{
    font-style: italic;
}
Copy the code

As far as I know, these are the most basic selectors in CSS. The reason why this article doesn’t cover sibling selectors, descendant selectors, etc., is that they are actually derived from the basic selectors. In the next article, I will cover the usage of the basic selectors in more detail. Stay tuned to the Blue ~