How to determine whether to use id or class selector for html elements? (example)-CSS Tutorial-php.cn

How to determine whether to use id or class selector for html elements? (example)

藏色散人

Release： 2018-08-11 15:27:11

Original

4589 people have browsed it

When we build a website, we must style the website content. So if we want to set css styles in HTML elements, where do we start? Here we need to set the id and class selectors in the HTML element. Some novice friends may ask, how to use css class? Should I use id or class for div tags?

This article will introduce to you the usage and difference between css class selector id and class. I hope this easy-to-understand description of id and class will be helpful to everyone.

1. The example of using the css class selector id code is as follows:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #p1
        {
            text-align:center;
            color:red;
        }
    </style>
</head>
<body>
<p id="p1">css定义id选择器示例</p>
<p>这一段文字就不会受影响。</p>
</body>
</html>

Copy after login

The effect is as follows:

How to determine whether to use id or class selector for html elements? (example)

2. The example of using the css class selector class code is as follows:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .p1
        {
            text-align:center;
            color: #3262ff;
        }
    </style>
</head>
<body>
<p class="p1">css定义class选择器示例</p>
<p>这一段文字就不会受影响。</p>
</body>
</html>

Copy after login

The effect is as follows:

How to determine whether to use id or class selector for html elements? (example)

3. ID Used in conjunction with class, just combine the above two methods.

What needs to be noted here is:

ID is prefixed with "#"; id can only be used once on a page;

id selector can be marked with a specific The id of the HTML element specifies a specific style.

CLASS can be referenced multiple times using "." class.

The class selector is used to describe the style of a group of elements. The class selector is different from the id selector. Class can be used in multiple elements.

So through this article’s introduction to the two selectors of css .class#id, I hope it will be helpful to novices when they are confused about whether to use class or id.

The above is the detailed content of How to determine whether to use id or class selector for html elements? (example). For more information, please follow other related articles on the PHP Chinese website!