Grábalo tú mismo, profundiza tu impresión, para no seguir olvidándote.
selector css
.class//类选择器
#id//id选择器
*//选择所有元素
p//选择所有p元素
div,p//选择所有div和p元素
div p//选择p标签里的p元素
div>P//选择所有div标签里面的p元素
div+p//选择所有紧跟在div标签后的第一个p元素
[attitude]
示例：[target]//选择所有具有target属性的元素
[attribute=value]
示例：[target=-blank]//选择所有target属性为“-blank”的元素
[attribute~=value]
示例：[title~=flower]//选择标题属性包含flower的元素
:link
示例：a:link//选择所有未访问过的链接
：visited//选择所有已访问过的链接
：active//选择活动链接
：hover//当鼠标悬停在元素上
：focus
input:focus//选择所有具有焦点的元素
p:first-letter//选择所有p元素的第一个字母
p:first-line//选择所有p元素的第一行
p:first-child//选择所有以p元素为父元素的第一个子元素
p:before//在p元素之前插入内容
p:after//在p元素之后插入内容
p~ul//选择p元素之后的每一个ul元素
a[src^="https"]//选择每一个src属性以https开头的a元素
a[src$=".pdf"]//选择每一个src属性的值以".pdf"结尾的元素
a[src*="runoob"]//选择每一个src属性的值包含子字符串"runoob"的元素
p:first-of-type//选择每个p元素是其父级的第一个p元素
p:last-of-type//选择每个p元素是其父级的最后一个p元素
p:only-of-type//选择其父级唯一一个p元素
p:only-child//选择每个p元素是其父级唯一的子元素
p:nth-child(2)//选择每个p元素是其父级的第二个子元素
p:nth-of-type(2)//选择每个p元素是其父级的第二个p元素
:not(p)//选择每个不为p元素的元素
::selection//匹配元素中被用户选中或高亮部分的元素
input:checked//选择每个选中的输入元素
input:disabled//选择每个被禁用的元素
input:enabled//选择每一个已启用的输入元素
:root//选择文档的根元素
p:empty//选择没有子元素的p元素
:required//用于匹配设置了 "required" 属性的元素
:valid//用于匹配输入值为合法的元素
:invalid//用于匹配输入值为非法的元素
:optional//用于匹配可选的输入元素prioridad
!importante>Estilos en línea>Selectores de ID>Clases, pseudoclases, atributos>Elementos, pseudoelementos>Herencia>Comodines
Pseudoclases y pseudoelementos
3. Selectores de pseudoclases y pseudoelementos
3.1 Pseudoclases para marcar el estado.
-
:link Seleccionar hipervínculos no visitados
-
:visitado Seleccione un enlace visitado
-
:hover Selecciona el elemento sobre el que pasa el ratón
-
:active selecciona el elemento en el punto
-
:focus selecciona el elemento enfocado
3.2 Pseudoclases para funciones de filtrado
-
:empty selecciona elementos sin elementos secundarios
-
:marcado Seleccione el elemento de entrada en el estado marcado solo es válido para radio y casilla de verificación
-
:disabled Seleccionar elementos de formulario deshabilitados
-
:first-child selecciona el primer elemento bajo el selector actual
-
:last-child selecciona el último elemento bajo el selector actual
-
: nth-child (an + b) Seleccione el elemento en la posición especificada y el parámetro admite la situación de an + b. Por ejemplo, li: nth (2n + 1), puede seleccionar todos los elementos cuyo número de secuencia de el elemento li es un múltiplo entero de 2+1, es decir, los elementos li con números de serie de 1, 3, 5, 7 y 9
-
:nth-last-child(an+b) Similar al anterior, pero seleccionado desde atrás.
-
:only-child Seleccione el único elemento hijo del elemento, si el elemento padre del elemento tiene solo un elemento hijo, tendrá efecto, si hay otros elementos hermanos, no tendrá efecto
-
:only-of-type Seleccione solo un tipo de elemento. Tendrá efecto si el elemento principal del elemento tiene solo un elemento secundario de su tipo actual.
3.3 Selectores de pseudoelementos
Los selectores de pseudoelementos se utilizan para establecer ciertos efectos especiales en elementos fragantes. Los selectores de pseudoelementos no son elementos DOM reales, por lo que se denominan pseudoelementos. Los más utilizados son los siguientes:
-
::first-line aplica el estilo a la primera línea del elemento
-
::primera letra aplica estilos a la primera letra o al primer texto de un elemento
-
::antes inserta contenido antes de un elemento
-
::after inserta contenido después de un elemento
-
::selección Añade estilo al elemento seleccionado por el cursor
1. Los elementos construidos por pseudoelementos son virtuales, por lo que js no se puede utilizar para operar.
2. La primera línea y la primera letra no se utilizan en los estilos en línea y no serán válidas en los estilos en línea.
3. Si usa antes y la primera letra al mismo tiempo, el primer contenido debe contarse desde antes; si el primero antes es contenido que no es texto, entonces la primera letra también se aplicará a este contenido que no es texto. pero no tendrá efecto.
4. Según CSS3, una pseudoclase está representada por dos puntos (:) y un pseudoelemento está representado por dos dos puntos (::)