css选择器零基础学习：前端学习笔记一篇文章了解所有的CSS选择器003
css选择器零基础学习：前端学习笔记一篇文章了解所有的CSS选择器003.borather~div{ color:green; } <div class="borather">CSS选择器</div> <div>兄弟选择器E~F</div> <div>兄弟选择器E~F</div>三、属性选择器E[att]{ sRules }选择具有attr属性的E元素E[att="val"]{ sRules }选择具有att属性且属性值等于val的E元素E[att~="val"]{ sRules }选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素E[att^="val"]{ sRules }E[att$="val"]{ sRules }E[att*="val"]{
在CSS中，选择器是选取需设置样式的元素的模式。
有关CSS选择器的权重，请参考我的文章《前端学习笔记——CSS选择器的权重002》
下面介绍CSS中的相关选择器
一、元素选择器- 通配符选择器
*{sRules;}
*{
/* 通配符选择器 */
margin:0;
padding:0;
}
- 类型选择器
div{
color:#333;
}
- ID选择器
#IdSelect{
color:red;
}
<div class="mian" id="IdSelect">
<span>CSS选择器</span>
</div>
- 类选择器
.main{
width:100px;
height: 100px;
}
<div class="main" id="IdSelect">
<span>CSS选择器</span>
</div>二、关系选择器
- 包含选择符E F
#IdSelect span{
color:green;
}
<div class="main" id="IdSelect">
<span>CSS选择器</span>
<div>
<span>包含选择器</span>
</div>
</div>
可以看到该id下的所有的span颜色都变成green
- E F
.out .in{
color:green;
}
class为out和class为in的元素都修改
- 子元素选择器E>F
#IdSelect {
color:red;
}
#IdSelect>span{
color:green;
}
<div class="main" id="IdSelect">
<span>CSS选择器</span>
<div>
<span>子元素选择器E>F</span>
</div>
</div>
子元素选择器
可以看到，只对父元素的直接子元素起作用，这儿与E F包含选择器有所区别。
- 相邻选择器E F
span div{
color:green;
}
<span>CSS选择器</span>
<div>相邻选择器E F</div>
<div>不相邻</div>
故名思意，只修改紧邻自己的元素
- 兄弟选择符E~F
.borather~div{
color:green;
}
<div class="borather">CSS选择器</div>
<div>兄弟选择器E~F</div>
<div>兄弟选择器E~F</div>三、属性选择器
- E[att]{ sRules }选择具有attr属性的E元素
- E[att="val"]{ sRules }选择具有att属性且属性值等于val的E元素
- E[att~="val"]{ sRules }选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素
- E[att^="val"]{ sRules }
- E[att$="val"]{ sRules }
- E[att*="val"]{ sRules }
- E[att|="val"]{ sRules }
比较常见的如input
input[name="title"]{
background-color: red;
}四、伪类选择器
e:link{sRules}设置超链接a在未被访问前的样式
e:visited{sRules}设置超链接a在地址已被访问过的样式
e:houver{sRules}鼠标悬停的样式，从IE7开始支持其他元素
e:active{sRules}元素被激活
e:focus{sRlues}设置对象成为输入焦点时的样式
e:lang(){sRules}匹配使用特殊语言的E元素
e:not(S)匹配不包含S选择器的元素
e:root匹配E元素在文档的根元素 就是html标签
e:first-child匹配父元素的第一个子元素
e:last-child匹配父元素的最后一个子元素
E:only-child{ sRules }匹配父元素仅有的一个子元素E
E:nth-child(n){ sRules }匹配父元素的第n个子元素E
E:nth-last-child(n){ sRules }匹配父元素的倒数第n个子元素E
E:first-of-type{ sRules }匹配同类型中的第一个同级兄弟元素E
E:last-of-type{ sRules }匹配同类型中的最后一个同级兄弟元素E
E:only-of-type{ sRules }匹配同类型中的唯一的一个同级兄弟元素E
E:nth-of-type(n){ sRules }匹配同类型中的第n个同级兄弟元素E
E:nth-last-of-type(n){ sRules }匹配同类型中的倒数第n个同级兄弟元素E
E:empty{ sRules }
E:checked{ sRules }匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
E:enabled{ sRules }匹配用户界面上处于可用状态的元素E
E:disabled{ sRules }匹配用户界面上处于禁用状态的元素E
E:target{ sRules }匹配相关URL指向的E元素
五、伪对象选择器
E::before
设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
E:after/E::after{ sRules }
设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
