A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

蟹堡王派大星

初级黑马

  • 黑马币:34

  • 帖子:11

  • 精华:0

© 蟹堡王派大星 初级黑马   /  2019-7-24 14:29  /  1064 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

CSS选择器分为 基础选择器 和 复合选择器 ,但是基础选择器不能满足我们实际开发中,快速高效的选择标签。
目的是为了可以选择更准确更精细的目标元素标签。复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的。
1、后代选择器
用来选择元素或元素组的子孙后代。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔,先写父亲爷爷,在写儿子孙子。
语法:.class h3{color:red;font-size:16px;}
2、子元素选择器
子元素选择器只能选择作为某元素子元素(亲儿子)的元素。其写法就是把父级标签写在前面,子级标签写在后面,中间跟一个 > 进行连接。
语法:.class>h3{color:red;font-size:14px;}
亲儿子指的就是下一级,但是不包含下下级。
3、交集选择器
交集选择器由两个选择器构成,找到的标签必须满足:既有标签一的特点,也有标签二的特点。其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格,如h3.special。
语法:class.h3{color:red;font-size:14px;}
不太建议使用
4、并集选择器
并集选择器(CSS选择器分组)是各个选择器通过,连接而成的,通常用于集体声明。任何形式的选择器(包括标签选择器、class类选择器id选择器等),都可以作为并集选择器的一部分。并集选择器通常用于集体声明 ,逗号隔开的,所有选择器都会执行后面样式,逗号可以理解为 和的意思。
语法:class,h3{color:red;font-size:14px;}
5、伪类选择器
和我们学的类选择器类似,类选择器是一个点.one {};伪类就是两个点:hover {}。用于向某些选择器添加特殊的效果。比如给链接添加特殊效果, 比如可以选择 第1个,第n个元素。因为我们现在只学了链接伪类,所以就列一下链接伪类。
a:link /* 未访问的链接 */
a:visited /* 已访问的链接 */
a:hover /* 鼠标移动到链接上 */
a:active /* 选定的链接 */
不过工作中一般是:hover {}用的多些。

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马