Id selector, class selector, property selector, and id selector attribute

Id selector, class selector, property selector, and id selector attribute

When editing a webpage, you usually need to set the style. With the help of the selector in CSS style design, we can easily manage and set them.

Today, we will share with you several common selectors: id selector, class selector, and attribute selector.

 

Id selector:Specify a specific style for the html element labeled with a specific "id" and define it.

For example, we set the color to red for the elements in the

<Style>
# Green {
Color: green;
}
</Style>
<H1 id = "green"> I am green <H2 id = "no"> I am not set, I am not green

 

Class selector:Specify a specific style for the html element labeled with a specific "class" and define it.

For example, we center the content in

<Style>
. Center {
Text-align: center;
}
</Style>

<H1 class = "center"> I am centered <H2 class = "no"> I am not set, and I am not centered

 

Attribute selector:Set styles for html elements with specified attributes.

For example, we set the color of an element with the "name" attribute to red.

<Style>
[Name] {color: red ;}
</Style>

<Table>
<Tr>
<Td> <input type = "text" name = "input" value = "hello, I am red"> </td>
</Tr>
</Table>

 

If we need to be more specific, we can do the following:

For example, set the color of an element with the "type = text" attribute to red, and set the color of an element with the "type = button" attribute to green.

<Style>
Input [type = "text"] {
Color: red;
}
Input [type = "button"] {
Color: green;
}
</Style>

<Table>
<Tr>
<Td> <input type = "text" value = "I am red"> </td>
<Td> <input type = "button" value = "I am Green"> </td>
</Tr>
</Table>

These are the simplest and most basic ones for cainiao reference only. If you directly copy my code but cannot test it, let me tell you why. I will not tell anyone.

That's because my code is directly written in the blog text editing box. If you copy it to your code editor, there may be a format problem, and your editor cannot recognize it. At this time, you 'd better not be lazy. Just repeat it and you can test it. Haha.

My personal opinions. If you have any questions, please give us more advice. We will study and make progress together.