CSS选择器【记录】

1、基本选择器

2、组合选择器

3、伪类选择器

4、伪元素选择器

CSS选择器规定了CSS规则会应用到哪些元素上

1、基本选择器

通配选择器、元素选择器、类选择器、ID选择器、属性选择器

通配选择器、性能最低的一个CSS选择器 {} {} {} {} 属性选择器 {}element[attribute="value"]{} <span style="color: #008000">/<span style="color: #008000"> 属性值为value <span style="color: #008000">/<span style="color: #800000">
element[attribute~="value"]{} <span style="color: #008000">/<span style="color: #008000"> 属性值有多个，其中一个值为value <span style="color: #008000">/<span style="color: #800000">
element[attribute|="value"]{} <span style="color: #008000">/<span style="color: #008000"> 属性值为value或是以value-开头 <span style="color: #008000">/

<span style="color: #008000">/<span style="color: #008000"> 属性值以value开头 <span style="color: #008000">/<span style="color: #800000"> element[attribute^="value"]{} <span style="color: #008000">/<span style="color: #008000"> IE7+ <span style="color: #008000">/
<span style="color: #008000">/<span style="color: #008000"> 属性值以value结尾 <span style="color: #008000">/<span style="color: #800000"> element[attribute$="value"]{} <span style="color: #008000">/<span style="color: #008000"> IE7+ <span style="color: #008000">/
<span style="color: #008000">/<span style="color: #008000"> 属性值包含value <span style="color: #008000">/<span style="color: #800000"> element[attribute="value"]{} <span style="color: #008000">/<span style="color: #008000"> IE7+ <span style="color: #008000">*/

2、组合选择器

{} element{} {} {}

3、伪类选择器

{} {} 修改的样式非常有限，允许使用的CSS属性为color、background-color、border-color、outline-color {} {} {}

<span style="color: #008000">/<span style="color: #008000"> 基于元素语言来匹配页面元素 <span style="color: #008000">/<span style="color: #800000"> element:lang(f){}
<span style="color: #008000">/<span style="color: #008000"> 匹配不符合参数选择器描述的元素 <span style="color: #008000">/<span style="color: #800000"> element:not(s){} <span style="color: #008000">/<span style="color: #008000"> IE9+ <span style="color: #008000">/
<span style="color: #008000">/<span style="color: #008000"> 匹配文档树的根元素 <span style="color: #008000">/<span style="color: #800000"> element:root{} <span style="color: #008000">/<span style="color: #008000"> IE9+ <span style="color: #008000">/<span style="color: #800000">

element:first-child{}<span style="color: #800000">
element:last-child{} <span style="color: #008000">/<span style="color: #008000"> IE9+ <span style="color: #008000">/<span style="color: #800000">
element:only-child{} <span style="color: #008000">/<span style="color: #008000"> IE9+ <span style="color: #008000">/<span style="color: #800000">
element:nth-child(n){} <span style="color: #008000">/<span style="color: #008000"> IE9+ <span style="color: #008000">/<span style="color: #800000">
element:nth-last-child(n){} <span style="color: #008000">/<span style="color: #008000"> IE9+ <span style="color: #008000">/<span style="color: #800000">

element:first-of-type{} <span style="color: #008000">/<span style="color: #008000"> IE9+ <span style="color: #008000">/<span style="color: #800000">
element:last-of-type{} <span style="color: #008000">/<span style="color: #008000"> IE9+ <span style="color: #008000">/<span style="color: #800000">
element:only-of-type{} <span style="color: #008000">/<span style="color: #008000"> IE9+ <span style="color: #008000">/<span style="color: #800000">
element:nth-of-type(n){} <span style="color: #008000">/<span style="color: #008000"> IE9+ <span style="color: #008000">/<span style="color: #800000">
element:nth-last-of-type(n){} <span style="color: #008000">/<span style="color: #008000"> IE9+ <span style="color: #008000">/

<span style="color: #008000">/<span style="color: #008000"> 空元素 <span style="color: #008000">/<span style="color: #800000"> element:empty{} <span style="color: #008000">/<span style="color: #008000"> IE9+ <span style="color: #008000">/
<span style="color: #008000">/<span style="color: #008000"> 选中状态 <span style="color: #008000">/<span style="color: #800000"> element:checked{} <span style="color: #008000">/<span style="color: #008000"> IE9+ <span style="color: #008000">/
<span style="color: #008000">/<span style="color: #008000"> 可用状态 <span style="color: #008000">/<span style="color: #800000"> element:enabled{} <span style="color: #008000">/<span style="color: #008000"> IE9+ <span style="color: #008000">/
<span style="color: #008000">/<span style="color: #008000"> 禁用状态 <span style="color: #008000">/<span style="color: #800000"> element:disabled{} <span style="color: #008000">/<span style="color: #008000"> IE9+ <span style="color: #008000">/
<span style="color: #008000">/<span style="color: #008000"> 锚点指向的元素为目标元素，:target伪类用于选取当前激活的目标元素 <span style="color: #008000">/<span style="color: #800000"> element:target{} <span style="color: #008000">/<span style="color: #008000"> IE9+ <span style="color: #008000">/

<span style="color: #0000ff"><<span style="color: #800000">a <span style="color: #ff0000">href<span style="color: #0000ff">="#demo"<span style="color: #0000ff">>#demo<span style="color: #0000ff"></<span style="color: #800000">a<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">div <span style="color: #ff0000">id<span style="color: #0000ff">="demo"<span style="color: #0000ff">>:target伪类使用方法<span style="color: #0000ff"></<span style="color: #800000">div<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">a <span style="color: #ff0000">href<span style="color: #0000ff">="https://madmurphy.github.io/takefive.css/"<span style="color: #0000ff">>一个基于:target伪类的更为完善的纯-CSS加亮框<span style="color: #0000ff"></<span style="color: #800000">a<span style="color: #0000ff">>

4、伪元素选择器

双冒号（::）用以区分伪类选择器，但以前的写法仍然有效

一个字符 irst-letter{} 一个字符 irst-letter{}

<span style="color: #008000">/<span style="color: #008000"> 用于块级元素第一行 <span style="color: #008000">/<span style="color: #800000">element:first-line{}
<span style="color: #008000">/<span style="color: #008000"> 用于块级元素第一行 <span style="color: #008000">/<span style="color: #800000">element::first-line{} <span style="color: #008000">/<span style="color: #008000"> IE9+ <span style="color: #008000">/<span style="color: #800000">

element:before{}<span style="color: #800000">
element::before{} <span style="color: #008000">/<span style="color: #008000"> IE9+ <span style="color: #008000">/<span style="color: #800000">
element:after{}<span style="color: #800000">
element::after{} <span style="color: #008000">/<span style="color: #008000"> IE9+ <span style="color: #008000">/<span style="color: #800000">

element::-moz-selection{}<span style="color: #800000">
element::selection{} <span style="color: #008000">/<span style="color: #008000"> IE9+ <span style="color: #008000">/
<span style="color: #008000">/<span style="color: #008000"> 用于文档中被用户高亮的部分，只有一小部分CSS属性可以用于::selection选择器：background-color、color、text-decoration、text-shadow、outline、cursor <span style="color: #008000">/<span style="color: #800000">

element::-webkit-input-placeholder{}<span style="color: #800000">
element::-moz-placeholder{}<span style="color: #800000">
element:-ms-input-placeholder{} <span style="color: #008000">/<span style="color: #008000"> IE10+ <span style="color: #008000">/<span style="color: #800000">
element::placeholder{}