简介： HTML-选择器

选择器

优先级：ID选择器>类选择器> HTML标签选择器

ID选择器

在html中用id标记，在css中用#标记

<span id="special" class="menu">栏目一</span>    <!--同时设置多个选择器并设置不同文字颜色，运行时如何选择？-->
.menu {    /*类选择器*/
    color:greenyellow;  /*文字颜色*/
}
 
#special   { /*ID选择器*/
    font-weight: bold;  /*粗体*/
    color:red;
}

效果展示：

---

类选择器

在html中用class标记，在css中用"."来标记

第①种情况：一个类同时有多个属性值并设置不同文字颜色，运行时如何选择显示颜色？

<span class="menu xian">栏目二</span>      <!--多个标签如何选择先后级，取决于css排列顺序-->
.menu {    /*类选择器*/
    color: greenyellow; /*文字颜色*/
}
 
.xian { /*类选择器*/
    color: red; /*文字颜色*/
    text-decoration: underline; /*下划线*/
}

效果展示：

第②种情况：嵌套标签

 <span class="title">这是<span>一</span>条新闻标题</span>
.title { /*新闻标题样式*/
    color: red; /*文字颜色*/
}
 
 
.title span { /*title下的span标签设置*/
        color: cornflowerblue; /*文字颜色*/
        font-size: 20px; /*字体大小*/
}

效果展示：