What are CSS selectors? What are the CSS selectors?-CSS Tutorial-php.cn

What are CSS selectors? What are the CSS selectors?

青灯夜游

Release： 2018-10-20 16:48:55

Original

4189 people have browsed it

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;}

Copy after login

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;}

Copy after login

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;
　　　　……
　　}

Copy after login

For example:

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

Copy after login

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>

Copy after login

Define the style of top:

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

Copy after login

html

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>CSS 常用选择器</title>
<link rel="stylesheet" type="text/css" href="0923.css">
</head>
<body>

<!--
id 选择器
-通过id属性值选中唯一的元素
- #id属性名{}


class 类选择器
-通过类选择器，选中一组
-.class属性名{}

-->
<h1>HTML选择器</h1>
<p id="p1">css test</p>
<p class="p2">css test</p>
<p class="p2">css test</p>
<p class="p2">css test</p>

</body>
</html>

Copy after login

0923.css

h1{
    color: yellow;
}

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

Copy after login

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!