Label selector
It is to directly select the same label for attribute setting (such as body, div, p, ul, li), for example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标签选择器</title>
<style>
p
{
color:red;
text-align:center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>这个段落采用CSS样式化。</p>
</body>
</html>
id selector
The id selector in CSS is defined by "#", and the id attribute of HTML elements is used to set the id selector. In other words, CSS will select the word with the same name in HTML for attribute setting. example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>id选择器</title>
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>
</html>
class selector (class selector)
The class selector is used to describe the style of a group of elements and can be used in multiple elements. The class selector is displayed with a dot ".", for example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>class选择器</title>
<style>
p.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p>
</body>
</html>
Global selector
There is only one *, usually used for initialization, for example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全局选择器</title>
<style>
*
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">这个段落居中对齐</h1>
<p class="center">这个段落居中对齐。</p>
</body>
</html>
Pseudo-class selector
CSS pseudo-classes are used to add special effects for some selectors. Pseudo-type selectors are divided into structural, sub-element, UI, dynamic and other pseudo-type selectors. Mainly use ":"
: root
root element selector to select the root element in the document
:first-child
element selector, select the first child element in the element
: last-child
child element selector, select the last child element in the element
: only-child
child element selector, select the only child element in the element
: only -of-type
child element selector, select the only child element of the specified type
: nth-child(n)
child element selector, select the specified N child elements
: enabled
UI selector, select the element in the enabled state
: disabled
UI selector, select the element in the disabled state
: checked
UI selector, select the selected input check element
: default
UI selector, select the default element
: valid
UI selector, Validate valid selection input element
: invalid
UI selector, validate invalid selection input element
: required
UI selector, select element with required attribute
: optional
UI selector, select element without required attribute
:link
dynamic selector,
unvisited hyperlink elements : visited
dynamic selector, visited hyperlink elements
: hover
dynamic selector, elements hovering over the hyperlink
: active
dynamic selector, activating elements on the hyperlink
: foucs
dynamic selector, the element that gets the focus
:not
other selectors, negate selected elements
: empty
other selectors, select elements without any content
: lang
other selectors, select elements that contain lang attributes
: target
other selectors, select URL fragment identification to point to the element
Pseudo element selector
There are four types of pseudo element selectors in CSS:
1）::first-line 为某个元素的第一行文字使用样式；
2）::first-letter 为某个元素中的文字的首字母或第一个字使用样式；
3）::before 在某个元素之前插入一些内容；
4）::after 在某个元素之后插入一些内容；
(Pseudo-element selectors and pseudo-class selectors are still a bit unclear...)
Relationship selector
Relationship selectors include descendant selectors, child selectors, adjacent sibling selectors, and sibling selectors.
Descendant selector
When element B is embedded inside element A, B is a descendant of A. When defining descendant selectors, the outer elements are written in the front and the inner elements are written in the back, separated by spaces. example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>后代选择器</title>
<style type="text/css">
ul em {
color:red; font-weight:bold;}
</style>
</head>
<body>
<ul>
<li>1
<ol>
<li>2</li>
<li>3</li>
<li>4
<ol>
<li>5</li>
<li>6<em>7</em></li>
<li>8</li>
</ol>
</li>
<li>9/li>
</ol>
</li>
<li>10</li>
<li>11</li>
</ul>
</body>
</html>
The child selector
selects all the direct child elements F as the E element. It has no effect on the elements at a deeper level, which is represented by >. example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>子选择器</title>
<style>
div>a{
color:red}
</style>
<body>
<div>
<a href="#">子元素1</a>
<p>
<a href="#">孙元素</a>
</p>
<a href="#">子元素2</a>
</div>
</body>
</html>
Adjacent sibling selector The
syntax of adjacent sibling selector: E + F, select the element that immediately follows an element and has the same parent.
Sibling selector
Sibling selector syntax: E～F, used to select all sibling elements behind an element.
