黑马程序员技术交流社区

标题: 技术贴 [打印本页]

---

作者: 蟹堡王派大星    时间: 2019-7-24 14:29
标题: 技术贴
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 {}用的多些。

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2