CSS样式--CSS选择器

本文详细介绍了CSS选择器的分类、使用场景、结构关系、优先级和伪类。包括标签选择器、id选择器、class选择器的使用,以及后代选择器、子元素选择器、分组选择器等结构关系的解释。强调了类选择器的复用性和优先级规则,还讲解了伪类选择器如`:hover`、`:active`的应用。
摘要由CSDN通过智能技术生成

1 选择器的概述

css选择器,能对HTML结构中的一个或者一类元素通过选择器属性进行标记,然后可以通过这些标记找到对应的元素,为其添加样式。

1.1 选择器分类
1.1.1 标签选择器

通过标签的名字,找到与标签名对应的元素:
示例:

选择器( 标签名 ):div{
 							margin:0;
 					}

选中标签:

		**<div></div>**

特性:
标签名选择器没有太多特性,适用于一个范围内的同一元素需要统一添加相同的样式的时候,比如列表标签。
*通配符
通配符是一个特殊的标签选择器,作用为选中所有的标签。

1.1.2 id选择器

通过标签的ID名属性的值,找到与ID名对应的元素:
示例:

选择器( # ):#nav{ 
					margin:0;
			 }

选中标签:

<div id="nav"></div>

特性:
A. id名具有唯一性,同一个id名在整个界面只能出现一次
B. 同一个标签只能有一个id名。一个id名指的是id的属性值也只能有一个。

1.1.3 class选择器

通过标签的类名属性的值,找到与类名对应的元素:
示例:
选择器( . ):.box{ margin:0; }
选中标签:

(单个类名)

(多个类名)
特性:
A. 同一个类名在一个界面可以按需求出现多次
B. 同一个标签可以有多个类名,类名之间用空格隔开
类名相当于属性值
1.2 选择器使用场景

CSS样式书写过程中,类名占据了绝大部分,因为具有复用的特性,而且使用非常灵活,建议优先使用。
其次是标签名ÿ

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值