CSS选择器

选择器的作用

找到特定的HTML页面元素

基础选择器

标签选择器

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
p {
    font-size:14px;
}

类选择器

.类名  {   
    属性1:属性值1; 
    属性2:属性值2; 
    属性3:属性值3;     
}
<p class='类名'></p>
  • 多类名
<p class='class1 class2'></p>

ID选择器

#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
<p id="id名"></p>
  • ID选择器与类选择器

    • 类选择器我们在修改样式中,用的最多。
    • id选择器一般用于页面唯一性的元素身上,经常和我们后面学习的javascript 搭配使用。

通配符选择器

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}

基础选择器总结

选择器 作用 缺点 使用情况 用法
标签选择器 可以选出所有相同的标签,比如p 不能差异化选择 较多 p { color:red;}
类选择器 可以选出1个或者多个标签 可以根据需求选择 非常多 .nav { color: red; }
id选择器 一次只能选择器1个标签 只能使用一次 不推荐使用 #nav {color: red;}
通配符选择器 选择所有的标签 选择的太多,有部分不需要 不推荐使用 * {color: red;}

results matching " "

No results matching " "

results matching " "

No results matching " "