css 总结1 原

一、由link和@import的区别

1、@import是 CSS 提供的语法规则,只有导入样式表的作用;link是HTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等。

2、加载顺序区别 当 HTML 文件被加载时,link 引用的文件会同时被加载,而 @import 引用的文件则会等页面全部下载完毕再被加载

3.兼容性区别 @import是 CSS2.1 才有的语法,故只可在 IE5+ 才能识别;link标签作为 HTML 元素,不存在兼容性问题。

4.DOM可控性区别 可以通过 JS 操作 DOM ,插入link标签来改变样式;由于 DOM 方法是基于文档的,无法使用@import的方式插入样式。 链接方式:

<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>

导入方式: 导入方式指的是使用 CSS 规则引入外部 CSS 文件。

<style> @import url(style.css); </style>

二、HTML 与XHTML 区别 

XHTML是严格的 HTML 最主要的不同: 1、XHTML 元素必须被正确地嵌套。 2、XHTML 元素必须被关闭。 3、标签名必须用小写字母。 4、所有的 XHTML 元素必须被嵌套于 <html> 根元素中

三、css选择器

1、CSS 元素选择器

html {color:black;} h1 {color:blue;} h2 {color:silver;}

2、选择器分组

假设希望 h2 元素和段落都有灰色。为达到这个目的,最容易的做法是使用以下声明: h2, p {color:gray;}      //  逗号后面的p可以空一格也可以不空

3、id 选择器 

4、类(class)选择器

除了普通的class选择器 还有一种CSS 多类选择器 <p class="important warning"> This paragraph is a very important warning. </p> .important.warning {background:silver;}

5、属性选择器

(1)只含有属性名的选择器,可以含多个属性名

<a title="W3School" href="http://w3school.com.cn">W3School</a>      [title]      {         color:red;      } [title]也可以写成*[title] 还可以根据多个属性进行选择,只需将属性选择器链接在一起即可。 a[href][title] {color:red;}

(2) 含有属性名和属性值的属性选择器(具体属性值选择器)

下面的例子为 title="W3School" 的所有元素设置样式:     [title=W3School]     {        border:5px solid blue;     } title=W3School也可以加引号"" 也可以把多个属性-值选择器链接在一起来选择一个文档。如下: a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}

(3) 部分属性值选择器(带有波浪号)--只要属性值中含有指定的单词而不是字符串

<style type="text/css"> p[class~="important"] { color: red; } </style> <p class="important warning">This is a paragraph.</a>   //匹配 <p class="important">This is a paragraph.</a>                 //匹配 <p class="important11">This is a paragraph.</a>                 //不匹配

(4) 子串匹配属性选择器--匹配属性值以指定的字符串开头、结尾或者含有某个字符串

[abc^="def"]

选择 abc 属性值以 "def" 开头的所有元素

[abc$="def"]

选择 abc 属性值以 "def" 结尾的所有元素

[abc*="def"]

选择 abc 属性值中包含子串 "def" 的所有元素

<style type="text/css"> a[class^="w3school.com.cn"] { color: red; } </style> <a clsss="w3school.com.cn 22">W3School22</a>   //匹配 <a class="w3school.com.cn">W3School</a>            //匹配

 (5) 特定属性选择类型

[attribute|=value]   <p lang="en">Hello!</p>       // 匹配 <p lang="en-us">Hi!</p>       // 匹配 <p lang="en-gb">Ello!</p>    // 匹配 <p lang="en 1">Hello!</p>    //不匹配 [lang|=en] { background:yellow; } 这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。

6、CSS 后代选择器

h1 em {color:red;}

7、CSS 子元素选择器

与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素。 h1 > strong {color:red;}

 8、CSS 相邻兄弟选择器

相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。

h1 + p {margin-top:50px;} 这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”。(选中p)

9、伪类选择器

 (1)超链接

a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF} a:active {color: #0000FF}

(2) input有关的伪类

input:enabled       选择每个启用的 <input> 元素。 input:disabled      选择每个禁用的 <input> 元素 input:checked      选择每个被选中的 <input> 元素。 input:focus         聚焦时的样式 input:focus { background-color:yellow; }

(3)  first-child

p:first-child {font-weight: bold;}

(4) first-of-type

css选择器中:first-child与:first-of-type的区别 p:first-child 匹配p元素父元素的第一个子元素,若第一个子元素不是p元素,则匹配不到任何元素 p:first-of-type 匹配到p元素父元素的第一个p元素    <ul>         <li class="lic1">this is 11</li>         <li class="lic">this is 12</li>         <li class="lic">this is 13</li>     </ul> $(".lic:first-of-type").remove()                //可以 $(".lic:not(.lic:first-of-type)").remove()   //可以

(5) last-child

(6)last-of-type

(7)only-child            // p:only-child 匹配p的父元素的子元素只有一个p,没有其他的子元素

(8)only-of-type        // p:only-of-type (匹配p的父元素只有一个p元素,子元素可能包含其他的元素)

(9)  :nth-child(n) 选择属于父元素的第n个子元素 (10):nth-last-child(n) 选择属于父元素倒是第n个元素 (11)p:nth-of-type(n) 选择属于其父元素第n个p元素(不是p元素的不在排序范围) (12)p:nth-last-of-type(n) 选择属于其父元素倒数第n个p 元素 (13)p:empty 选择p元素没有内容的p元素

(14)target伪类

#news:target { border: 2px solid #D4D4D4; background-color: #e5eecc; } 选择当前活动的#news元素 <p><a href="#news1">跳转至内容 1</a></p> <p><a href="#news2">跳转至内容 2</a></p> <p>请点击上面的链接,:target 选择器会突出显示当前活动的 HTML 锚。</p> <p id="news1"><b>内容 1...</b></p> <p id="news2"><b>内容 2...</b></p>

10、伪元素选择器

主要有 :first-letter :first-line :before :after

 伪类定义 The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors. ?解读:伪类用于选择DOM树之外的信息,或是不能用简单选择器进行表示的信息。前者包含那些匹配指定状态的元素,比如:visited,:active;后者包含那些满足一定逻辑条件的DOM树中的元素,比如:first-child,:first-of-type,:target。

伪元素定义 Pseudo-elements create abstractions about the document tree beyond those specified by the document language. 伪元素为DOM树没有定义的虚拟元素。不同于其他选择器,它不以元素为最小选择单元,它选择的是元素指定内容。 在CSS3中,伪类与伪元素在语法上也有所区别,伪元素修改为以::开头。但因为历史原因,浏览器对以:开头的伪元素也继续支持,但建议规范书写为::开头。

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • echart-仪表盘 原

     gauge : {         startAngle: 225,         endAngle : -45,         axisLine:...

    tianyawhl
  • 包含合并单元格的固定表头 原

    $('#outtableDiv').scroll(function() {             var scrollTop=$('#outtableDiv...

    tianyawhl
  • ionic2.0 beat37 安装 原

    (1)首先安装nodejs           node 下载地址:https://nodejs.org/dist/latest-v5.x/        ...

    tianyawhl
  • 可能是最全最易记的CSS选择器分类大法

    最近查看了几位同事的代码,发现很多CSS书写习惯都是清一色的类名而没有相应的选择器,层层嵌套的标签都包含至少一个类名。有些同学会问,很多文章都说「选择器」有性能...

    JowayYoung
  • 使用BEM命名规范来组织CSS代码

    在本规范中,以双下划线 __ 来作为块和元素的间隔,以单下划线 _ 来作为块和修饰器 或 元素和修饰器 的间隔,以中划线 - 来作为 块|元素|修饰器 名称中多...

    书童小二
  • 前端开发,关键技术点杂烩

    缓存:ETag Expire Last-Modified 三者合用,Expire 可以让浏览器完全不发起 Http 请求,若 F5 发起请求,也可以通过判断 E...

    用户5997198
  • 前端关键技术点杂烩,这些你必须知道

    这里总结一下 WEB 前端面试的常见问题,同时这些问题也是对一些基础的技术概念和思想的理解。对这些基本知识的掌握程度和深度决定了你的技术层级。高级工程师是必须掌...

    用户5997198
  • email.py 邮件发送

    py3study
  • wordcount.java

    package com.biencloud.test; import java.io.IOException;   import java.uti...

    闵开慧
  • Python模块smtplib让群发邮件变得简单1.smtplib模块介绍2.email.utils模块使用3.发送email的其它几个模块4.实例

    SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式...

    意气相许的许

扫码关注云+社区

领取腾讯云代金券