css详解之选择符、优先级及继承关系

2023-05-20 分类：网站建设

选择符

1、通配符

语法：*{属性：属性值；}

说明：通配选择符的写法是“*”，其含义就是所有元素。

用法：常用于定义文档中各种元素得共同属性，如字号、字体等。

使用通配选择符的一个示例如下：

*{font-size:12px;}

说明：font-size属性是字体的大小、px是像素，该样式实现的效果是：页面中所有文本的字体大小为12个像素。

2、类型选择符

语法：元素名称{属性：属性值；}

说明：1)类型选择符就是以文档语言对象类型作为选择符，即使用结构中元素名称作为选择符。例如body、div、p等。

2) 所有的页面元素都可以作为类型选择符。

用法：1)如果想改变某个元素得默认样式时，可以使用类型选择符；

例：ul{margin:0;

list-style:none; }

2) 当统一文档某个元素的显示效果时，可以使用类型选择符；

例：body{font-size:12px;

line-height;18px;}

3、Id选择符

　语法：#id名{属性：属性值；}

应用：<元素名称id=“id选择符名称"></元素名称

说明：1)ID选择符的语法格式是“#”加上自定义的ID名称。

2)当我们使用ID选择符时，应先为每个元素定义一个id属性，如：<div id="top"></div>

3) 一个id名称只能对应于文档中一个具体得元素对象，因为id只能定义页面中某一个唯一的元素对象；

用法：1)用来构建整体结构的元素对象应该定义id属性，因为这些对象一般在页面中都是比较唯一、固定的，不会出现一个结构在同一个页面内重复出现得现象，如

logo、导航等；

4、class选择符

语法：．类名{属性：属性值；}

应用：<元素名称class="类选择符名称"></元素名称>

说明：1)类选择符的语法格式是：“.”加上自定义的类名称。

　　2)当我们使用类选择符时，应先为每个元素定义一个类属性，如：<div class="red"></div>

注意：一个标记上可以同时使用多个类，语法为<标记class=“类名类名”>

　即：在一个标记上同时使用多个类时，类名与类名之间用空格隔开

ID具有唯一性，CLASS具有普遍性。

5、群组选择符

语法：选择符1，选择符2，选择符3{属性：属性值；}

说明：当多个选择符应用相同的样式，可以将选择符用英文逗号分隔的方式，合并为一组.

使用类选择符的一个示例如下：

.name,div,p{font-size:12px}

该样式实现的效果是在类名字为name的元素、div元素、p元素中，文本的字体大小为12个像

素。

6、包含选择符

语法：选择符1 选择符2{属性：属性值；}

说明：选择符1和选择符2之间用空格隔开。含义就是所有选择符1中包含的选择符2。

使用包含选择符的一个示例如下：

div p{font-size;12px;}

该样式实现的效果是，在所有被div元素包含的p元素中，文本有字体大小为12个像素。

7、伪类选择符

语法：a:link{属性：属性值；}

　 a:visited{属性：属性值；}

　 a:hover{属性：属性值；}

　 a:active{属性：属性值；}

说明：1）为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中；

2）当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为：

a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效；

3)a:link可以定义未访问过的超链接样式，有些浏览器会把它解析为任何超链接，包括

访问过的和未访问过的，因此，我们可以使用a选择符样式来代替a:link选择符样式。

4）使用与超链接相关的伪类选择符时，应为a元素定义href属性；

CSS的基本书写规范包括：

1. 基本书写顺序：建议先写通配符、类型选择符和重复使用的样式，然后是伪类，后是自定义的选择符。除了重复使用的选择符，其他选择符按照使用的先后书写，这样便于修改时寻找。

2. 书写方式

3.注释

注释的语法如下：

/*这是一个注释*/

优先级

1、直接定义在标记上的css样式（行间样式表）级别高。

2、内部样式表与外部样式表后设的起作用。

3、当样式中属性重复时，后设的属性起作用

4、ID的定义优先于CLASS的定义

5、类、id的优先级别高于标记

继承关系：子定义会继承父定义，但会覆盖父定义的内容。

文章标题：css详解之选择符、优先级及继承关系
文章分享：/news20/260270.html

成都网站建设公司_创新互联，为您提供移动网站建设、品牌网站设计、面包屑导航、外贸网站建设、网站维护、定制网站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容