选择器和标签_html/css_WEB-ITnose

CSS中有很多选择器，现在先把其中最常用的三种选择器整理一下相关用法和注意事项。顺便讲下常用的标签。

1、标签名选择器

即以标签名作为使用对象的选择器，对HTML里对应的标签使用样式，例如div{}、p{}等。一般我们拿到UI大姐给的PSD，先要分析大体的布局，哪些可以实现，哪些要和大姐讨论实现。其中可以实现的，还要注意提取公共样式，减轻工作量和精简代码。

2、class选择器

即类选择器，通过给需要设置格式的标签定义class，能用内部和外部方式引用CSS，为相同class名称的标签赋予样式。在标签名选择器的设定基础上增删改动具体的设定，在CSS里的样式为 .class{} 。优先级：class选择器>标签名选择器。

3、id选择器

即给标签设定唯一的ID，给其设定单独的格式，同样是在原来已有的两个选择器格式基础上修改。一个id名称只能在标签中出现一次，且当前html文档中只能出现一次。CSS里的样式为 #id{} 。优先级：id选择器>class选择器>标签名选择器。

4、群组选择器

即是将上述的多个选择器进行捆绑设定，精简代码，例如 p,div,ol,ul {}。

注意：如果是同一种选择器对同一个属性设定了不同的样式，那么以后设定的样式为准。

例如：div {  margin: 0 auto;

                  margin-left: 15px;  }

就会表现为左外边距15px。

常用的标签有三种属性，列一些常见的如下；

块属性标签（block）：div, p , h1~h6, ul, ol , li; 

1. 特性--

1.1 块属性标签可以使用所有的css样式

1.2 块属性标签独占一行

行属性标签（inline) : span, a, em, strong, i, b;

2. 特性--

2.1 不支持设定宽高，大小由文本内容撑开

2.2 同排显示（遇到浏览器边界自动换行）

2.3 在使用margin时，上下margin失效

2.4 在使用padding时，上下padding存在，但是不合理，在开发中不建议使用

2.5 行属性标签在被浏览器解读时，换行被解析。

内联块/行间块属性标签（inline-block): img.

3. 特性--

3.1 支持宽高，在不设置宽高的时候，由内容撑开

3.2 同排显示（遇到浏览器边界自动换行）

3.3 正常使用css样式

3.4  内联块在被浏览器解读时，换行被解析。