级联样式单与CSS选择器

最新推荐文章于 2024-08-09 17:43:58 发布

Zzzzzzzz_hu

最新推荐文章于 2024-08-09 17:43:58 发布

阅读量295

点赞数

文章标签： css

本文链接：https://blog.csdn.net/A_zhangq/article/details/88833396

版权

级联样式单与CSS选择器

样式单概述

样式单具有表达效果丰富、文档体积小、便于信息检索、可读性好的优点。

CSS概述

CSS样式单可以将数据逻辑和显示逻辑分离，从而提高文件的可读性。

CSS样式单的基本适用

链接外部样式文件：这种方式可以将央视文件彻底与HTML文档分离，样式文件需要额外引入
导入外部样式文件：这种方式与上一种类似，只是适用@import来引入外部样式文件。
使用内部样式定义：这种方式时通过在HTML文档头定义样式表来实现的。
适用行内样式：这种方式将样式行内定义到具体的HTML元素。

引入外部样式文件

HTML文档中适用<link…/>元素来引入外部样式文件，位置为HTML文档的和<head…/>中。

<link type="text/css" rel="stylesheet" href="css文件名称.css" />

导入外部样式单

导入外部样式单的功能与链接外部样式单的功能差不多，只是语法上存在差异。导入外部样式单需要在<style…/>元素中适用@import来执行导入，代码如下。

<style type="text/css" @import "outer.css";@import url("mycss.css");></style>

使用内部CSS样式

通常不建议使用内部CSS样式，inwei这种做法需要在HTML文档内嵌入CSS样式定义，这中内部CSS样式主要有如下三大劣势。

如果次CSS样式需要被其他HTML文档适用，那么这些CSS样式必须在其他HTML文档中重复定义。
当量CSS嵌套在HTML文档中，必将导致HTML文档过大，大量的重复下载导致网络负载加重。
如果需要修改整站封个时，必须一次打开每个页面重复修改，不利于软件工程化。
但是内部样式定义并不是一无是处，如果想让某些CSS只对某个页面生效的话，则应该选用内部样式定义。
适用内部样式定义的语法格式如下：

<style type="text/css">
	样式单文件定义
</style>

CSS选择器

元素选择器

元素选择器是最简单的选择器，其语法格式如下：

E｛样式文件定义｝/*其中E代表有效的HTML元素名*/

其中E可以是任意有效的HTML元素名，甚至可以用“”来代替，“”可匹配html文档中的任意元素。

属性选择器

从广义的角来看，元素选择器其实时属性选择器的特例。属性选择器一共有如下几种常用语法格式。
E{…}：指定该CSS样式对所有的E元素起作用。
E[attr]{…}：指定该CSS样式对有具有attr属性的E元素起作用。
E[attr=value]{…}：指定该CSS样式对所有包含attr属性，且attr的值为value的E元素起作用。
E[attr~=value]{…}：指定该CSS样式对所有包含attr属性，且attr属性的值以空格隔开的系列值，其中某个值为value的E元素起作用。

ID选择器

ID悬案则其指定CSS样式将会对具有特定id属性值的HTML元素起作用。ID选择器的语法格式如下：

#idValue{...}

上面语法指定该CSS样式对idValue的HTML元素起作用。

class选择器

class选择器指定CSS样式对具有hidingclass属性的元素起作用。class选择器的语法格式如下：

[E].classValue{...}

指定该CSS定义对class属性值为classValue的E元素起作用。此处的E可以省略，如果省略的话，则对所有class的属性值为classValue的元素起作用。

包含选择器

包含选择器用于指定目标选择器必须处于某个选择器对应的元素内部。其语法格式如下：

Selector1 Selector2 {...}/*其中Selector1、Selector2都是有效的选择器*/

子选择器

子选择器用于指定目标欧安则其必须时某个选择器对in个的元素的子元素。子选择器的语法格式如下：

Selector1>Selector2{...}/*其中Selector1、Selector2都是有效的选择器*/

子选择器是对于Selector1下的所有满足Selector2的子元素生效的。

CSS3新增的兄弟选择器

兄弟选择器时CSS3新增的一个选择器。兄弟选择器的语法如下：

Selector1~Selector2{...}/*其中Selector1、Selector2都是有效的选择器*/

兄弟选择器匹配Selector1对应的元素后面、能匹配Selector2的兄弟节点。

选择器组合

如果需要让你分CSS样式表对多个选择器起作用，那就可以利用选择器组合来实现。选择器组合的语法格式如下：

Selector1，Selector2，Selector3，...{...}/*Selector1，Selector2，为有效的选择器*/

需要主义每一个选择器都需要用英文的逗号隔开。

伪元素选择器

伪元素选择器并不是真正的元素使用的选择器，伪元素选择器只能针对CSS中已有的伪元素起作用。
CSS体on个的伪元素选择器有如下几个。

:first-letter：该选择器对应的CSS样式对指定对象内的第一个字符起作用。
:first-line：该选择器对应的CSS样式对指定对象内的第一行内容起作用。
:before：该元素选择器与内容相关的属性结合使用，用于指定对象内部的前端插入内容。
:after：该元素选择器与内容相关的属性结合使用，用于指定对象内部的尾端插入内容。
:first-letter,:first-line选择器仅对块元素起作用。

CSS3新增的伪类选择器

结构性伪类选择器

结构性伪类选择器指的时根据HTML元素之间的结构关键进行筛选的伪类选择器。结构性伪类选择器如下几个。