CSS语法

选择器{
属性名:属性值;
...
}
选择器：筛选具有相似特征的元素
注意：最后一个属性可以不加分号

---

 

1.基础选择器

①id选择器

选择具体的id属性值的标签
语法：

#id{
　　属性名:属性值;
　　...
}

②元素选择器

选择具有相同标签名称的元素
语法：

标签名称{
　　属性名:属性值;
　　...
}

③类选择器

选择具有相同的class属性值的元素
语法：

.class名称{
　　属性名:属性值;
　　...
}

.girl{
　　属性名:属性值;
　　...
}
.beauty{
　　属性名:属性值;
　　...
}

<div class="girl">人</div>
<div class="girl beauty">人</div>

④优先级

id选择器>类选择器>元素选择器

 

2.扩展选择器

1.选择所有元素

语法：

*{
属性名:属性值;
...
}

2.并集选择器

语法：

选择器1，选择器2{
　　属性名:属性值;
　　...
}

3.子选择器

含义：选择：选择器1下的子选择器2。
语法：父 子

选择器1 选择器2{
　　属性名:属性值;
　　...
}

4.父选择器

含义：选择父元素为 选择器1 元素的，所有 选择器2 元素。
语法：父>子

选择器1>选择器2{
属性名:属性值;
...
}

5.属性选择器

语法：
一般用于input标签

标签名称[属性名称="属性值"]{
　　属性名:属性值;
　　...
}

6.伪类选择器

含义：选择一些元素具有的状态
语法：

标签:状态{
属性名:属性值;
...
}

如：<a>
状态：
　　link：初始化的状态
　　hover：鼠标悬浮状态
　　active：正在被访问的状态
　　visited：被访问过的状态