认识CSS选择器

1、什么是CSS选择器

再HTML中如果要设置某个元素的CSS样式,首先是需要找到该元素,执行这一任务的规则的名称我们称为CSS选择器。

2、CSS3选择器的分类。

     分为五类:1)基本选择器,2)层次选择器,3)伪类选择器,4)属性选择器。

     其中,伪类选择器又分六种:动态伪类选择器、目标伪类选择器、语言伪类选择器、UI元素状态选择器,结构伪类选择器、否定伪类选择器。

    基本选择器是CSS中使用最多最频繁的,它是CSS早期的产物,即使到了CSS3它依旧称霸着。


基本选择器的语法:


选择器类型功能描述
*通配选择器选择文档中所有的HTML元素
E元素选择器选中指定类型的HTML中所有的元素
#idID选择器选中HTML文档中指定元素的ID属性为‘ID’的元素
.class类选择器选中HTML文档中指定元素的class属性为‘class’的元素
selector1,selectorN群组选择器将每一个选择器匹配的元素集合并

目前市场上所有的浏览器都对基本选择器的语法支持。


通配选择器(*)用来选择所有的HTML元素如下:


*{margin:0;padding:0;}

这里将HTML元素中所有的元素的Margin和pading都设置为0,这里要注释如果值为0,可以不用带单位如px等,如果不为0,需要带上单位


元素选择器是CSS选择器中最常见,也是最基本的选择器。文档中的元素包括html、body、p、div、span、a、ul、li等等。

    div{font-size:12px;}

这里将所有的DIV元素的字体大小设置为12个像素。

ID选择器和类选择器差不多,严格来说一个文档中只能拥有一个ID。如果你写多个ID也不会出错。

Class不同,一个文档中可以拥有多个

用法如下:

    #ID{padding:0}

    .class{padding:5px 3px}

如何class出现在多个元素属性上比如:

<div class="_class"></div>

<span class="_class"></span>

如果我们只想选择span中的_class,代码如下:

    span._class{padding:5px}


群组选择器是可以选择多个如:

    #id,._class,div,span{padding:10px}

切记中间要使用“,”来隔开,如果不使用“,”来隔开,那么它就成了后代选择器。



2020-01-10 10:47 举报

关于挟翼

挟翼一款提供UI页面设计的软件。
您只需要动一动鼠标绘制相关的元素,软件会自动帮你完成CSS样式和HTML代码。
从现在开始注册,立即赠送一年VIP会员。活动结束日期待定。