前端基础CSS之选择器

选择器

• 标签选择器：选中当前页面中所有对应名称的标签

• id选择器：前面加#号，id名称不能重复，即不同标签不能有相同的id

• 类选择器：前面加.号，class名称可以重复，且一个标签可以有多个类名，格式为class="c1 c2 c3" ...

• 后代选择器：div p h1 ...，可以选择到div内部所有嵌套中的p标签，子代和孙代....

• 子元素选择器：div>p>h1>...，只能选择到亲子代标签，不包括孙代及后面的

• 交集选择器：p.a#b，p标签和类名为a的标签及id为b的标签的交集

• 并集选择器：p，.a，#b，p标签和类名为a的标签及id为b的标签的并集

• 兄弟选择器：

  相邻：h1+p，选中紧跟在h1后面的p标签

  通用：h1~p，选中h1后面的p标签

• 序选择器：

  同级别第几个：p:first-child(同级别第一个p标签)，p:last-child(同级别最后一个p标签)，p:nth-child(3/odd奇数/even偶数/x+ny表达式)(同级别第n个)，p:nth-last-child(3)(同级别倒数第n个)，only-child(唯一的一个)

  同类型第几个：p:first-of-type(同级别同类型第一个)，p:last-of-type(同级别同类型最后一个)，p:nth-of-type(3/odd奇数/even偶数/x+ny表达式)(同级别同类型第n个)，p:nth-last-of-type(3)(同级别同类型倒数第n个)，p:only-of-type(唯一类型)

• 属性选择器：

  p[属性名]按属性名找到p标签，p[属性名=属性值]按属性名和属性值找到p标签（应用于区分input标签：input[type="value"]）

  p[属性名~=属性值]：属性值以什么开头，p[属性名$=属性值]：属性值以什么结尾，p[属性名*=属性值]：属性值包含什么

• 通配符选择器：*{属性：值；}，给当前界面所有标签设置属性