HTML5 学习之路 四

CSS的两大重点

属性

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

选择器

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

选择器的作用

选择对应的标签，为之添加样式

• 标签选择器
  根据标签名找到标签

<div>div1</div>
<div>div2</div>
div{
   color:red;
}

这两个标签显示都是红色

• 类选择器
  类选择器的格式 .类名

<p class="=@"higt">第一段文件</p>
<p>第二段文字</p>
<div class="higt">div1</div>
<div>div2</div>
 .higt{
            color: red;
        }

第一段文字 跟 div1 是红色的字体

• id选择器
  id选择器的格式 #id

<p id="first">11111</p>
<p>222222</p>
 #first{
            color: red;
        }

11111是红色

id与class的区别:
id 的名字是唯一的，class可以加到多个标签中

• 并列选择器

<p class="higt">div1</p>
<p>div2</p>
<div class="higt">1111</div>
<div>2222</div>
div,.higt{
            color: red;
        }

除了div2以外 都是红色

• 复合选择器

<p class="higt">div1</p>
<p>div2</p>
<div class="higt">1111</div>
<div>2222</div>
div.higt{
            color: red;
        }

只有1111是红色

• 后代选择器

<div>
       <p>11111</p>
       <span>
           <p>222222</p>
       </span>
   </div>
<p>外面的</p>
div p{
            color: red;
        }

111111和222222都是红色的

常用的就这些选择器，基本可以访问所有的标签了，后面还有
直接后代选择器,属性选择器,相邻兄弟选择器