CSS简单选择器

若希望为某个HTML元素设置CSS样式，需要在样式中设置id和class选择器

---

一、id选择器

id选择器可以为标有特定id的元素设置样式，HTML中用id属性来为元素设置id，CSS中使用“#”来设置选择器

#para1 {
    text-align:center;
    color:red;
}

 

注：一个ID名称必须在文件中是唯一的。关于重复ID的行为是不可预测的，比如在一些浏览器只是第一个实例计算，其余的将被忽略。

 

二、class选择器

class选择器可以为标有特定class名的一类元素设置样式，HTMl中使用class属性来设置class，CSS中使用“.”来设置选择器。

.center {
    text-align:center;
}

 

注：类名是在HTML class文档元素属性中没有空格的任何值。由你自己选择一个名字。同样值得一提的是，文档中的多个元素可以具有相同的类名，而单个元素可以有多个类名(以空格分开多个类名的形式书写)。

 

三、派生选择器

依据元素在其位置的上下文关系来定义样式，使标记更简洁。

li strong{
   font-style:italic;
   font-weight: normal;
}

 

四、属性选择器

 

为带有指定属性的HTML元素设置样式

[title]{
    color: red;
}

 

五、使用方法

 

* //为所有元素制定样式，由于效率原因基本不会使用
p //为所有p标签设置样式
p, div //为所有p，div标签设置样式
div p //为所有div标签内的p标签设置样式
div>p //为所有父元素为div标签的p标签设置样式
[target] //为所有包含target的元素设置样式
[target=test] //为所有target属性为“test”的元素设置样式
[target~=test] //为所有target属性值中包含“test”单词的元素设置样式

注：不要在id以及class名的首位使用数字，可能会在Firefox浏览器上出现兼容性问题