CSS之选择器
CSS1选择器
- .class
选择 class="info" 的所有元素
.info{background:red;}
- #id
选择 id="nav" 的所有元素
#nav {background:red;}
- element
选择所有的element(a、p...)元素
- element,element
选择多个所有element(a、p...)元素
- :link
选择所有未被访问的链接
- :visited
选择所有已被访问的链接
- :active
选择活动链接
- :hover
选择鼠标指针位于其上的链接
- :first-letter
选择每个element元素的首字母
- :first-line
选择每个element元素的首行
CSS2选择器
*
*选择所有元素 ps: *{}
- element > element2
选择父元素为 <element> 元素的所有 <element2> 元素。
- element+element2
选择element元素后面所有的element2元素
- :focus
选择获得焦点的 input 元素
- :first-child
选择属于父元素的第一个子元素的每个 <p> 元素
- element:before
在每个element元素的内容之前插入内容
- element:after
在每个element元素的内容之后插入内容
- element:lang[it]
选择带有以 "it" 开头的 lang 属性值的每个element元素
属性选择器
| 属性选择器 | 描述 |
|---|---|
| E[att] | 选择匹配元素E,并且元素定义了att即可 (CSS2) |
| E[att = "val"] | 选择匹配元素E,并且元素定义了att，其属性值等于val (CSS2) |
| E[att~ = "val"] | 选择匹配元素E,并且元素定义了att，其属性包含val这个词汇 (CSS2) |
| E[att| = "val"] | 选择匹配元素E,并且元素定义了att，其属性以val开头的（该值必须是整个单词）( CSS2) |
| E[att^ = "val"] | 选择匹配元素E,并且元素定义了属性att,其属性值以val 开头的任何字符串 (CSS3) |
| E[att$ = "val"] | 选择匹配元素E,并且元素定义了属性att,其属性值以val 结尾的任何字符串 (CSS3) |
| E[att* = "val"] | 选择匹配元素E,并且E元素定义了属性att,其属性值任意位置包含了val。（字符串与属性值中的任意位置相匹配）( CSS3) |
CSS3选择器
- element ~element2
选择前面有element元素的每个element2元素
- :root
:root 选择器匹配文档根元素。
在 HTML 中，根元素始终是 html 元素。
:root{background:#000;}
等价于
html{background:#000;}
- not
:not(selector) 选择器匹配非指定元素/选择器的每个元素。
:not(p){background:#000};// 非p元素的设置
input:not([type="submit"]){background:#000;}// input并且type不等于submit的元素
- empty
选择器匹配没有子元素（包括文本节点）的每个元素
- target
选择当前活动的 # 元素,用来匹配文档(页面)的url的某个标志符的目标元素
<a href="#brank">测试</a>
#brank:target{
background: #000;
}
- :enabled
选择每个启用的元素（有些元素是可以使用此属性:ps: input）
- :disabled
选择每个禁用的元素（有些元素是可以使用此属性ps:input）
- :checked
选择每个被选中的元素(input)
- :selection
选择被用户选取的元素部分,用来匹配突出显示的文本(用鼠标选择文本时的文本)
注意：
1、IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。
2、Firefox 支持替代的 ::-moz-selection。
- :read-only
选择器用来指定处于只读状态元素的样式
- :read-write
选择器对元素处于非只读状态时的样式
- :last-child
选择属于其父元素最后一个子元素
- :nth-child(n)
选择器用来定位某个父元素的一个或多个特定的子元素
:nth-child(n)选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素
image.png
- :nth-last-child(n)
从某父元素的最后一个子元素开始计算，来选择特定的元素
- :first-of-type
用来定位一个父元素下的某个类型的第一个子元素
- ele:nth-of-type(n)
选择属于其父元素第n个ele元素的每个ele元素
- :last-of-type
父元素下的某个类型的最后一个子元素
- :nth-last-of-type(n)
选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始
- :only-child
匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素
- :only-of-type
选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素
