CSS常规选择器及特殊选择器

标签选择器:

        p {

            color: red;

        }


类选择器

        .pColor1 {

            color:blue;

        }


ID选择器

        #pColorId {

            color: yellow;

        }


逗号写法,表示A和B,如类c1和c2的样式:

        .c1, .c2 {

            color: yellow;

        }


空格写法,表示A下面的B,如body下面的c2的样式:

        body .c2 {

            color: yellow;

        }

CSS特殊选择器

CSS有几种特殊的选择器,如:

1.*号选择器表示页面中的所有标签

* {

    color: blue;

}

2.+号表示紧随class后面的同级标签元素

.cl+p{

    font-size: 40px;

}

3.~表示class后面的所有同级p标签元素

.cl~p{

    color:red;

}

4.> 号表示class后面的子元素的span标签

.cl>span{

    font-size: 50px;

    color:yellow;

}

5.a[xxx] 表示了设置xxx属性的a标签,如设置了title属性的a标签则可以写成如下形式

a[title]

{

    font-size: 50px;

}

实例源码:

11111111111 类cl下面的子元素span标签

紧随class cl的同级p标签

cl类后面的同级p标签1

cl类后面的同级p标签2

cl类后面的同级p标签3

cl类后面的非同级p标签


运行后效果

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 1,635评论 0 6
  • 一、CSS选择器常见的有几种? 基本选择器 通配选择器~选择文档中所有的html元素,用一个*表示 元素选择器~选...
    dengpan阅读 980评论 0 3
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,636评论 32 459
  • CSS选择器常见的有几种? 类型选择器(元素选择器): 后代选择器 上述选择器适用于那些应用范围广的一般样式。 I...
    coolheadedY阅读 587评论 1 2
  • 俄罗斯的白夜,是我买的第二个水彩,也是第一盘固体颜料。 相比于日本产或者其他欧洲产的颜料,白夜的颜色真的是很符合战...
    Juno修行僧阅读 9,212评论 4 4