CSS Selector

Any HTML element can be a CSS selector! 

1. General Selector

• 1.1 Multiple Selector

Multiple Selector in the CSS tab like this:

div div p {

     color: blue;

}

设置级联为div div p的段落颜色为蓝色。

• 1.2 Any Selector

The * selector apply CSS styling to every element on the page.

* {

      font-size: 20px;

}

设置HTML内所有文字字体为20px。

• 1.3 Direct Selector

Symbol >, i.e div >p, means grab <p>s are nested directly inside of <div>s.

• 1.4 "Override" Rule

Certain selector will "override" other if they have a greater specificity value. 即“对于同一个元素，具有更精确描述的selector会覆盖泛泛描述的selector”。例如，对于p而已，div p {} 会覆盖 p {} 的配置。

2. Class

Classes are useful when you have a bunch of elements that should all receive the same styling. Rather than applying the same rules to several selectors, you can simply apply the same class to all those HTML elements, then define the styling for that class in the CSS tab.

Classes are assigned to HTML elements with the word classand an equals sign, like so:

<div class="square"></div>
<img class="square"/>
<td class="square"></td>

Classes are identified in CSS with a dot (.), like so:

.square {
    height: 100px;
    width: 100px;
}

3. ID

IDs, on the other hand, are great for when you have exactly oneelement that should receive a certain kind of styling.

IDs are assigned to HTML elements with the word id and an equals sign:

<div id="first"></div>

IDs are identified in CSS with a pound sign (#):

#first {
    height: 50px;
}

4. Pseudo-class Selector

A pseudo-class selector is a way of accessing HTML items that aren't part of the document tree.

The CSS syntax for pseudo selectors is

selector:pseudo-class_selector {
    property: value;
}

It's just that little extra colon (:).

• 4.1 Links

Usefull pseudo-class selector for links:

a:link: An unvisited link.

a:visited: A visited link

a:hover: A link you're hovering your mouse over.

• 4.2 first-child

It's used to apply styling to only the elements that are the first children of their parents.

• 4.3 Nth-child

select any child of an element after the first child with the pseudo-class selector nth-child; 

p:nth-child(n) {
    color: red;
}

（完）