css入门【3】-css基础选择器

1.标签选择器

直接用标签名来进行选择

 p{
        font-size:30px;
        color:skyblue;
        font-family:"Arial","SimSun","Microsoft Yahei";
    }
  <p>this is a paragraph,这是一个段落</p>
  <p>this is a paragraph,这也一个段落</p>

选中之后，所有的p标签格式都改变。不管嵌套关系多复杂，标签位置藏得多深，都可以通过标签选择器选中。

2.id选择器

通过标签的id属性值来选择相应的标签。
选择器写法：#开头，后面跟着id名，中间没有任何空格。在一个css文件中红每个id必须是唯一的，每个标签也只能有一个id。
id必须以字母开头（严格大小写，就是a和A是不一样的），后面可以是数字，下划线或者横线。

#first{
      width:1300px;
      height:300px;
      background:pink;
      color:grey;
      font-size:40px;
      border:5px solid black;
    }

    <div id="first">这里是一段文字</div>

id常用场景：并不是留给css来添加样式，而是为了给js添加行为。

3.类选择器

通过标签的class属性来选择这个标签。
选择器写法：.开头，后面跟着class属性值，中间不能有空格。类名可以不唯一，类选择器选择的是所有class名相同的标签。一个标签也可以有多个类属性。
class的命名规则和id一样。

 .ysl{
        color:red;
    }
    
 <p class="ysl">这是一段文字</p>
    <div class="ysl">这是一个容器</div>

根据类的特性。我们要习惯使用原子类。原子类设置的原则，里面只设置一个单一的css属性。某一个标签需要添加这个属性，可以直接添加这个原子类的类型。

.hong{
        color:red;
    }
    .fen{
        color:pink;
    }
    .fs14{
        font-size:14px；
    }

4.通配符

可以选择body在内的所有标签。（写在已经不常用，效率不高）可以用作简单案例的默认样例。

 *{
        margin:0;
        padding:0;
    }