CSS笔记中

1. CSS选择器

      a. 标签选择器:标签选择器就是选择当前页面中相同名字的标签。

       b. 通配符选择器:通配符*代表所有的标签。通过通配符选择器可以选择页面中的所有的标签。                                          穿透力很强。*{   }

       c. ID选择器:

               A. HTML标签中ID的属性值在一个页面中必须是唯一的。

               B. ID选择器是可以帮助我们选择当前页面中唯一id值的标签,也就是根据标签的id属性值进                     行选取设置样式。

                C. ID选择器的的符号是#号。

         d. 类选择器:

                 A. 类选择器就是选取页面中所有标签的class属性值相同的一类标签。

                 B. 类选择器的符号是:.  (点)

          e. 层级选择器,分组选择器,属性选择器,子元素选择器,相邻兄弟选择器,伪类选择器,伪               元素选择器;

注意:ID选择器和class(类)选择器的区别

            1、相同的Class属性值,可以在HTML中出现多次。ID属性值在页面中只能出现一次。

            2、一个class的属性可以有多个值,也就是说一个标签可以有多个类。

2. 复合选择器

        a. 标签指定选择器:标签指定式复合选择器,要求必须是标签开头然后其他选择器。eg: p.left{ }

        b. 后代选择器:后代选择器用来选择元素或元素组的后代,其写法就是把外层标记写在前面,                                       内层标记写在后面,中间用空格分隔。当标记发生嵌套时,内层标记就成为外                                       层标记的后代。后代不仅仅包括儿子,还包括子子孙孙。

       c. 子代选择器:子代选择器,是让CSS选择器智能选择儿子辈的元素。

                            eg:p> em {color:red;}

                            解读为:选择器p > em可以解释为“选择作为p元素子元素的所有em元素”。

                            尖括号和选择器之间可以有空格也可以没有,没有限制。

                            建议:选择器和尖括号间有空格。

      e. 属性选择器:属性选择器就是根据html标签的属性进行过滤选择。

     f. 伪类选择器:

   :link  伪类将应用于未被访问过的链接。IE6不兼容,解决此问题,直接使用a标签。

   :hover   伪类将应用于有鼠标指针悬停于其上的元素。在IE6只能应用于a连接,IE7+所有元素都兼                    容。

   :active    伪类将应用于被激活的元素,如被点击的链接、被按下的按钮等。

   :visited   伪类将应用于已经被访问过的链接

   :focus     伪类将应用于拥有键盘输入焦点的元素。

   顺序问题:LoVe  HAte原则。

g.伪元素选择器:伪元素是控制内容

:first-line伪元素

:first-letter伪元素

注释:以上两个伪元素只能用于块级元素

:first-child伪元素,选择属于第一个子元素的元素。

例如:span:first-child{}  /*选择属于第一个子元素的所有span标签。*/

:before与:after伪元素,可以设置元素之前后之后的 内容,并且配合content设置相关内容。

���



最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,367评论 6 512
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,959评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,750评论 0 357
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,226评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,252评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,975评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,592评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,497评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,027评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,147评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,274评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,953评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,623评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,143评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,260评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,607评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,271评论 2 358

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,678评论 18 139
  • 1.CSS 元素选择器 最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。如果设置 H...
    饥人谷_小侯阅读 864评论 0 1
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 1,838评论 0 6
  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 11,000评论 6 13
  • 见过的人多了,懂得也就多了 第一次与别人吵架,是与sjw,高中认识的第一个女生,她很漂亮,至少跟她玩的时候我是这么...
    是我啊Jacky阅读 267评论 0 2