CSS中常见的选择符

CSS中基础常见选择符

CSS样式由两部分组成，分别是选择符和声明。其中声明由属性和属性值组成
选择符{属性:属性值;}

CSS基础选择符： 选择符表示要定义样式的对象，可以是元素本身，也可以是一类元素或者制定名称的元素.

类型选择符/元素选择符/标签选择器（element选择器）
语法：标签名称{属性：属性值;}
类型选择符是根据html语言中的标记来直接定义
说明：
类型选择符就是网页元素本身，定义时直接使用元素名称，即使用结构中标签名称作为选择符。
所有的页面标签都可以作为类型选择符img,div,a,span,em。

用法：p{color:red}
如果你想要改变一个元素的默认样式时，使用类型选择符
如果你想统一页面中某个元素的显示样式时，使用类型选择符
id选择符
语法：#id名{属性：属性值;}
说明：
Id选择符可对元素进行一个ID名称的指派，id的基本作用是对每一个页面中的唯一出现的元素进行样式定义。
在使用ID选择符前我们应先为元素定义一个ID属性。

说明：
1、当我们使用id选择符时，应该为每个元素定义一个id属性；
如：<div id="top"></div>
2、id选择符的语法格式是“#”加上自定义的id名；
如：#box{width:300px; height:300px;}
3、起名时要取英文名，不能用关键字：(所有的标记和属性都是关键字)
4、一个id名称只能对应文档中一个具体的元素对象，因为id只能定义页面中某一个唯一的元素 对象。
5、最大的用处：创建网页的外围结构

用法示例
html: <div id=“top”></div>
CSS:#top{font-size:12px;color:blue;}

class（类）选择符
语法：．类(class)名{属性：属性值；}
说明：
对同类标签进行不同的样式设定
对不同类的标签进行同样的样式设置

用法：
CSS:.txt{font-size:12px;color:blue;}
html:<div class=“txt”>1111</div>
<div> 222</div>
<p class=“txt”>333</p>

通配符
语法： *{属性：属性值;}
说明：通配选择符的写法是“*”，其含义就是所有元素。用法：常用来重置样式。
*{margin:0; padding:0}将所有元素的边界值和填充值清0。

margin:0 auto;使元素居中（谁居中给谁加）

群组选择符
语法：
选择符1，选择符2，选择符3……{属性：属性值；}
对一组元素进行相同的样式指定，例如：
h1,h2,h3,p{font-size:12px;color:blue;}
使用逗号对选择符进行分离，对页面中使用相同样式的地方只需书写一次样式即可，可减少代码量，改善CSS代码的结构。

包含选择符
语法：父元素 子元素 ……{属性：属性值；｝
对某个对象的子对象进行样式指定，例如：
div a{font-size:12px;color:red;}
包含选择符指选择符组合中前一标签包含后一个标签，之间用空格空开。

利用包含选择符可以避免过多的使用class及id的设置，
并且直接对所需要设置的元素进行了样式设置。
包含选择符除了可以二者包含，也可以多级包含

子选择符
语法：父元素 > 子元素{属性：属性值；｝
例如：
h1 > strong {color:red;}

不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素

伪类选择符
语法 ：
a:link{属性：属性值;}超链接的初始状态;
a:visited{属性：属性值;}超链接被访问后的状态;
a:hover{属性：属性值;}鼠标划过超链接时的状态;
a:active{属性：属性值;}即鼠标按下时超链接的状态;
说明：1）当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为：a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式有些部分失效；
2）为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中；
例如：a{color:red;} a:hover{color:green;} 表示超链接的三种状态都相同，只有鼠标划过变颜色。

选择符的权重
css中用四位数字表示权重，权重的表达方式如：0，0，0，0
类型、标签选择符的权重为0001 a p div span form … 1
class选择符的权重为0010 .class 10
id选择符的权重为0100 # 100
子选择符的权重为0000
属性选择符的权重为0010
伪类选择符的权重为0010
伪元素选择符的权重为0001
包含选择符的权重：为所包含选择符的权重之和
内联样式的权重为1000
继承样式的权重为0000
注：如果权重相同时，则执行后写的样式；

CSS层叠性

一个元素可能同时被多个css选择器选中，每个选择器都有一些css规则，这就是层叠。
这些规则有可能不矛盾的，自然这些规则将会同时起效，然而有些规则是相互冲突的。当发生冲突的时候必须选出一条最高特殊性(权重)的规则来应用。