What are CSS selectors? What are the CSS selectors?

This article brings you an introduction to what CSS selectors are? What are the CSS selectors? It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

W3School Offline Manual (2017.03.11 version) Download: https://pan.baidu.com/s/1c6cUPE7jC45mmwMfM6598A

The selector refers to the element to be modified. Commonly used selectors in CSS include HTML selector, class selector, and id selector .

HTML Selectors

The most common CSS selector is the element selector. In other words, the elements of the document are the most basic selectors.

If you style HTML, the selector will usually be an HTML element, such as p, h1, em, a, or even html itself.

For example:

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

You can switch a style from one element to another.

Suppose you decide to make the paragraph text above (instead of the h1 element) gray. Just change the h1 selector to p.

html {color:black;}h2 {color:silver;}

Class selector

In the W3C standard, element selectors are also called type selectors.

"The type selector matches the name of the document language element type. The type selector matches every instance of that element type in the document tree."

The format is as follows:

selector.classname{
　　　　property1:valu;
　　　　property2:valu;
　　　　……
　　}

For example:

p.left {font-family: sans-serif;}

id selector

When you need to style an element individually, you can use the id selector and use id to select The selector must first define an id value for the object of the design style. The id selector is unique, and the id values ​​of different elements cannot be repeated.

Example:

<p id="top"></p>

Define the style of top:

#top{
　　property1：value;
　　property2：value;
　　……
}

html

76c82f278ac045591c9159d381de2c57
3d5001d4a74c4b681850f519bcffe8a9
93f0f5c25f18dab9d176bd4f6de5d30e
a80eb7cbb6fff8b0ff70bae37074b813
b2386ffb911b14667cb8f0f91ea547a7CSS 常用选择器6e916e0f7d1e588d4f442bf645aedb2f
269ba738a29aafb66c6db71e97931089
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

8fcb895fbf6702c912ece3f561682883
4a249f0d628e2318394fd9b75b4636b1HTML选择器473f0a7621bec819994bb5020d29372a
1543e05224819c12ab8136df28db3a2ecss test94b3e26ee717c64999d7867364b1b4a3
25fdd61924ec43f68f6d130ac257deb1css test94b3e26ee717c64999d7867364b1b4a3
25fdd61924ec43f68f6d130ac257deb1css test94b3e26ee717c64999d7867364b1b4a3
25fdd61924ec43f68f6d130ac257deb1css test94b3e26ee717c64999d7867364b1b4a3

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

0923.css

h1{
    color: yellow;
}

#p1{
    color: aqua;
    font-size: 20px;
}
.p2{
      color: red;
      font-size:40px;
}

Summary: The above is this The entire content of this article is hoped to be helpful to everyone's study. For more related tutorials, please visit CSS Basics Video Tutorial, CSS3 Video Tutorial, bootstrap Video Tutorial!

The above is the detailed content of What are CSS selectors? What are the CSS selectors?. For more information, please follow other related articles on the PHP Chinese website!