CSS 样式表及选择器

三种样式表

外部样式表(External style sheet)

内部样式表(Internal style sheet)

内联样式(Inline style)

css的样式特性

多重样式优先级

选择器

1.通用选择器

2.元素选择器

3.ID选择器

4.类选择器

5.后代选择器(以空格分隔)

6.子代选择器 (以大于 > 号分隔）

7.相邻兄弟选择器（以加号 + 分隔）

8.普通（后续）兄弟选择器（以波浪号～分隔）

9.交集选择器(标签名.ID名/类名)

10.并集选择器（用 , 隔开）

11.通配符选择器（*{}）

12.伪类选择器

12.1 anchor伪类

12.2 input伪类

12.3 other伪类

13.属性选择器

14.子串匹配属性选择器

选择器优先级顺序

三种样式表

外部样式表(External style sheet)


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

内部样式表(Internal style sheet)


<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式(Inline style)


<p style="color:sienna;margin-left:20px">这是一个段落。</p>

css的样式特性

①继承性

  文本样式和字体样式的继承
  绝大多数文本字体样式，可以被继承
  a标签不会继承字体颜色

②堆叠性

为一个标签定义多个样式规则
如果样式属性不冲突，都会作用到这个标签上

③优先级

  默认优先级
  高内联样式
  中内部样式，外部样式——-就近原则
  低浏览器默认样式
  f12关于优先级的显示
  默认情况下，f12中样式是按照默认优先级顺序从上往下显示

④调整优先级

设置最高优先级 !important，比内联都高
写在某一个值与分号之间，!important与值之间有空格
color: red !important ;
注意，内联样式不允许设置!important，语义要求

多重样式优先级

（内联样式） > （内部样式）（外部样式） > 浏览器默认样式

选择器

1.通用选择器

通配符选择器可以匹配任何标签，我们常用于统一页面样式。

{样式声明} （匹配所有元素，但是的效率非常低，不建议使用）
例：*{margin:0；padding:0}

2.元素选择器

标签关键字{样式声明;}
div{} p{}

3.ID选择器

<元素 id=“id值”>
#id值{样式声明}
id在一个页面中不能重复，所有id选择器只被一个元素应用

4.类选择器

使用.定义样式，哪个元素想用，用class都能调用

<元素 class=“类名”>
.类名{样式声明}

类选择器的其它用法

①.多类选择器

<元素 class="类名1 类名2 类名3.......">

②.分类选择器

元素选择器.类选择器{样式声明}
.类选择器.类选择器{样式声明}
.tooltip.show{}

③.类名的定义规范

  ①必须有.
  ②不能以数字开头
  ③只能包含- 或者_
④尽量见名知意

5.后代选择器(以空格分隔)

通过元素的后代关系，来匹配元素
后代关系：一层嵌套或者多于一层嵌套称为后代
选择器1 选择器2 选择器3{样式声明}

需求描述 ：为所有DIV标签中的所有p标签添加红色文本

    <div><p>儿子标题</p><span><p>孙子标题</p></span><p>儿子标题</p><span><span><p>后代标题</p></span></span></div><div><p>儿子标题</p><span><p>孙子标题</p></span><p>儿子标题</p><span><span><span><p>后代标题</p></span></span></span></div><p>非后代</p>

div p{color:red;
}

效果：

6.子代选择器 (以大于 > 号分隔）

通过元素子代关系，来匹配元素
子代关系，一层嵌套为子代
选择器1>选择器2>选择器3{样式声明}

需求描述 ：为div标签下所有h1儿子节点设置为红色文本样式

<div><h1>儿子标题</h1><span><h1>孙子标题</h1></span><h1>儿子标题</h1>
</div>

div>h1{color: red;
}

效果：

子代和后代选择器可以混合使用
#d1>p span{color:red;}

7.相邻兄弟选择器（以加号 + 分隔）

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。定义的时候用 + 隔开。

需求描述 ：为所有div之后的第一个p标签元素设置为黄色文本样式

    <div><p>DIV 内部段落。</p></div><p>DIV 之后的第一个 P 元素。</p><p>DIV 之后的第二个 P 元素。</p><div><p>DIV 内部段落。</p></div><p>DIV 之后的第一个 P 元素。</p><p>DIV 之后的第二个 P 元素。</p>

div + p {background-color: yellow;
}

效果：

8.普通（后续）兄弟选择器（以波浪号～分隔）

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

需求：选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> :

    <div><p>DIV 内部段落。</p></div><p>DIV 之后的第一个 P 元素。</p><p>DIV 之后的第二个 P 元素。</p><p>DIV 之后的第三个 P 元素。</p><a href="">DIV 之后的第4个 a元素</a><p>DIV 之后的第五个 P 元素。</p><div><p>DIV2 内部段落。</p></div><p>DIV2 之后的第一个 P 元素。</p><p>DIV2 之后的第二个 P 元素。</p>

div~p{background-color:yellow;}

效果：

element1~element2 p ~ ul 选择前面有 <p> 元素的每个 <ul> 元素。

9.交集选择器(标签名.ID名/类名)

选择的元素必须同时满足多个条件才可以被选择，交集选择器就是干这个的。定义的时候用标签名.ID名/类名。

需求描述：为所有p标签且class为part的段落添加绿色文本样式

<p class="part">段落1</p>
<h1 class="part">标题</h1>
<p class="part">段落2</p>

p.part {color: red;
}

效果：

10.并集选择器（用 , 隔开）

多种元素共享某种属性，这时候就可以使用并集选择器。定义的时候用逗号隔开。

需求描述：为p标签、h1标签、class=‘link’、id='click’的这几种元素添加红色文本样式

<p>段落</p>
<h1>标题</h1>
<a href="https://www.baidu.com/" class="link">打开百度，你就知道！</a>
<button id="click">我是按钮</button>

p, h1, .link, #click {color: red;
}

效果：

11.通配符选择器（*{}）

通配符选择器可以匹配任何标签，我们常用于统一页面样式。

需求描述：将页面所有元素的字体设置为红色文本样式

<div>DIV文本</div>
<p>P文本</p>
<a href="https://www.baidu.com">打开百度，你就知道！</a>

* {color: red;
}

12.伪类选择器

匹配元素在某一个状态时的样式

12.1 anchor伪类

选择器	示例	示例说明
:link	a:link	选择所有未访问链接
:visited	a:visited	选择所有访问过的链接
:active	a:active	选择正在活动链接
:hover	a:hover	把鼠标放在链接上的状态
:active	a:active	已选中的链接样式

12.2 input伪类

选择器	示例	示例说明
:focus	input:focus	选择元素输入后具有焦点
:checked	input:checked	选择所有选中的表单元素
:disabled	input:disabled	选择所有禁用的表单元素
:enabled	input:enabled	选择所有启用的表单元素
:in-range	input:in-range	选择元素指定范围内的值
:out-of-range	input:out-of-range	选择元素指定范围外的值
:invalid	input:invalid	选择所有无效值的元素
:valid	input:valid	选择所有有效值的元素
:optional	input:optional	选择没有"required"属性的元素
:required	input:required	选择含有"required"属性的元素
:read-only	input:read-only	选择只读属性的元素
:read-write	input:read-write	选择可写属性的元素

12.3 other伪类

选择器	示例	示例说明
:not(selector)	:not(p)	选择所有p元素以外的元素
:empty	p:empty	选择所有没有子元素的p元素
:first-child	p:first-child	选择所有p元素的第一个子元素
:first-of-type	p:first-of-type	选择的每个p元素是其父元素的第一个p元素
:last-child	p:last-child	选择所有p元素的最后一个子元素
:last-of-type	p:last-of-type	选择每个p元素是其父元素的最后一个p元素
:nth-child(n)	p:nth-child(2)	选择所有p元素的父元素的正数第二个子元素
:nth-of-type(n)	p:nth-of-type(2)	选择所有p元素正数的第二个为p的子元素
:nth-last-child(n)	p:nth-last-child(2)	选择所有p元素的父元素的倒数第二个子元素
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择所有p元素倒数的第二个为p的子元素
:only-child	p:only-child	选择所有仅有一个子元素的p元素
:only-of-type	p:only-of-type	选择所有仅有一个子元素为p的元素
:first-letter	p:first-letter	选择每个p元素的第一个字母
:first-line	p:first-line	选择每个p元素的第一行
:before	p:before	在每个p元素之前插入内容
:after	p:after	在每个p元素之后插入内容

13.属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。

需求描述：为类型为text和button的input标签设置一下样式

<input type="text" value="文本框">
<input type="button" value="按钮">

input[type="text"] {width: 150px;display: block;margin-bottom: 10px;background-color: yellow;
}input[type="button"] {width: 120px;margin-left: 35px;display: block;
}

需求描述：如果title中包含多个单词并且以空格分隔，只要其中有hello，则为当前标签设置为蓝色字体样式

<h2>将会适用:</h2>
<h1 title="hello world">Hello world</h1>
<p title="student hello">Hello CSS students!</p><h2>将不适用:</h2>
<p title="student">Hi CSS students!</p>

[title~=hello] {color: blue;
}

需求描述：如果title中包含一个单词，只要其中有zh，则为当前标签设置为蓝色字体样式

<h2>将会适用:</h2>
<p lang="zh">Hello!</p>
<p lang="zh-cn">Hi!</p><h2>将不适用:</h2>
<p lang="us">Hello!</p>
<p lang="en">Hi!</p>

[lang|=zh] {color: blue;
}

14.子串匹配属性选择器

下面为您介绍一个更高级的选择器模块，它是 CSS2 完成之后发布的，其中包含了更多的部分值属性选择器。按照规范的说法，应该称之为“子串匹配属性选择器”。很多现代浏览器都支持这些选择器，包括 IE7。

下表是对这些选择器的简单总结：

类型	描述
[abc^=“def”]	选择 abc 属性值以 “def” 开头的所有元素
[abc$=“def”]	选择 abc 属性值以 “def” 结尾的所有元素
[abc*=“def”]	选择 abc 属性值中包含子串 “def” 的所有元素

如果希望对指向 baidu 的所有链接应用样式，不必为所有这些链接指定 class，再根据这个类编写样式，而只需编写以下规则：

a[href*="baidu.com"] {color: red;
}

选择器优先级顺序

内联样式 >

ID 选择器 >

类选择器 = 伪类选择器 = 属性选择器 >

标签选择器 = 伪元素选择器

CSS 样式表及选择器

三种样式表

外部样式表(External style sheet)

内部样式表(Internal style sheet)

内联样式(Inline style)

css的样式特性

多重样式优先级

选择器

1.通用选择器

2.元素选择器

3.ID选择器

4.类选择器

5.后代选择器(以空格分隔)

6.子代选择器 (以大于 > 号分隔）

7.相邻兄弟选择器（以加号 + 分隔）

8.普通（后续）兄弟选择器（以波浪号～分隔）

9.交集选择器(标签名.ID名/类名)

10.并集选择器（用 , 隔开）

11.通配符选择器（*{}）

12.伪类选择器

12.1 anchor伪类

12.2 input伪类

12.3 other伪类

13.属性选择器

14.子串匹配属性选择器

选择器优先级顺序

Published by

风君子

三种样式表

外部样式表(External style sheet)

内部样式表(Internal style sheet)

内联样式(Inline style)

css的样式特性

多重样式优先级

选择器

1.通用选择器

2.元素选择器

3.ID选择器

4.类选择器

5.后代选择器(以空格 分隔)

6.子代选择器 (以大于 > 号分隔）

7.相邻兄弟选择器（以加号 + 分隔）

8.普通（后续）兄弟选择器（以波浪号 ～ 分隔）

9.交集选择器(标签名.ID名/类名)

10.并集选择器（用 , 隔开）

11.通配符选择器（*{}）

12.伪类选择器

12.1 anchor伪类

12.2 input伪类

12.3 other伪类

13.属性选择器

14.子串匹配属性选择器

选择器优先级顺序

Published by

风君子

5.后代选择器(以空格分隔)

8.普通（后续）兄弟选择器（以波浪号～分隔）