css3-选择器

relationship Selectors

E+F E~F

/* 下一个满足条件的兄弟元素节点 */
div + p{

}

/*  选择所有满足条件的兄弟节点 */
div ~ p{

}

Attribute Selector

div[data]{
}
div[data="a"]{
}
/* 选则属性值为“a” 或者属性值里包含单独的“a”的节点 */
div[data~="a"]{
}
/* 选择满足以“a” 开头或者以“a-” 开头的属性值的节点*/
div[data|="a"]{
}
/*  选择属性值以“a”开头的属性值的节点  */
div[data^="a"]{
}
/* 选择属性值以“a”结尾的属性值的节点 */
div[data$="a"]{
}
/*  选择属性值里存在“a”的节点 空格也可以选中*/
div[class*='a']{
}

Pesudo-Element Selectors

E::placeholder E::selection (必须写两个:😃

/*  修改input里placeholder的文字颜色  */
input::placeholder{
	/* 只能改变color属性 */
	color:'gerrn'
}

/*  修改当鼠标划过文字时的选中样式 */
input::selection{
	/* 只能改变一下三个样式 */
	color:;
	background-color:;
	text-shadow:;
}

Pseudo-Classes Selectors

E:not().

/*  选中类名不是test的div  */
div:not(.test){
}

/*  选中没有类名的div  */
div:not([class]){
}

/*  选择不是li最后一项的所有li  */
li ：not(:last-of-type){
}

:root – 根标签选择器

:root{
	background-color:red;
}
/*在html中相当于*/

html{
	background-color:red;
}

E:target

/*  被选为锚点的那个节点  location.hash = xxx  */
div:target{
}
/*  有id属性并且不是当前锚点的div  */
div[id]:not(:target){
}

E:first-child E:last-child E:only-child（只有一个子元素） E:nth-child E:nth-last-child()
伪类选择器是被选择元素的一种状态

/* n 是自然数  */
p:nth-child(2n + 1){
}

以上5个选择器都会收到其他元素的影响。所以通常用一下几种选择器：

E:first-of-type E:last-of-type E:only-of-type E:nth-of-type() E:nth-of-last-type()

E:empty (选中没有子节点的那个元素)
E:checked(选中表单中该元素为选中状态时)

input:checked + span{ 
	background-color:green;
}
input:checked + span::after{	
	content:"";
	color:#fff;
}

E:enabled
E:disabled
E:readonly

input:enabled:{
/* 没有被禁用的input */
}
input:disabled:{
/* 被禁用的input */
}
input:read-only{
/* 只读的input */
}