CSS选择器

CSS选择器

id选择器 #id名{}

• id选择器可以为标有特定id的HTML元素指定样式

#test {
    color:red
}

<p id="test">我将以红色显示</p>

class选择器 .class名{}

• 多个元素可以有同一个class
• 一个元素可以有多个class

.center{
    text-align: center;
}
.size{
    font-size: 40px;
}

<p class="center">加了center类，居中显示</p>
<p class="size">加了size类，字体变大</p>
<p class="center size">既居中又变大</p>

标签选择器 标签名{}

• 标签选择器只需要标签名就OK了 什么都不用加
• 下面示例中所有p标签里面的字都变为棕色

p{
    color: brown;
}

分组选择器 A,B{}

• A B分别为2种选择器
• A B2种选择器选中的元素同时生效

包含选择器 A B{}

• A B分别为2种选择器
• B必须包含在A内

子选择器 A>B{}

• A B分别为2种选择器
• B必须为A的亲儿子（孙子不行）

兄弟选择器 A~B{}

• A B分别为2种选择器
• A B同级,而且B是A的小兄弟

属性选择器 A[属性]{}

• 选择器A选中的元素中有某个属性的元素被选中
• 可以给属性赋值再一次过滤 格式为 A[属性=”值”]

通配选择器 *{}

• 选中所有元素

选择器的优先级

• id选择器 > class选择器 > 标签选择器 > 通配选择器