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浏览器上出现兼容性问题

猜你喜欢

转载自blog.csdn.net/hjc256/article/details/80861809