首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS选择器一文全明白

我们知道HTML主要用于描述网页内容,主要不是负责网页的显示效果,网页的显示效主要由叠层样式表控制着。所以关于叠层样式CSS学习尤为主要,今天我们来了解CSS选择器。

我们知道HTML主要用于描述网页内容,主要不是负责网页的显示效果,网页的显示效主要由叠层样式表控制着。所以关于叠层样式CSS学习尤为主要,今天我们来了解CSS选择器。

本文介绍以下选择器:

简单选择器

类选择器

通用选择器

id选择器

上下文选择器

伪类

简单选择器

简单的选择器就是单个元素名称,也就是标签,此时样式作用于所有该标签的元素,有时选择器可能不是单个,而是一组这时各元素用逗号隔开。我们用h标签做实例:

h1 h1,h2

类选择器

类标签用于同一标签的不同实例的显示效果。如有10个

有三个为强调,其他为正常显示,我们就可以在需要强调的的三个标签的class属性设置同一个值,而其他七个不是默认显示效果也可以设置一个class。

我们只需要通过标签加点加类名,如下:

p.strong p.normal

通用选择器

通常作用于不同标签相同样式我们设置相同的类名,使用时我们只需要使用.类名。如

.类名

ID选择器

id选择器的作用范围为特定元素。如果要使用id选择器所需要的的元素必须设置id元素。如

#id元素

上下文选择器

最简单的上下文选择器为后代选择器。如果一个元素a在元素b中那,么元素b是a的后代。我们通过列出祖先名并用空格进行隔开。

如:

a b

如果一个元素是另一个元素的后代且直接嵌套在其后我们称为子元素。我们可以通过以下来使用:

first-child:只选择第一个子元素

last-child:只选择最后一个子元素

empty:指定的元素无子元素

only-child:指定该元素唯一的子元素

伪类

伪类是只有发生时才会发生作用的样式:如超级链接的四个状态;伪类与类不同采用的是冒号:

如:

:hover

通用选择器

用星号(*)标示用于文档所以元素

如果有任何错误和纰漏,请私信我更正。

如果你有任何意见一定要私信告诉我,让我快速成长起来哟。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20190427A0IMDW00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券