快捷搜索:  汽车  科技

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>

css选择器零基础学习:前端学习笔记一篇文章了解所有的CSS选择器003(1)

子元素选择器

可以看到,只对父元素的直接子元素起作用,这儿与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属性一起使用

猜您喜欢: