一、关系选择器：

后代选择器：ul li

子代选择器：ul >li

邻接兄弟(同级、同样父元素、必须是相邻元素p后面的)：p +img

通用兄弟(同级、同样父元素、不用相邻p后面的)：p ~img

二、属性选择器：

以class属性为例：当然可以为其他属性比如 title属性、href属性 type属性等

li[class]匹配任何有 class 属性的li
li[class="a"]匹配只有一个class且为a的
li[class~="a"]匹配含有class为a的
li[class^="a"]匹配了任何值开头为'a'的属性
li[class$="a"]匹配了任何值结尾为'a'的属性
li[class*="a"]匹配了任何值中出现了'a'的属性

以上对于大小写敏感比如a与A不同如果想让大小写不敏感，则使用li[class^="a" i] []内添加一个i

三、伪类和伪元素：

伪类：用于选择处于特定状态的元素比如鼠标悬浮在元素之上hover，比如input的focus等、比如第一个元素、最后一个元素、第几个元素等

选择器	描述
:hover	鼠标悬浮到一个元素上时
:focus	元素有焦点时
:active	在用户激活（例如点击）元素的时候匹配。一般有a标签和button标签
:target	匹配当前 URL 目标的元素 url上有当前hash
:visited	匹配已访问链接。
:link	匹配未曾访问的链接。
:required	匹配必填的 form 元素。
:valid	表示内容验证正确的或其他元素。这能简单地将校验字段展示为一种能让用户辨别出其输入数据的正确性的样式。。
:invalid	用来选择任何未通过验证的、、或其他表单元素。
:optional	匹配不是必填的 form 元素。
:placeholder-shown	匹配显示占位文字的 input 元素。
:checked	任何处于选中状态的radio、 checkbox 、或 ("select") 元素中的option
:disabled	被禁用的元素表单元素
:enabled	已启用的元素。如果元素可以被激活（例如被选择、单击、输入文本等），或者能够获得焦点，那么它就是启用的
:first-child	兄弟元素中的第一个
:first-of-type	表示一组兄弟元素中其类型的第一个元素
:last-child	兄弟元素中最后一个
:last-of-type	匹配兄弟元素中最后一个某种类型的元素。
:nth-child	匹配一列兄弟元素中的元素——兄弟元素按照
:nth-of-type	匹配某种类型的一列兄弟元素（比如，
:nth-last-child	匹配一列兄弟元素，从后往前倒数。兄弟元素按照
:nth-last-of-type	匹配某种类型的一列兄弟元素（比如，
:only-child	没有兄弟元素的元素
:only-of-type	匹配兄弟元素中某类型仅有的元素。
:in-range	用一个区间匹配元素，当值处于区间之内时匹配。
:has()	表示一个元素，如果作为参数传递的任何相对选择器在锚定到该元素时，至少匹配一个元素。这个伪类通过把可容错相对选择器列表作为参数，提供了一种针对引用元素选择父元素或者先前的兄弟元素的方法
:is()	匹配传入的选择器列表中的任何选择器。ie不支持
:not	匹配作为值传入自身的选择器未匹配的物件。ie不支持
:playing	匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“播放”的元素。
:paused	匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“暂停”的元素。
:first	表示打印文档的第一页与@page一起用
:left	需要和 @page 配套使用，对打印文档的左侧页设置 CSS 样式
:right	必须与 @page 一起配套使用，表示打印文档的所有右页。
:root	匹配文档的根元素。
:scope	匹配任何为参考点元素的元素。 ie不支持

:checked

/* Labels for checked inputs */
input:checked + label {
  color: red;
}

/* Radio element, when checked */
input[type="radio"]:checked {
  box-shadow: 0 0 0 3px orange;
}

/* Checkbox element, when checked */
input[type="checkbox"]:checked {
  box-shadow: 0 0 0 3px hotpink;
}

:is()

/* 0 级 */
h1 {
  font-size: 30px;
}
/* 1 级 */
:is(section, article, aside, nav) h1 {
  font-size: 25px;
}
/* 2 级 */
:is(section, article, aside, nav) :is(section, article, aside, nav) h1 {
  font-size: 20px;
}
/* 3 级 */
:is(section, article, aside, nav)
  :is(section, article, aside, nav)
  :is(section, article, aside, nav)
  h1 {
  font-size: 15px;
}

:not()

/* 类名不是 `.fancy` 的 <p> 元素*/
p:not(.fancy) {
  color: green;
}

/* 非 <p> 元素 */
body :not(p) {
  text-decoration: underline;
}

/* 既不是 <div> 也不是 <span> 的元素 */
body :not(div):not(span) {
  font-weight: bold;
}

/* 不是 <div> 或 `.fancy` 的元素*/
body :not(div, .fancy) {
  text-decoration: overline underline;
}

/* <h2> 元素中不是有 `.foo` 类名的 <span> 元素 */
h2 :not(span.foo) {
  color: red;
}

伪元素

选择器	描述
::after	匹配出现在原有元素的实际内容之后的一个可样式化元素。
::before	匹配出现在原有元素的实际内容之前的一个可样式化元素。
::first-letter	匹配元素的第一个字母。
::first-line	匹配包含此伪元素的元素的第一行。
::selection	匹配文档中被选择的那部分。

css 关系选择器、属性选择器、伪类、伪元素