CSS_基本选择器

目录

一、基本选择器的分类

二、通配选择器

三、元素选择器

四、类选择器（使用频率很高）

五、id选择器

---

一、基本选择器的分类

1、通配选择器

2、元素选择器

3、类选择器

4、id选择器

二、通配选择器

1、作用

可以选中所有的HTML元素

2、语法

例子：

* {

      color: aqua;

 }

三、元素选择器

1、作用

为页面中某种元素统一设置样式

2、语法

例子：

p {

      color: aqua;

 }

3、不足

元素选择器无法实现差异化设置，例如上面的代码中，所有的p元素效果都一样

四、类选择器（使用频率很高）

1、作用

根据元素的class值，来选中某些元素

2、语法

.类名 {

    属性名:属性值;

}

3、举例

（1）代码

/* 选中页面中所有类名为zhang的元素 */
.zhang {
    color: aqua;
    font-size: 10px;
}
/* 选中页面中所有类名为li的元素 */
.li {
    color: yellowgreen;
    font-size: 10px;
}
.other {
    background-color: cadetblue;
}

<h1 class="zhang other">hello</h1>
<p class="zhang">张三说：你好，李四</p>
<p class="li">李四回答：你好，张三</p>

（2）运行效果

 4、注意

（1）一个元素不能写多个class属性

（2）一个元素的class属性，可以写多个值，中间用空格隔开

五、id选择器

1、作用

根据元素的id属性值，来精准的选中某个元素

2、语法

#id值 {

属性名:属性值;

}

3、举例

（1）代码

/* 选中id值为nihao的元素 */
#nihao {
    color: chartreuse;
    font-size: 50px;
}
#zhang {
    color: aqua;
    font-size: 10px;
}
#li {
    color: yellowgreen;
    font-size: 10px;
}
.other {
    background-color: cadetblue;
}

<h1 id="nihao" class="other">hello</h1>
<p id="zhang">张三说：你好，李四</p>
<p id="li">李四回答：你好，张三</p>

（2）运行效果

4、注意

（1）一个元素只能拥有一个id属性，多个元素的id属性值不能相同

（2）一个元素可以同时拥有id和class属性