XZ_CSS之CSS选择器和选择器的优先级

CSS全称是Cascading Style Sheets，层叠样式表

用来控制HTML标签的样式，在美化网页中起到非常重要的作用

CSS的编写格式是键值对形式的，比如：

color: blueviolet;

font-size:18px;

background-color: yellow;  

冒号：左边的是属性名，冒号：右边的属性值

CSS的3种书写形式

行内样式：内联样式直接在标签的style属性中书写

<divstyle="color:darkgrey;font-size:18px;">我是容器标签</div>

页内样式：在本网页的style标签中书写

<style>

div{

color: blueviolet;

font-size:18px;

}

</style>

外部样式：在单独的CSS文件中书写，然后在网页中用link标签引用

   <linkrel="stylesheet"href="../html/test.css"/>

CSS规律：1、就近原则；2、叠加原则；

CSS的两大重点

1>属性：通过属性的复杂叠加才能做出漂亮的网页

2>选择器：通过选择器找到对应的标签设置样式

CSS选择器

作用：拿到对应的标签设置样式

1.标签选择器

根据标签名找到选择器

作用：通过对应的标签，为之添加样式 

<div>div1</div>   

<div>div2</div>

div{

color: brown;

background-color: yellow;       

font-size:15px;

}

样式 标签名 { }

2.类选择器

两个不想干的标签，通过类选择器，可以拥有相同的属性;

一个标签可以有多个类  <divclass="test1 test2">我是用来测试优先级的</div>

注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

<pclass="high">我是段落标签</p>

<divclass="high">我是div标签</div>

.high{

color: palevioletred;

}

样式 .类名 { }

3.id选择器

可以为标有特定 id 的 HTML 元素指定特定的样式。

一一对应关系,只能有一个id，不能有<divid="main second">我是用来测试优先级的</div>这种样式

注意：id 属性只能在每个 HTML 文档中出现一次。

<divid="first">我是div标签</div>

#first{

color: teal;

font-size:18px;

}

样式 #id名称 { }

4.并列选择器

相当于逻辑或，只要两个条件满足一个即可，多个标签想要设置相同的样式

<pclass="high">我是段落标签</p>

<divclass="high">我是div标签</div>

div,.high{

color: black;

}

样式 选择器名称，选择器名称 { }

5.复合选择器

相当于逻辑与，满足两个条件

<pclass="high">我是段落标签</p>

<divclass="high">我是div标签</div>

p.high{

color: black;

}

样式 选择器名称选择器名称 { }

6.后代选择器又称为包含选择器。

后代选择器可以选择作为某元素后代的元素。

<div>

<p>div里面的p</p>

<span>

<p>div里面的span里面的p</p>

<ahref="#">我是超链接</a>

</span>

</div>

<p>div外面p</p>

diva{

color: aquamarine;

}

spanp{

color: tomato;

}

7.直接后代选择器

<div>

<p>div里面的p</p>

<span>

<p>div里面的span里面的p</p>

<ahref="#">我是超链接</a>

</span>

</div>

<p>div外面p</p>

div > p{

color: black;

}

8.相邻兄弟选择器

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。

相邻兄弟选择器使用了加号（+），即相邻兄弟结合符。

与子结合符一样，相邻兄弟结合符旁边可以有空白符。

用一个结合符只能选择两个相邻兄弟中的第二个元素。

<div>

<p>div里面的p</p>

<span>

<p>div里面的span里面的p</p>

<ahref="#">我是超链接</a>

</span>

</div>

<p>与div相邻的p</p>

<p>与p相邻的p</p>

div +p{

color: green;

}

8.属性选择器

对带有指定属性的 HTML 元素设置样式。

可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。

注释：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。

一维属性选择器

<divname="jack">Jack</div>

<divname="rose">Rose</div>

<div>ZhangSan</div>

div[name]{

color: darkcyan;

}

二维属性选择器

<divname="jack">Jack</div>

<divname="rose"age="20">Rose</div>

<div>ZhangSan</div>

div[name][age]{

color: darkmagenta;

}

CSS选择器 - 选择器的优先级

 通配符：作用于所有的标签，权值0；

 1.优先级别非常低

 2.性能比较差

css样式遵循的规律：

1.相同类型的选择器遵循：a.就近原则；b.叠加原则

2.不同类型的选择器遵循：

    a>选择器的针对性越强，它的优先级就越高;

    b>选择器的权值加在一起，大的优先；如果权值相同，后定义的优先;

    c>important > 内联 > id选择器 > 类选择器 | 伪类 | 属性选择 | 伪元素 > 标签选择器 > 通配符 > 继承

选择器的权值

通配选择符（*）：0

标签选择器：1

类选择器：10

属性选择器：10

伪类：10

伪元素：10

id选择器：100

important：1000  优先用哪个样式，在后面加！important 例如：

div{

color: red !important;

}

原则：选择器的权值加在一起，大的优先；如果权值相同，后定义的优先

CSS选择器 - 伪类

通过选择器或者标签名先拿到标签,然后再添加伪类操作

<divid="first">我是div标签</div>

/** 当鼠标移动上来 */

#first:hover{

width:300px;

height:100px;

background-color: aqua;

}

<inputplaceholder="我是输入框”/>

/** 伪类 */

input:focus{

/** 去除外线条 */

outline:none;

/** 改变宽度和高度 */

width:200px;

height:50px;

/** 改变文字的大小 */

font-size:20px;

}

CSS选择器 - 伪元素