Home > Web Front-end > CSS Tutorial > Introduction to CSS Id and Class selectors

Introduction to CSS Id and Class selectors

零下一度
Release: 2017-05-15 11:54:11
Original
1706 people have browsed it

id and class selectors

If you want to set CSS styles in HTML elements, you need to set "id" and "class" in the element Selector.

id selector

The id selector can specify a specific style for HTML elements marked with a specific id.

The HTML element uses the id attribute to set the id selector, and the id selector in CSS is defined with "#".

The following style rules apply to the element attribute id="para1":

Example

#para1
{
text-align:center;
color:red;
}
Copy after login

The ID attribute should not start with a number. IDs starting with a number are browsed in Mozilla/Firefox does not work in the device.

class selector

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.

The class selector is represented by the class attribute in HTML. In CSS, the class selector is displayed with a dot ".":

In the following example, all objects with the center class HTML elements are all centered.

p.center {text-align:center;}
Copy after login

The first character of the class name cannot use numbers! It won't work in Mozilla or Firefox.

【Related Recommendations】

1. Special Recommendation:"php Programmer Toolbox" V0.1 version Download

2. Free css online video tutorial

3. php.cn Dugu Jiujian (2)-css video tutorial

The above is the detailed content of Introduction to CSS Id and Class selectors. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template