css选择器

ID 选择器

/* <element id="eid" /> */
#eid {}

类选择器

/* <element class="cls" /> */
.cls {}

标签选择器

html {}
body {}
div {}
p {}

关系选择器

/* 后代选择器：单个空格字符*/
article p{
  /* 修改 article 下面所有 p 元素 */
}
 
/* 子代选择器: > */
article > p{
  /* 修改 article 下面所有直接子元素中的 p 元素 */
}
 
/* 邻接兄弟选择器: + */
article + p{
  /* 修改紧随 article 之后的同级 p 元素 */
}
 
/* 通用兄弟选择器: ~ */
article ~ p{
  /* 修改 article 之后的所有同级 p 元素 */
}

属性选择器

/* 选择所有具有 type 属性的元素 */
[type] {}
 
/* 选择所有 type 属性等于 `text` 的元素 */
[type="text"] {}
 
/* 选择属性值中包含 button 的元素 */
[class~="button"] {}
 
/* 选择所有 attribute 属性是 value 或者以 value- 开头的元素 */
[attribute|="value"] {}
 
/* 选择所有 attribute 属性以 value 开头的元素 */
[attribute^="value"] {}
 
/* 选择所有 attribute 属性以 value 结尾的元素 */
[attribute$="value"] {}
 
/* 选择所有 attribute 属性中包含 value 的元素 */
[attribute*="value"] {}

伪类选择器

伪类是选择器的一种，它用于选择处于特定状态的元素，以单个冒号为开头表示。

:hover {}
 
:first-child {}

伪元素选择器

伪元素则可以实现往html加入新的 HTML 元素一样，而不是向现有的元素上应用类。

::before {
  content:""
}
 
::after {
  content:""
}
 
::first-line {}