css补充

一.选择器补充

1.群组选择器

div,span. .red. #div{
    background-color:red;
} 

特点:

• 一次性控制多个选择器
• 选择器之间以逗号隔开,每一个选择器均可以为任意合法选择器或选择器组合

2.子代(后代)选择器

子代选择器用>连接
body>div{
    color:red;
}
后代选择器用空格连接
.sup .sub{
    color:cyan;
}

特点:

• 一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器为修饰性选择器
• 每一个选择器位均可以为任意合法选择器或选择器组合
• 子代选择器必须为一级父子嵌套关系，后代选择器可以为一级及多级父子嵌套关系

3.相邻(兄弟)选择器

相邻选择器用加号连接
.d1 + .d2{
    color:tan;
}
兄弟选择器用~连接
.d1 ~ .d2{
    color:green
}

特点:

• 一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器为修饰性选择器
• 每一个选择器位均可以为任意合法选择器或选择器组合
• 相邻选择器必须为直接相邻关系，兄弟选择器可以为直接相邻或间接相邻关系

4.交集选择器

<div class="d1" id="d2"></div>
div.d1#d2{
    color:blue;
}

<div class="d1 d2 d3"></div>
.d1.d2.d3{
    color:yellow;
}

5.属性选择器

- [attr]：匹配拥有attr属性的标签
- [attr=val]：匹配拥有attr属性，属性值为val的标签
- [attr^=val]：匹配拥有attr属性，属性值以val开头的标签
- [attr$=val]：匹配拥有attr属性，属性值以val结尾的标签
- [attr*=val]：匹配拥有attr属性，属性值包含val的标签

6.组合选择器优先级

组合选择器优先级与权值有关,权值为权重和.

权重对应关系

选择器	权重
通配	1
标签	10
类和属性	100
id	1000
!important	10000

选择器权值比较,只关心权重和,不关心选择器位置.

不同级别的选择器间不具备可比性,如:一个类选择器优先级高于n个标签选择器的任意组合.

二.标签a. img与list

1.a标签

常用语法

<a href="https://www.baidu.com">前往百度</a>
<a href="./index.html">前往主页</a>

相对路径

以当前文件作为参考,"."代表当前路径,".."代表上一级目录

常用属性

title:鼠标悬浮时的文本提示
target:_self | _blank 目标位置

其他用法

mailto:邮件给...
tel:打电话给...
sms:发信息给...

a标签reset操作

a {
    color: #333;
    text-decoration: none;
    outline: 0;
}

锚点

① <a href="#tag">前往锚点</a> <a name="tag" des="锚点"></a>
② <a href="#tag">前往锚点</a> <i id="tag" des="锚点"></i>

2.img标签

常用语法

<img src="https://image/icon.gif" />
<img src="./icon.gif" />

常用属性

alt:异常解释
title:图片解释

3.list列表

有序列表

<ol>
	<li></li>
	<li></li>
</ol>

无序列表

<ul>
	<li></li>
	<li></li>
</ul>

列表的reset操作

ol, ul {
	margin: 0;
    padding: 0;
    list-style:none;
}

三.伪类选择器

1.a标签四大伪类

• :link：未访问状态
• :hover：悬浮状态
• :active：活跃状态
• :visited：已访问状态

2.内容伪类

• :before：内容之前
• :after：内容之后

:before, :after {
    content: "ctn";
}

3.索引伪类

• :nth-child(n)：位置优先，再匹配类型
• :nth-of-type(n)：类型优先，再匹配位置

v_hint：值可以为位置数，也可以为2n、3n...，代表2的倍数，3的倍数，且位置数从1开始

4.取反伪类

• :not(selector)：对selector进行取反