前端（四）

一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

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

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会失效。