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

css常见选择器

css可以对网页的html进行渲染,在相应的元素中应用样式,来渲染相对应用的元素,那么这样我们选择相应的元素就很重要了,如何选择对应的元素,此时就需要我们所说的选择器。

我们通过一段代码来演示下选择器的用法。

一、通配符选择器(*)

它可以选择到所有元素,也可以选择某个元素下的所有元素。

这段代码代表清除所有元素的内外边距

给div下的所有标签加上边框给div下的所有标签加上边框

所有的浏览器都支持通配符选择器

二、元素选择器

CSS里最常见最基本的选择器,例如p,div,ul,li等,用法也很简单

去掉所有li前面的黑点

所有的浏览器都支持元素选择器

三、类选择器

使用类选择器前要在HTML元素上定义类名,也就是说要保证类名在HTML标记中存在。这样才能选择类。

其中box就是我们以类给li加上一个类名,以便类选择器能正常工作,从而更好的将类选择器的样式与元素相关联。

用法也很简单,在类名前面加个点就行了,而且类选择器还可以和元素选择器配合使用,如: .box li 中间用空格隔开就好了,它可以作用到div下的所有li元素。

所有浏览器都支持类选择器

四、id选择器

id选择器和上面说的类选择器是很相似的,在使用id选择器之前也需要先在html文档中加注id名称,这样在样式选择器中才能找到相对应的元素,不同的是id选择器是一个页面中唯一的值,我们在类使用时是在相对应的类名前加上一个“.”号(.className)而id选择器是在名称前使用"#"如(#id)。

所有浏览器都支持ID选择器

五、子元素选择器

子元素选择器只能选择某元素的子元素,比如案例中div为父元素,而为ul子元素,那么div>ul所表示的是选择了div元素下的所有子元素ul。这里要注意,即使ul里面还有ul也不会被影响

IE6浏览器不支持子元素选择器

以上就是今天分享的选择器,更多前端内容请点击关注

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

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券