我是靠谱客的博主 怕黑巨人,最近开发中收集的这篇文章主要介绍css选择器的种类,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

css选择器的种类

  • id选择器: #header {}
  • 类选择器:.header {}
  • 元素选择器:div {}
  • 子选择器:ul>li {}
  • 后代选择器:div p {}
  • 伪类选择器:a:hover {}
  • 属性选择器:input[type = "text"] {}

注意:

  • id选择器优先级高于子类class;
  • 后面的样式覆盖前面的;
  • 指定的样式高于继承;

伪类和伪元素

上面提到的伪类,还有一个叫伪元素的东西

W3C定义:

  • CSS 伪类用于向某些选择器添加特殊的效果。
  • CSS 伪元素用于向某些选择器设置特殊效果。

伪类种类

这里写图片描述

伪元素种类

这里写图片描述

egs:

伪元素
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
<p>
You can use the :first-letter pseudo-element to add a special effect to the first letter of a text!
</p>

显示的效果就是“Y”字体变大且颜色改变

伪类
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}

显示的效果就是鼠标在链接上悬停,点击等颜色改变

最后

以上就是怕黑巨人为你收集整理的css选择器的种类的全部内容,希望文章能够帮你解决css选择器的种类所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(39)

评论列表共有 0 条评论

立即
投稿
返回
顶部