下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

web前端:选择器

作者:九幽无泪     来源: https://www.cnblogs.com/kyhboke/p/11722992.html点击数:829发布时间: 2020-03-09 09:39:31

标签: 选择器htmlcss

Web开发

  要使用csshtml页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。

  HTML页面中的元素就是通过CSS选择器进行控制的。

  CSS的基本选择器:优先级ID>类>标签

  标签选择器:直接使用标签名字来选择

  类选择器:通过标签上面的class属性名称来获取一类标签css中通过.类名来设置

  ID选择器:通过标签上面的ID属性名称来获取单一的标签css中通过#id名来设置

  注意:ID属性具有唯一性,同一个HTML页面不可以出现相同的id名字

  属性选择器:

  选择器[属性名]{}选择具有某一个属性的一类标签

  例:p[class]{color:red;}表示选择具有class属性的p标签,设置文字颜色是红色

  选择器[属性名=属性值]{}选择具有某一属性,并且规定了属性值的一类标签

  例:p[class=a1]{color:blue;}表示选择具有class属性并且属性值是a1的所有p标签,设置文字颜色是蓝色

  选择器[属性名^=值]选择具有某一属性,并且属性值以什么值作为开头

  例:p[class^=a]{color:green;}表示选择具有class属性,并且属性值以a开头的所有p标签,设置颜色为绿色

  选择器[属性名$=值]选择具有某一属性,并且属性值以什么值作为结尾

  例:p[class$=a]{color:green;}表示选择具有class属性,并且属性值以a结尾的所有p标签,设置颜色为绿色

  选择器[属性名*=值]选择具有某一属性,并且属性值包含某一个内容

  例:p[class*=a]{color:green;}表示选择具有class属性,并且属性值中带有a的所有p标签,设置颜色为绿色

  伪类选择器:

  a:link表示超链接没有被访问前的状态

  a:visited表示超链接被访问后的状态

  a:hover表示鼠标悬浮在超链接上的状态

  a:active表示鼠标按下但并没有释放是的状态

  注意a:hover必须位于a:link和a:visited之后,a:active必须位于a:hover之后

  可靠的顺序是:l(link)ov(visited)eh(hover)a(active)te,即用喜欢(love)和讨厌(hate)两个词来概括

  li:first-child表示选择父元素下的第一个子元素,并且该元素是li

  li:last-child表示选择父元素下的最后一个子元素,并且该元素是li

  li:nth-child(n)表示选择父元素下的第n个元素,并且该元素是li

  li:first-of-type表示选择父元素下出现的第一个li标签

  li:last-of-type表示选择父元素下出现的最后一个li标签

  li:nth-of-type(n)表示选择父元素下的第n个li标签

  odd代表奇数

  even代表偶数

  2n代表偶数

  2n+1代表奇数

  3n+1代表隔两行

  要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。

赞(9)
踩(0)
分享到:
华为认证网络工程师 HCIE直播课视频教程