CSS选择器+优先级的详细介绍_小梁在学习.

CSS选择器

用处：选择页面上的某一个或者某一类元素

基本选择器

尽量取名字时可以见名知意 即使是一个简单的页面 也会需要很多css样式

1.标签选择器

• HTML结构

<h1>小梁在学习</h1>
<h1>小梁爱学习</h1>
<p>跟小梁学习HTML和CSS</p>

• CSS样式
  • 直接根据标签给样式
    • 如选中h1标签就是给【所有】h1标签一个颜色

<style>
    h1{
        color: deeppink;
    }
    p{
        color: orange;
    }
</style>

• 效果 注意是所有h1标签
  

2.类选择器

• 关键字class：把想要样式统一的标签给一个相同的名称 用.来选
• 具有复用性 class可以重复
  • .class名称{样式}
• HTML代码

<h1 class="xl">小梁在学习</h1>
<h1>小梁爱学习</h1>
<p class="xl">跟小梁学习HTML和CSS</p>

• CSS代码

<style>
    .xl{
        color: aqua;
    }
</style>

• 效果

3.ID选择器

• 关键字id：给标签一个单独的属性样式 用#来选

• 具有唯一性 id不能重复

  • #id名称{样式}

• HTML代码

<h1 id="xl1">小梁在学习</h1>
<h1 id="xl2">小梁爱学习</h1>
<p id="xl3">跟小梁学习HTML和CSS</p>

• CSS代码

<style>
    #xl1{
        color: blueviolet;
    }
    #xl2{
        color: #3fa0db;
    }
    #xl3{
        color: #dbae1c;
        font-size: 20px;
    }

</style>

• 效果

4.*选择器

• *代表选中所有
  • *{样式}

优先级

• 不走就近原则 是固定的优先级

• 没有类和id的情况下：标签选择器生效

• id选择器>类选择器>标签选择器