CSS 选择器之基础选择器

无人久伴 提交于 2020-02-26 02:42:44

基础选择器的分类

  1. id选择器:选择具体的id属性值的元素

  2. 元素选择器:选择具有相同标签名称的元素

  3. 类选择器:选择具有相同的class属性值的元素。

 

id选择器

id选择器,是根据标签的id属性值选择对应的标签的。

格式:

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

举例:定义两个p标签,且标签的id属性值不同,然后用CSS定义p标签的内容如何显示。

Google浏览器中打开,查看效果:

元素选择器

元素选择器是根据标签的名称来选择对应的标签的。

格式:

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

举例:定义两个div标签,通过元素选择器定义p标签的内容如何显示。

Google 浏览器中打开,查看效果:

注意:id选择器优先级高于元素选择器

 

类选择器

类选择器,是根据标签的class属性值选择对应的标签的。

格式:

.class值 {
    属性名1:属性值1;
    属性名2:属性值2;
    ...
}

举例:定义两个p标签,且标签的class属性值不同,然后用CSS定义p标签的内容如何显示。

Google 浏览器中打开,查看效果:

注意:类选择器选择器优先级高于元素选择器

 

          

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!