前端（四）

一css四种基本选择器

CSS选择器：就是指定CSS要做用的标签。选择器分为基本选择器和扩展选择器。

基本选择器：

• 标签选择器：针对一类标签
• ID选择器：针对某一个特定的标签使用
• 类选择器：针对你想要的全部标签使用
• 通用选择器（通配符）：针对全部的标签都适用（不建议使用）

1.1标签选择器

选择器的名字表明html页面上的标签，常常描述“共性”，没法描述某一个元素的“个性，如：

a {
    font-size: 20px;
}复制代码

上边的标签选择器的意思：全部的a标签里边的内容字体大小为20px。

• 全部的标签，均可以是选择器。好比ul、li、label、dt、dl、input。
• 不管这个标签藏的多深，必定可以被选择上。 
• 选择的全部，而不是一个。

1.2ID选择器

针对某一个特定的标签来使用。只能使用一次。css中的ID选择器以”#”来定义。

#mytitle{
	border:3px dashed green;
}复制代码

id选择器的选择符是“#”。任何的HTML标签均可以有id属性。

• 只能有字母、数字、下划线。
• 必须以字母开头。
• 不能和标签同名。好比id不能叫作body、img、a。

tips：HTML页面，不能出现相同的id，哪怕他们不是一个类型。好比页面上有一个id为pp的p，一个id为pp的div，是非法的！

1.3类选择器

针对你想要的全部标签使用。css中类选择器用.来定义。

.one{
	width:800px;
}复制代码

• 类选择器能够被多种标签使用。

• 同一个标签可使用多个类选择器。用空格隔开。

问题：到底用id仍是用class？

答案：尽量的用class，除非极特殊的状况能够用id。

缘由：id是js用的。也就是说，js要经过id属性获得标签，因此css层面尽可能不用id，要否则js就很别扭。另外一层面，咱们会认为一个有id的元素，有动态效果。

1.4通用选择器

通配符*：匹配任何标签。效率不高，若是页面上的标签越多，效率越低

*{
margin-left:0px;
margin-top:0px;
}复制代码

二扩展选择器

• 后代选择器
• 交集选择器
• 并集选择器
• 伪类选择器

2.1后代选择器

当要把某一个部分的全部的什么，进行样式改变，就要想到后代选择器。例如：

.div1 p{
	color:red;
	}复制代码

空格就表示后代。.div1 p 表示.div1的后代全部的p。不论是儿子仍是孙子都会改变。

例如：

.eee p .bbb {
            color: #f00;
        }复制代码

<div class="eee">
    <p>eeeeaedadasd <i class="bbb">nihao</i></p>
</div> 复制代码

表示类eee的全部后代p中的类bbb的颜色都变成红色。

2.2交集选择器

定义交集选择器的时候，两个选择器之间紧密相连。通常是以标签名开头，好比div.haha，再好比p.special。若是后一个选择器是类选择器，则写为div.special；若是后一个选择器id选择器，则写为div#special。

h3.special{
    color:red;
}复制代码

<h3 class="special">交集选择器</h3>复制代码

选择的元素要求同时知足两个条件：必须是h3标签，而后必须有special选择器。

tips:交集选择器没有空格。因此，没有空格的div.red（交集选择器）和有空格的div.red（后代选择器）不是一个意思。

2.3并集选择器

定义的时候用逗号隔开，例如：

p,h1,#mytitle,.one{
	color:red;
}复制代码

表示全部的这些选择器选中的标签字体颜色都是红色。

2.4伪类选择器

伪类：同一个标签，根据其不一样的种状态，有不一样的样式。这就叫作“伪类”。伪类用冒号来表示。伪类分为静态伪类和动态伪类。

静态伪类：只能用于超连接的样式。以下：

• :link 超连接点击以前。URI 还没有出如今用户代理的历史中
• :visited 连接被访问过。URI 已经出如今用户代理的历史中

动态伪类：针对全部标签都适用的样式。以下：

• :hover “悬停”：鼠标放到标签上的时候
• :active “激活”： 鼠标点击标签，可是不松手时。
• :focus 是某个标签得到焦点时的样式（好比某个输入框得到焦点）

超连接的四种状态

/*超链从未被点击是红色*/
		a:link{
			color:red;
		}

		/*超连接被访问过是绿色*/
		a:visited{
			color:orange;
		}
		/*鼠标悬停，放到标签上的时候*/
		a:hover{
			color:green;
		}
		/*鼠标点击连接，可是不松手的时候*/
		a:active{
			color:black;
                }
复制代码

tips:

在css中，这四种状态必须按照固定的顺序写：a:link 、a:visited 、a:hover 、a:active

a{}和a:link{}的区别：

• a{}定义的样式针对全部的超连接(包括锚点)
• a:link{}定义的样式针对全部写了href属性的超连接(不包括锚点)

2.5其余选择器

子代选择器，用符号>表示。和后代选择器的区别就是，只管儿子。

div>p{
  color:red;
}复制代码

序选择器，设置无序列表<ul>中的第一个<li>为红色：

ul li:first-child{
			color:red;
		}复制代码

设置无序列表<ul>中的最后一个<li>为蓝色：

ul li:last-child{
	                color:blue;
		}复制代码

兄弟选择器，h3元素后面紧挨着的第一个兄弟：

h3+p{
	color:red;
    }复制代码

关于一些css3的选择器，咱们后边在作介绍。

三css的继承性

以下代码：

<div style="color: #FF0000">
    <p>11111111111</p>
</div>复制代码

咱们给div标签增长红色样式，却发现，div里的每个子标签<p>也增长了红色样式。这说明有些属性是能够继承的。继承性是从本身开始，直到最小的元素。

那么哪些样式能够继承呢？

• 关于文字样式的属性，都具备继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。

• 关于盒子、定位、布局的属性，都不能继承。

四css的重叠性

层叠性：就是css自动处理冲突的能力。多种选择器同时给P标签增长颜色的属性，这个时候，就出现了层叠性的状况。内部原理是经过计算权重大小来选择样式。

• 先从高等级进行比较，高等级相同时，再比较低等级的，以此类推；
• 彻底相同的话，就采用 后者优先 原则；

那么选择器的权重高低都是多少呢？：

内联样式：    1，0，0，0

ID选择器：    0，1，0，0

类、伪类：    0，0，1，0
标签选择器： 0，0，0，1

例如：这样的样式，哪一个会生效

body#god div.dad span.son {width: 200px;}
body#god span#test {width: 250px;}复制代码

第二个样式有两个ID选择器，因此会选择第二个样式。

tips：在css中，!important的权重至关的高。若是出现了!important，则无论权重如何都取有!important的属性值。可是宽高有例外状况，因为宽高会被max-width/min-width覆盖，因此!important会失效。