栏目分类:
子分类:
返回
终身学习网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
终身学习网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

css选择器详解,带实例

CSS教程 更新时间:发布时间: 百科书网 趣学号

前端css选择器种类繁多,今天做了一下整理,不过该文章只适合前端小萌新,老油条请绕道。

1. 常见选择器
  1. 元素选择器
a,p,div,li,ul{
    color:red;
}

  1. id选择器

我会红

  1. 类选择器

我会红

  1. 属性选择器
我会红

2.子元素和后代元素选择器

我不会变色

  • 我是子元素>我是子子元素
  • 我是第二个子元素
  • 我是li里面的li

我会变红

3.伪类选择器

伪类专门用来表示元素的一种的特殊的状态。
比如:访问过的超链接,比如普通的超链接,比如获取焦点的文本框。
当我们需要为处在这些特殊状态的元素设置样式时,就可以使用伪类。

:link表示普通的链接(没访问过的链接)
:visited表示访问过的链接
:hover表示鼠标移入的状态
:active表示的是超链接被点击的状态
:focus表示文本框获取焦点

ps: :hover和:active也可以为其他元素设置(ie6不支持)

说明:普通标签支持:hover,:focus其他伪类只有一些特定的标签才支持,比如说:a标签支持:visited,:active,link;button支持:active,:focus。举例:

我是连接


4.伪元素选择器

p:first-letter
作用:选择p中第一个字符
p:first-line选择p中的第一行
:before表示元素最前边的部分, 一般before都需要结合content这个样式一起使用,通过content可以向before或after的位置添加一些内容
:after表示元素的最后边的部分,就是跟:before添加元素的位置不一样,其他是一致的。

5.子元素伪类选择器

:first-child可以选中第一个子元素
:last-child可以选中最后一个子元素
:nth-child(XXX)可以选中任意位置的子元素,该选择器后边可以指定一个参数,指定要选中第几个子元素,even 表示偶数位置的子元素,odd表示奇数位置的子元素。
:first-of-type、:last-of-type、:nth-of-type和:first-child这些非常的类似,只不过child,是在所有的子元素中排列,而type,是在当前类型的子元素中排列

6.优先级

很明显,上面多种选择器直接,会存在交叉和冲突,很多地方库,我们在引入的时候,需要覆盖原来的样式,这时候可以利用选择器优先级来覆盖原来库里面的样式。

元素选择器 < 属性选择器 < 类名选择器 < id选择器

学习如逆水行舟,不进则退,前端技术飞速发展,如果每天不坚持学习,就会跟不上,我会陪着大家,每天坚持推送博文,跟大家一同进步,希望大家能关注我,第一时间收到最新文章。

转载请注明:文章转载自 www.051e.com
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 ©2023-2025 051e.com

ICP备案号:京ICP备12030808号