【无标题】

CSS选择器以及权重问题

选择器：就是给标签取名字

一、选择器的类型

1、标签（类型）选择器：（权重为1）
标签选择器可以对所有的同类标签起作用，对应标签div/p/i/strong
语法：标签{属性：属性值；}
应用场景：需要统一或者清除标签内容的样式时；
2、id选择器：（权重为100）

语法：
在标签内给用id给标签起名字：<标签 id=“名称”></标签>

样式表内用#名字写样式： #名称{属性：属性值;}

特点：相对于身份证号，具有唯一性！同一个页面里只能使用一次！

应用：给div起名，划分网页外部结构
3、类名选择器（权重为10）

语法：.类名{属性:属性值;}

<标签 class=“类名”>

应用：对网页版块内部的标签命名

特点：可以多个标签共用一个类名，且一个标签可以有多个类名(用空格隔开），做到同时对多个同类名标签的样式进行更改，达到一类样式的效果。

4、群组选择器：

以逗号分隔的形式，把多个选择器分成一组，方便给多个选择器统一添加样式

语法：选择器1，选择器2，选择器3{属性:属性值;}

例：#nav,#loge,.box1 {background:blue;}

5、后代选择器：

语法：父标签/选择器 子标签/选择器 {属性:属性值;}

例如：div table tr {width:100px;}

#nav .box1 p {font-size:20px;}
6、伪类选择器：（只有a:hover常用，权重为0）

语法：

a:link{color:red;} 链接未访问时的颜色

a:visited{color:green;} 链接访问后的颜色

a:hover{color:blue;} 链接被划过时的颜色

a:active{color:yellow;} 鼠标按下时链接的颜色

如果四个同时用，顺序不能变，但是一般只用a:hover 改变链接划过时的样式

除了更改超链接，hover还可以更改其他标签的属性达到交互的效果：

.box:hover{background-color:red} 鼠标划过时，背景就会发生变化。

.box:hover h3{background-color:red} 鼠标划过.box时，改变子元素h3的样式。

7、通配符选择器：（没有权重可言）

• {margin:0;padding:0;} 清除所有标签的内外间距。

二、选择器的命名范围

1、尽量小写字母开头
2、不能使用关键字命名

3、建议驼峰式命名法：news_left,ba

常见命名：nav（导航栏）、.con（内容的类名）、logo（标志）、banner（横幅）

命名实际上是对醒目理解程度的一个反映，合理的命名可以帮助你迅速找到对应的版块；

三、补充

浏览器解析CSS选择器时的规律：

1、不同选择器的样式设置发生冲突时，高权重的样式覆盖低权重的样式：

例： div .con 他的权重是1+10=11；

.con的权重是 10

所有会造成.con的样式失效的现象。

2、当选择器的权重相同时，哪个选择符最后定义，哪个选择符的样式生效；

这个顺序是CSS中选择符定义的顺序，而不是html里的使用顺序