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({});
腾讯云开发者
