Nicander知识小站

Appearance

​

.class
#id
*
****element<font style="color:rgb(0, 0, 0);">p </font>
****element,element,..<font style="color:rgb(0, 0, 0);">div</font><font style="color:rgb(0, 0, 0);">p</font>
后代选择器 element element选择div元素中的所有P元素
**子元素选择器 **element > element只选择div元素的直接p子元素
**相邻兄弟选择器 **element + element选择紧跟在div元素后出现的p子元素
...

伪类选择器 ​

css
/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

所有的CSS伪类：

:active
:checked
:disabled
:empty
:enabled
:first-child
:first-of-type
:focus
:hover
:in-range
:invalid
:lang(language)
:last-child
:last-of-type
:link
:not(selector)
:nth-child(n)
:nth-last-child(n)
:nth-last-of-type(n)
:nth-of-type(n)
:only-of-type
:only-child
:optional
:out-of-range
:read-only
:read-write
:required
:root
:target
:valid
:visited

组合使用 ​

CSS的所有选择器都可以组合起来使用，从而灵活的实现所需的成果。

比如下边的代码，将后代选择器与类选择器进行组合：

css
div .item {
	font-size: 14px
}

参考 ​

https://www.w3school.com.cn/css/css_selectors.asp