css常用选择器

  • 元素选择器
    作用:选中页面中所有的指定元素。
    语法:标签名{}

  • id选择器
    通过元素的id属性值选中唯一的一个元素。
    语法:#id属性值{}

  • 类选择器
    通过元素的class属性值选中一组元素。
    语法:.class属性值{}
    我们可以为元素设置class属性,class属性和id属性类似,只不过class属性可以重复。
    可以同时为一个元素设置多个class属性值,多个值之间使用空格隔开。<p class="p1 p2">

  • 选择器分组(并集选择器)
    通过选择器分组可以同时选中过多个选择器对应的元素。
    语法:选择器1,选择器2,选择器N{}

  • 通配选择器
    他可以用来选中页面中所有的元素。
    语法:*{}

  • 复合选择器(交集选择器)
    可以选中同时满足多个选择器的元素。
    语法:-选择器1选择器2选择器N{}
    对id选择器来说,不建议使用复合选择器。

  • 元素之间的关系
    父元素:之间包含子元素的元素。
    子元素:直接被父元素包含的元素。
    祖先元素:直接或间接包含后代元素的元素。
    后代元素:直接或间接被祖先元素包含的元素。
    兄弟元素:拥有相同父元素的元素。

  • 后代元素选择器
    选中指定元素的指定后代元素。
    语法:祖先元素 后代元素1 后代元素1的后代元素{}

  • 子元素选择器
    选中指定父元素的指定子元素。
    语法:父元素>子元素
    :first-child 可以选中第一个子元素
    :last-child 可以选中最后一个子元素
    :nth-child(even) 可以选中任意位置的子元素,该选择器后边可以指定一个参数,指定要选中第几个子元素。
    even表示偶数位置的子元素,odd表示奇数位置的子元素。
    :first-of-type 
    :last-of-type 
    :nth-of-type 
    和:first-child非常相似,只不过child是在所有的子元素中排列,而type在当前类型的子元素中排列
    IE6及以下的浏览器不支持子元素选择器。

  • 伪类选择器
    伪类专门用来表示元素的一种特殊的状态。比如:访问过的链接,比如普通的超链接,比如获取焦点的文本框。
    当我们需要为处在这些特殊状态的元素设置样式时,就可以使用伪类。
    :link 正常链接(没访问过的链接)
    :visited只能定义字体颜色) 访问过的链接
    :hover 鼠标滑过的链接
    :active 正在点击的链接
    这四个选择器的优先级是一样的,注意顺序,lvha。
    浏览器是通过历史记录来判断链接是否访问过。
    由于涉及到了用户隐私,所以使用visited伪类只能设定字体颜色。
    :hover和:active也可以为其他元素设置
    IE6中不支持对超链接以外的元素设置:hover和:active。
    input可以创建一个文本框。
    :focus 获取焦点
    ::selection 选中的元素
    注意:::selection这个伪类在火狐中需要采用另一种方式编写::-moz-selection(只支持火狐)。

  • 伪元素
    使用伪元素来表示元素中的一些特殊位置。
    :first-letter 第一个字符
    :first-line 第一行
    :before 元素最前边的部分
    :after 元素最后边的部分。
    一般before都需要结合content这个样式一起使用,通过content可以向before或after的位置添加一些内容。

		p:before{
			content:"";
			color:red;
		}
  • 属性选择器

  • 可以根据元素中的属性或属性值来选取指定元素。
    title属性,这个属性可以给任何标签指定,当鼠标移入到元素上时,元素中的title属性的值将会作为提示文字显示。
    语法:[属性名] 选取含有指定属性的元素
    [属性名=“属性值”] 选取含有指定属性值的元素
    [属性名^=“属性值”] 选取属性值以指定内容开头的元素
    [属性名$=“属性值”] 选取属性值以指定内容结尾的元素
    [属性名*=“属性值”] 选取属性值以包含指定内容的元素

  • 兄弟元素选择器
    ①后一个兄弟元素选择器
    可以选中一个元素后紧挨着的指定兄弟元素。
    语法:前一个+后一个
    ②选中后边的所有兄弟元素
    语法:前一个~后边所有

  • 否定伪类
    可以从已选中的元素中剔除出某些元素。
    语法::not(选择器)

  • 样式的继承
    在css中,祖先元素的样式,也会被他的后代元素所继承。
    利用继承,可以将一些基本的样式设置给祖先元素,这样所有后代元素将会自动继承这些样式。
    但是并不是所有的样式都会被子元素所继承,比如:背景相关的样式边框相关的样式定位相关的样式都不会被继承。

  • 选择器的优先级
    当使用不同的选择器,选中同一个元素时并且设置相同的样式时,采用哪个选择器定义的样式,由选择器的优先级(权重)决定。
    内联样式,优先级1000
    id选择器(#p),优先级100
    类和伪类(.p),优先级10
    元素选择器(p),优先级1
    通配(*),优先级0
    继承的样式,没有优先级
    当选择器中包含多种选择器时,需要将多种选择器的优先级相加然后再比较。但是注意,选择器的优先级计算不会超过他的最大数量级
    如果选择器的优先级一样,则使用靠后的样式
    并集选择器的优先级是单独计算。
    可以在样式的最后,添加一个!important,则此时该样式将会获得一个最高的优先级,将会优先于所有的样式甚至超过内联样式。但是在开发中尽量避免使用!important。

	p{
		color:red !important;
	}
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值