Previous exercise: Write two lists of 10 items each. The first list font is 16px and the second column font size is 20px. There are many ways to implement it, but writing code based on existing knowledge can be a lot, so today we’ll simplify your code by learning CSS selectors.

Simple selector

Select by tag name, ID, and class name. Id: indicates the attribute value of the tag ID. Class name: indicates the attribute value of the tag class.

Element selector: Selects HTML elements based on tag names, such as P, H1, div, input, and so on.

p{
 font-size:16px
}
Copy the code

Id selector: Used to select a unique element. CSS uses it preceded by # followed by the ID value.

<div id="par"></div>
#par{
 font-size:16px;
}
Copy the code

Note: ID names cannot start with a number.

Class selector: Selects HTML elements with a specific class attribute, preceded by. Symbol, followed by the class name.

<div class="par"></div>
.par{
 font-size:16px;
}
Copy the code

You can also specify a specific element. For example, the following example specifies an element on the P tag.

<div class="par"></div>
<p class="par"></p>
p.par{
 font-size:16px;
}
Copy the code

General selector (*) : Selects all HTML elements on the page. The style set affects all elements.

Composite class selectors

CSS has four different combinators:

  • Descendant selector (space)
  • Child selector (>)
  • Adjacent sibling selector (+)
  • Universal brother selector (~)

Example:

<div> <p> Contents </p> </div>Copy the code

Font-size :16px}

Div > p{font-size:16px}

Div + p{font-size:16px}

Div ~ p{font-size:16px}

Pseudo class selector

You can set mouse over, elements get focus, visited and unvisited links, and so on.

  • A: Hover over a link
  • A :link Link that is not accessed
  • A. visited B. visited C. visited D. visited
  • A: Active Selected link
  • Div :hover {} Hover over a div element. You can also control the child elements of the hover element, such as:
div:hover p{ font-size:20px } 
Copy the code

When you hover over the div, the text in the child p becomes 20 pixels.

Pseudo element selector

The pseudo-element is used to set the style of the specified part of the element, such as the first line, before, after, and so on.

For example, if we add a tick to the content of a div element, we can use a dummy element instead of an image, such as:

div::after{
content: '\2714';
color: #fff;
}
Copy the code

Div ::before{} adds the content before the element

P ::first-line Adds style or content to the first line of text

P ::first-letter adds style or content to the first letter of the text

Property selector

Styles HTML elements with specific attributes.

  • A [target]{background:red} /* Sets the background to red */, with the target attribute a tag
  • [href=”http:baidu.com”], select a tag with href=”http:baidu.com”
  • [title ~= ‘flower’]{}, select the title attribute to contain all elements of the flower
  • [class | = “top”] {}, select the class attribute elements, starting with the top must be complete and the only word, or by – separated.
  • [class^=”top”]{}, selects the element whose class attribute starts with top.
  • [class$=”top”]{}, select the element whose class attribute ends in top.
  • [class*=”top”]{}, select the element whose class attribute contains top.

CSS has a lot of selectors, cSS3 has a lot of new selectors, we’ll talk about cSS3 selectors later. The above are some of the common selectors, you can see them all in the W3C.