CSS层叠样式表简介与选择器详解

最新推荐文章于 2021-11-23 11:31:43 发布

原创最新推荐文章于 2021-11-23 11:31:43 发布 · 943 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css

简介

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

CSS语法规范

CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。

选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式
属性和属性值以“键值对”的形式出现
属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
属性和属性值之间用英文“:”分开
多个“键值对”之间用英文“;”进行区分

所有的样式，都包含在 <style> 标签内，表示是样式表。<style> 一般写到 </head> 上方。

代码示例:

<head>
<!-- 所有的样式，都包含在 <style> 标签内，表示是样式表。<style> 一般写到 </head> 上方。 -->
<style> 
/* h4为选择器，代表选中页面中的所有<h4>标签，  花括号内是对该对象设置的具体样式 */
h4 {
/* 属性和属性值以“键值对”的形式出现   其中color为属性， 冒号后面的 "blue; font-size: 100px" 为属性值*/
  color: blue; font-size: 100px;
}
</style>
</head>

CSS 代码风格:

以下代码书写风格不是强制规范，而是符合实际开发书写方式:

1。样式格式书写

① 紧凑格式

h3 { color: blue;font-size: 20px;}

② 展开格式:

h3 {
color: blue;
font-size: 20px;
}

建议使用第二种格式，因为更直观。

2。样式大小写风格

h3 {
color: blue;
}

或者:

H3 {
  COLOR: BLUE;
}

推荐使用样式小写风格，可读性更强。

3。样式空格风格

h3 {
color: blue;
}

① 属性值前面，冒号后面，保留一个空格

② 选择器（标签）和大括号中间保留空格

CSS之基础选择器:

选择器的作用:

要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。选择器就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说，就是选择标签用的。

选择器分类:

选择器分为基础选择器和复合选择器两个大类，我们这里先学习一下基础选择器。

基础选择器是由单个选择器组成的
基础选择器又包括：标签选择器、类选择器、id 选择器和通配符选择器

标签选择器:

标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。

语法:

标签名{
	属性1: 属性值1; 
	属性2: 属性值2; 
	属性3: 属性值3;
	...
}

示例:

<style>
h3 {
/* 选中页面中所有h3标签，并将其颜色修改为蓝色 */
color: blue;
}
</style>

作用

标签选择器可以把某一类标签全部选择出来，比如所有的 <div> 标签和所有的 <span> 标签。

优点: 能快速为页面中同类型的标签统一设置样式。
缺点: 不能设计差异化样式，只能选择全部的当前标签。

类选择器:

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。

语法:

.类名 {
属性1: 属性值1;
...
}

例如，将所有拥有 red 类的 HTML 元素均为红色:

<!-- 使用class来定义div标签的类名为red -->
<div class=‘red’>变红色</div>
<style>

/* 选中类名为red的标签，并将其改为红色 */
.red {
color: red;
}

</style>

类名在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点“.”号显示。

注意:

类选择器使用“.”（英文点号）进行标识，后面紧跟我们自己定义的类名。
可以理解为给这个标签起了一个名字，来表示。
长名称或词组可以使用中横线来为选择器命名，例如color-red。
不要使用纯数字、中文等命名，尽量使用英文字母来表示。
命名要有意义，尽量使别人一眼就知道这个类名的目的。

类选择器之多类名:

我们可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签。简单理解就是一个标签有多个名字，比如李白，字太白，号青莲居士，又号“谪仙人”等。

示例:

<div class="red font20">亚瑟</div>

注意:

在标签class 属性中写多个类名的时候，多个类名中间必须用空格分开，这个标签就可以分别具有这些类名的样式。

多类名使用场景:

我们可以把一些标签元素相同的样式放到一个类里面，这些标签都可以调用这个公共的类，然后再调用自己独有的类，从而节省CSS代码，统一修改也非常方便。

例子:

<!-- 优化前: -->
<style>
    .red{
        background-color: red;
        height: 200px;
        width: 100px;
    }
    .green{
        background-color: rgb(81， 245， 4);
        height: 200px;
        width: 100px;
    }
</style>
<body>
    <div class="red"></div>
    <div class="green"></div>
    <div class="red"></div>
</body>

<!-- 优化后: -->
<style>
    .red{
        background-color: red;
    }
    .green{
        background-color: rgb(81， 245， 4);
    }
    .box{
        height: 200px;
        width: 100p
    }
</style>
<body>
    <div class="red box"></div>
    <div class="green box"></div>
    <div class="red box"></div>
</body>

id选择器:

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML 元素以id 属性来设置 id 选择器，CSS 中 id 选择器以#来定义。

需要注意是: id 属性只能在每个 HTML 文档中出现一次。即ID不能重复。

语法:

#id名 {
属性1: 属性值1;
。。。
}

<!-- 例如 使用id属性来定义div标签的id -->
<div id="div"> 我的id名字叫div </div>

#div {
/* 使用id选择器选择id名为div的标签,并将之颜色改为红色 */
color:red;
}

id 选择器和类选择器的区别:

类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。
id 选择器好比人的身份证号码，全中国是唯一的，不能重复。

通配符选择器:

在CSS 中，通配符选择器使用“*”定义，它表示选取页面中所有元素（标签）。

语法:

* {
属性1: 属性值1;
...
}

例子:

* {
  /* 通过通配符选择器选择页面中所有标签,并将之改为红色 */
  color:red;
}

CSS之复合选择器

什么是复合选择器?

在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。

复合选择器可以更准确、更高效的选择目标元素（标签）
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

后代选择器:

后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

语法：

元素A 元素B { 
  属性名: 属性值; 
}

上述语法表示选择元素 1 里面的所有元素 2 (后代元素)。
例如：

<ul>
<li> 我是ul标签的后代元素--li标签 <li>
</ul>

<style>
/*	
选择 ul 里面所有的 li标签元素
*/
ul li { 
属性名: 属性值;
}
</style>

注意事项:

元素A和元素B中间用空格隔开
元素A是父级元素B 是子级最终选择的是元素B
元素B可以是儿子也可以是孙子等只要是元素A 的后代即可
元素A和元素B可以是任意基础选择器

子选择器

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素.

语法:

元素A > 元素B { 
  属性名: 属性值;
}

上述语法表示选择元素A 里面的所有直接后代(子元素) 元素B。
例如：

<div>
<p>我的div标签的孩子,p标签!</p>
<div>

/*	选择 div 里面所有最近一级p标签元素	*/
div > p { 
  属性名: 属性值;
}

注意:

元素A和元素B中间用大于号隔开
元素A是父级，元素B 是子级，最终选择的是元素B
元素B必须是亲儿子，其孙子、重孙之类都不归他管. 你也可以叫他亲儿子选择器
如果有多个亲儿子,当然全部都选上拉,一个都不能少

并集选择器

并集选择器可以选择多组标签, 同时为他们定义相同的样式。通常用于集体声明。
并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

语法：

元素A,
元素B { 
  属性名: 属性值;
}
规范:
并集选择器喜欢竖着写
最后一个选择器不需要加逗号

上述语法表示选择元素A 和元素B。
例如：

/*	同时选择ul和div标签元素	*/

ul,
div 
  { 
 属性名: 属性值;
}

元素A 和元素B 中间用逗号隔开
逗号可以理解为和的意思
并集选择器通常用于集体声明

伪类选择器:

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。
伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover、 :first-child。
因为伪类选择器很多，比如有链接伪类、结构伪类等，所以这里先给大家讲解常用的链接伪类选择器。

链接伪类选择器:

示例:

<style>

a:link {  /* 选择所有未被访问的链接 */
  background-color:yellow;
}

a:visited { /* 选择所有已被访问的链接 */
  background-color:yellow;
}

a:hover { /* 选择鼠标指针位于其上的链接(鼠标悬停时) */
  background-color:yellow;
}

a:active { /* 选择活动链接(鼠标按下未弹起的链接) */
  background-color:yellow;
}

</style>

链接伪类选择器注意事项

为了确保生效，请按照 LVHA的循顺序声明 :link－:visited－:hover－:active。
因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

总结:

选择器	例子	例子描述
:link	a:link	选择所有未被访问的链接。
:visited	a:visited	选择所有已被访问的链接。
:hover	a:hover	选择鼠标指针位于其上的链接(鼠标悬停时)。
:active	a:active	选择活动链接(鼠标按下未弹起的链接)。

总结与扩展:

选择器	例子	例子描述
.class	.intro	选择 class=“intro” 的所有元素。
#id	#firstname	选择 id=“firstname” 的所有元素。
*	*	选择所有元素。
element	p	选择所有 <p> 元素。
element,element	div,p	选择所有 <div> 元素和所有 <p> 元素。
element element	div p	选择 <div> 元素内部的所有 <p> 元素。
element>element	div>p	选择父元素为 <div> 元素的所有 <p> 元素。
element+element	div+p	选择紧接在 <div> 元素之后的所有 <p> 元素。
[attribute]	[target]	选择带有 target 属性所有元素。
[attribute=value]	[target=_blank]	选择 target="_blank" 的所有元素。
[attribute~=value]	[title~=flower]	选择 title 属性包含单词 “flower” 的所有元素。
[attribute\|=value]	[lang\|=en]	选择 lang 属性值以 “en” 开头的所有元素。
:link	a:link	选择所有未被访问的链接。
:visited	a:visited	选择所有已被访问的链接。
:active	a:active	选择活动链接。
:hover	a:hover	选择鼠标指针位于其上的链接。
:focus	input:focus	选择获得焦点的 input 元素。
:first-letter	p:first-letter	选择每个 <p> 元素的首字母。
:first-line	p:first-line	选择每个 <p> 元素的首行。
:first-child	p:first-child	选择属于父元素的第一个子元素的每个 <p> 元素。
:before	p:before	在每个 <p> 元素的内容之前插入内容。
:after	p:after	在每个 <p> 元素的内容之后插入内容。
:lang(language)	p:lang(it)	选择带有以 “it” 开头的 lang 属性值的每个 <p> 元素。
element1~element2	p~ul	选择前面有 <p> 元素的每个 <ul> 元素。
[attribute^=value]	a[src^=“https”]	选择其 src 属性值以 “https” 开头的每个 <a> 元素。
[attribute$=value]	a[src$=".pdf"]	选择其 src 属性以 “.pdf” 结尾的所有 <a> 元素。
[attribute=value*]	a[src*=“abc”]	选择其 src 属性中包含 “abc” 子串的每个 <a> 元素。
:first-of-type	p:first-of-type	选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
:last-of-type	p:last-of-type	选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
:only-of-type	p:only-of-type	选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个 <p> 元素。
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个 <p> 元素。
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数。
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个 <p> 元素的每个 <p> 元素。
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数。
:last-child	p:last-child	选择属于其父元素最后一个子元素每个 <p> 元素。
:root	:root	选择文档的根元素。
:empty	p:empty	选择没有子元素的每个 <p> 元素（包括文本节点）。
:target	#news:target	选择当前活动的 #news 元素。
:enabled	input:enabled	选择每个启用的 <input> 元素。
:disabled	input:disabled	选择每个禁用的 <input> 元素
:checked	input:checked	选择每个被选中的 <input> 元素。
:not(selector)	:not§	选择非 <p> 元素的每个元素。
::selection	::selection	选择被用户选取的元素部分。