CSS笔记中

作者: 兔子爱上猪 | 来源:发表于2017-02-20 21:36 被阅读0次

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设置相关内容。

���

相关文章

  • CSS 自学笔记(中)

    传送门: CSS 自学笔记(上) CSS 自学笔记(中) CSS 自学笔记(下) 继承、层叠和特殊性 继承 CSS...

  • CSS 自学笔记(上)

    传送门: CSS 自学笔记(上) CSS 自学笔记(中) CSS 自学笔记(下) 1. 简介 CSS 是层叠样式表...

  • CSS 自学笔记(下)

    传送门: CSS 自学笔记(上) CSS 自学笔记(中) CSS 自学笔记(下) 代码简写 布局缩写 paddin...

  • HTML&CSS&JavaScript基本介绍

    本文内容为慕课网学习笔记。 CSS CSS样式类型 内联式css样式,直接写在现有的HTML标签中 嵌入式css样...

  • #css 全称为“层叠样式表”

    css 全称为“层叠样式表” 声明,本文为学习慕课网HTML+CSS中CSS笔记http://www.imooc....

  • CSS笔记中

    1. CSS选择器 a. 标签选择器:标签选择器就是选择当前页面中相同名字的标签。 b. 通配符选择器...

  • css的层叠

    css2的css的层叠 《css世界》的读书笔记,非原创。背景是css2。 z-index只是层叠规则中的一个属性...

  • Sass学习笔记4 - 总结篇

    CSS预处理器 —— Sass学习笔记4 注释 单行注释: // 不会被编译后的css文件中 多行注释:/...

  • 《用字体在网页中画ICON图标》笔记

    慕课网 用字体在网页中画ICON图标 学习笔记 一、用 CSS Sprite 实现 icon 图标 CSS Spr...

  • CSS学习笔记(2018-07-29)

    CSS学习笔记 CSS 指层叠样式表 (Cascading Style Sheets) CSS语法 CSS 规则由...

网友评论

    本文标题:CSS笔记中

    本文链接:https://www.haomeiwen.com/subject/eknewttx.html