CSS3选择器介绍

1、属性选择器(是指html属性 )

语法:E[att]{sRules} (E代表标签属性,att 代表条件)
说明:用于选取带有指定属性的元素。

语法:E[att=“val”]{sRules}
说明:用于选取带有指定属性和值的元素

语法:E[att~=“val”]{sRules}(有局限性,指定的单词)
说明:用于选取属性值中包含指定词汇的元素

语法:E[att|=“val”]{sRules} (条件中开头是单词的,后面条件杠隔开)
说明:用于选取带有以指定值开头的属性值的元素,该值必须整个是单词

语法:E[att^=“val”]{sRules} (class设置条件的开头字母)
说明:匹配属性值以指定值开头的每个元素

语法:E[att$=“val”]{sRules} (class设置条件的结尾字母)
说明:匹配属性值以指定值结尾的每个元素

语法:E[att*=“val”]{sRules} ()
说明:匹配属性值中包含指定值的每个元素

2、伪类选择器

结构性伪类选择器 -----------如果父元素里面元素结构单纯可以用(first-child与:last-child)
------------如果父元素里面元素结构多样可以用(nth-of-type与:nth-last-of-type)

语法:first-child与:last-child
说明:单独制定第一个子元素和最后一个子元素的样式

语法:nth-child与:nth-last-child
说明:对指定序号的子元素使用样式

对所有第奇数个子元素或第偶数个子元素使用样式
:nth-child(odd){} 所有正数下第奇数个子元素(先去找位置,是父元素下面所有的的子元素,再去匹配)

:nth-child(even) {} 所有正数下第偶个子元素

:nth-last-child(odd){} 所有倒数上去第奇数个子元素

:nth-last-child(even){} 所有倒数上去第偶个子元素

语法:nth-of-type与:nth-last-of-type (会吧一个类的调出来,在去根据元素匹配 改动)
说明:使用这两种选择器时,CSS3在计算子元素是第奇数个子元素
还是第偶数个子元素的时候,就只针对同类型的子元素进行计算了

语法:nth-child(αn=β)与nth-last-child(αn+β)
说明:循环使用样式,αn+β形式,α表示每次循环中共包括几种样式,
β表示指定的样式在循环中所处的位置

语法:only-child
说明:只有一个元素的时候使用

3目标伪类选择器语法:target

说明:突出显示活动的HTML锚
URL带有后面跟有锚名称#,指向文档内某个具体的元素。这个被连接的元素就是
目标元素(target element)。

:target选择器可用于选取当前活动的目标元素。
使用该选择器来对页面中的某个target元素(该元素的id当做页面中的超链接来使用)
指定样式,该样式只在用户点击了页面中的超链接没并且跳转到target元素后起作用。

3、层级选择器

语法:E>F{sRules}
说明:子元素选择器(Child selectors)只能选择某元素子元素的元素,选择
匹配的F元素,且匹配的F元素为所匹配的E元素的子元素

语法:E+F{sRules}
说明:相邻兄弟选择器可用选择紧接在另一个元素后的元素,而且他们
具有一个相同的父元素,EF两元素具有一个相同的父元素,而且F元素
在E元素后面,而且相邻。

语法:E~F{sRules}(通用兄弟选择器)
说明:用来指定位于同一个父元素之中的某个元素之后的所有其他某个种类的
兄弟元素所使用的样式。
选择某元素后面的所有兄弟元素,需要在同一个父元素之中,E和F元素时
属于同一个父元素之内,并且F元素在E元素之后,那么E~F选择器将选择中
所有E元素后面的F元素

浏览器前缀的简介及应用

有些时候,某些css属性还只是最新版的预览版,并未发布成最终的正式版,
而大部分浏览器已经为这些属性提供了支持,但这些属性是小部分浏览器专有
的;有些时候,有些浏览器为了扩展某方面的功能,他们会选择新增的一些css
属性,这些自行扩展的css属性也是浏览器专属的。为了让这些浏览器识别这些
专属属性,css规范允许在css属性前增加各自的浏览器前缀。

以下是集中常用前缀
-webkit-
-moz-
-ms-
-o-

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值