CSS named some plus #, some dot, some do not add. Excuse me, under what circumstances is it used?

"nav{}"
Such a style is used to define the style of a particular label directly, the style name is corresponding to the label, for example, I want to set the <p></p> this tag style, then I can directly write: p{style}, but this does not specifically refer to a tag, It refers to the style of all <p> tags in the page, so, using this method, so long as your page has <p> this tag, then their style is a unified style;
The style of ". nav{}", which is preceded by ".", is that the style is called by the class, that is, the container uses class to invoke this style, which can be repeatedly called by multiple different containers without limitation, belonging to the common style;
The "#" style of " #nav {}" is called by ID, which is called by the container using id= "#nav", which is a one-time, proprietary style, that is, the style can only be called once for a specified container, and other containers cannot call this style again. Can not be called multiple times, belonging to the private style;
"Tips on calling Styles"
As an example:
<div class= "demo1" id= "Demo2" > Example one </div>
<div class= "demo1" id= "Demo3" > Example II </div>
<div class= "Demo4" id= "Demo5" > Example three </div>

This is two div, the container can use both class and ID call style, the advantage is that you can put the common style of the two div in the class style, and the different styles can be placed in the ID style, so as to avoid repeated write a lot of the same code caused by redundant situation occurs!
example one of the required style is red, Arial, example two is black, Arial, and these three examples need to be horizontally centered display, then they have in common is both example one and example two need italicized word, three examples to be centered, then you can write the style:
<style>
<!--
. demo1{font-family: "Arial";}/* italicized word */
#demo2 {color:red;}/* Red color * /
#demo3 {color:black;}/* Black * /
div{margin:0 Auto;}/* Centers all the div in the page * /
-
</style>
This avoids repeated writes of many duplicate codes that do not need to be written multiple times.

CSS named some plus #, some dot, some do not add. Excuse me, under what circumstances is it used?