CSS3选择器

Posted shige720

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS3选择器相关的知识,希望对你有一定的参考价值。

基本选择器                                                            

非CSS3新增的选择器(最最基本的选择器)

  通配符选择器:选中文档中所有元素

  元素选择器:选中文档中某一标签的所有元素

  类选择器:选中文档中某一class属性值的所有元素

  ID选择器:选中文档中特定ID值的元素

  后代选择器:结合元素、类和ID选择器,选中父元素下的某一子元素,父元素和子元素间用空格隔开

  群组选择器:把需要应用相同样式的选择器放在一起,中间逗号隔开

  技术图片

CSS3新增的选择器

子元素选择器(直接后代选择器)

  只能选取元素下的子元素,不可选中孙元素

  语法为父元素>子元素

  技术图片

相邻兄弟元素选择器

  选取指定元素相邻的下一个元素为指定元素的元素(说法有点绕,具体看图例)

  语法为父元素>子元素+兄弟元素(只有紧邻指定子元素的第一个兄弟元素被选中)

  技术图片

通用兄弟选择器

  选取指定元素的后续所有指定类型的元素(具体看案例)

  语法为父元素>子元素~兄弟元素(子元素后所有指定的兄弟元素全部被选中)

  技术图片

 

属性选择器                                                               

  选中带有指定属性的html元素并设置样式

  主要是针对其中的属性值来设置的

  element[attribute]:选择所有带有attribute属性的元素

  element[attribute="value"]:选择所有attribute属性值为value的元素(必须一模一样

  element[attribute~="value"]:选择所有attribute属性值包括value的元素(包括完整单词

  element[attribute^="value"]:选择所有attribute属性值开头为value的元素

  element[attribute$="value"]:选择所有attribute属性值结尾为value的元素

  element[attribute*="value"]:选择所有attribute属性值包括value的元素(包括其中的字母即可)

  element[attribute|="value"]:选择所有attribute属性值开头为value或value-的元素

 

伪类选择器                                                               

  该类元素并不真实存在于HTML中,只有用户和网页交互时才体现出来

动态伪类

锚点伪类

  link:超链接默认的状态

  visited:超链接被访问过后的状态

用户行为伪类

  hover:鼠标悬停时状态

  active:鼠标点击后状态

  focus:表单中的input元素等光标在其中时的状态

UI元素状态伪类

  enabled:针对input、textarea等表单元素中没有设置disabled属性的元素生效

  disabled:针对input、textarea等表单元素中设置disabled属性的元素生效

  checked:针对checkbox、radio等选择框表单元素,选中时触发

  技术图片

 

结构类选择器                                                           

  选定指定顺序位置的元素

按照子元素的位置选择

  element:first-child:选中以该element为某个元素第一子节点的元素

  element:last-child:选中以该element为某个元素最后子节点的元素

  element:nth-child(N):选中element元素为某个元素下的第N个子元素的元素,从1开始计数

  element:nth-last-child(N):类似于element:nth-child(N),不过是倒过来数

  其中参数N可以设置为n(n恒定从0开始取值),即会遍历某个父元素下第0-n个(所有)为element的元素,也可设置为odd(奇数)/even(偶数)/带有n的表达式(如2n+1)

  以上选择方法因为较难控制,一般结合其他选择器同时使用

   技术图片

按照子元素的类型和位置选择

  element:first-of-type:选定某父元素下element元素中的第1个element元素

  element:last-of-type:选定某父元素下element元素中的最后一个element元素

  element:nth-of-type(N):选定某父元素下element元素中的第n个element元素

  可以理解成只挑选出element元素,然后排序选出其中的第N个

  element:nth-last-of-type(N):类似于element:nth-of-type(N),不过是反过来数

  技术图片

其他

  element:only-child:选定某父元素下element为其唯一子元素的element元素

  element:only-of-type:选定某父元素下element为其中唯一的element元素的element元素(有点绕,看下方例子)

  技术图片

  empty:选择没有子元素(包括文本)的元素

  技术图片

   not:选择非该元素的某元素的所有子元素

  技术图片

 

权重                                                                            

  当CSS中添加很多选择器时,会根据权重计算出哪个选择器中的样式发挥作用

  行内样式(1000)>ID选择器(100)>类、属性、伪类选择器(10)>元素和伪元素(1)>通配符(0)

  被继承的css属性权重为0

 

伪元素                                                                         

  用来向某些选择器设置特殊效果,可以理解成在HTML中增加了一个原本不存在的元素

  通常为了区分,会用element::伪元素这样的语法格式,实际上新版本的浏览器一个冒号也可识别

first-line

  对块级元素第一行文本设置样式

first-letter

  对块级元素第一个字符设置样式

before

  在元素内容前插入内容(常配合content使用),该内容将成为元素的第一个子元素

  插入的内容不可选中,找不到对应的标签,作为行级元素存在,但可以对其设置样式

  技术图片

after

  在元素内容后插入内容(常配合content使用),常在清除浮动中使用

  技术图片

selection

  设置文本选中后的前景色和背景色

  技术图片

以上是关于CSS3选择器的主要内容,如果未能解决你的问题,请参考以下文章

css3选择器怎样选择元素?

CSS3新增的选择器

CSS3样式,基础选择器,复合选择器

[CSS3] 学习笔记-CSS选择器

css3 选择器,选择第二个字母

CSS3中的选择器