码迷,mamicode.com
首页 > 其他好文 > 详细

选择器的类型

时间:2018-12-10 20:51:13      阅读:180      评论:0      收藏:0      [点我收藏+]

标签:节点   原理   fat   元素   签名   判断   多个   性能   测试的   

1、标签选择器:给同一种标签添加样式;
代码:
标签名 {
属性名:属性值;
}

2、通用选择器(通配符):给所有的标签添加样式;
代码:
* {
属性名:属性值;
}
注意:通用选择器是先遍历页面当中所有的标签,然后再给这些标签添加样式,所以这个选择器的性能非常低;一般只会在测试的时候使用,用于css的初始化,但是在项目当中不要使用;

3、类选择器:给同一类(同一个群体)标签添加样式;要先给同一类标签取一个名字;
属性--class给标签命名类名;
代码:
.class名(类名){
属性名:属性值;
}
注意:一个类名可以给多个标签,一个标签可以有多个类名,多个类名之间用“空格”隔开;

4、id选择器:给某一个标签添加样式;要先取一个id名
属性--id;
代码:
#ID名 {
属性名:属性值;
}
注意:一个ID名只能给一个标签,一个标签只能有一个ID名;(从一而终)

5、后代选择器:选择的是某一个元素的后代元素;
代码:
祖先选择器 后代名 {
属性名:属性值;
}
注意:中间是用“空格”连接,表示“里面的”意思;

选择器原理:是由内向外查找,先查找所有的p,然后判断这个p是否由满足要求的父节点father,不满足就继续向上一级查找,没有找到就不满要求,找到了才给这个p添加样式;

6、子选择器:选择某个元素的直接后代;
代码:
父选择器>子级{
属性名:属性值;
}

7、相邻兄弟选择器:选择紧挨着该元素的后面的一个元素;
代码:
元素名+兄弟名{
属性名:属性值;
}

8、通用兄弟选择器:选择的是该元素后面的所有的某一种元素;
代码:
元素名~兄弟名{
属性名:属性值;
}

9、并集选择器:将两个不相干的元素同时添加相同属性;
代码:
元素1,元素2,元素3......{
属性名:属性值;
}

10、交集选择器:当标签和类名(ID名)都冲突的时候,使用交集选择器;
代码:
元素名.类名(#ID名){
属性名:属性值;
}

选择器的类型

标签:节点   原理   fat   元素   签名   判断   多个   性能   测试的   

原文地址:https://www.cnblogs.com/tangdiying/p/10098518.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!