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” 的所有元素