css 总结1-白红宇

css 总结1

阅读量：6600 次

发布时间：2019-06-24

本文共 4638 字，大约阅读时间需要 15 分钟。

一、由link和@import的区别

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

2、加载顺序区别

当 HTML 文件被加载时，link 引用的文件会同时被加载，而引用的文件则会等页面全部下载完毕再被加载

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中，伪类与伪元素在语法上也有所区别，伪元素修改为以::开头。但因为历史原因，浏览器对以:开头的伪元素也继续支持，但建议规范书写为::开头。

11、表格内容长字符串换行

发现在div中如果有较长的字符串使用word-wrap: break-word; 可以换行，但是在表格中要换成 word-break:break-all;