1、基本选择器
2、组合选择器
3、伪类选择器
4、伪元素选择器
CSS选择器规定了CSS规则会应用到哪些元素上
1、基本选择器
2、组合选择器
3、伪类选择器
4、伪元素选择器
CSS选择器规定了CSS规则会应用到哪些元素上
1、基本选择器
{}
{}
{}
{}
{}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、伪类选择器
{}
{}
{}
{}
{}
<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、伪元素选择器
{}
{}
<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{}
服务热线 19970861797
