CSS的选择器(持续更新中)

第一种:通配符选择器*

作用:都应用到HTML5中的所有标签中

格式:

* {

}

特别说明:常用于:设置全局的外边距margin以及内边距padding

例:

* {

margin:0;

padding:0;

}

第二种:类选择器(class

作用:给一个元素添加一个类名并利于选择

格式:标签>;

使用格式:点.类名 {

}

例:


CSS的选择器(持续更新中)
在后面所有的展示中,字体大小不算改变。只有字体颜色发生了改变就是改变。

CSS的选择器(持续更新中)

第三种:属性选择器(不常用)

作用:给一个元素添加一个属性名 利于修改[使用频率不如class 兼容性也不如class ]

格式:标签[属性名] {

}

例:


CSS的选择器(持续更新中)

CSS的选择器(持续更新中)

属性选择器的高级用法并不好用,但是需要了解下。就是在属性选择器后面再给一个属性名。

第一种:添加^符号

作用:就是选择以什么开头的

格式:标签[属性名^=属性名] {

}

例:


CSS的选择器(持续更新中)

CSS的选择器(持续更新中)

第二种:添加$符号

作用:就是选择以什么结尾的的

格式:标签[属性名$=属性名] {

}


CSS的选择器(持续更新中)

CSS的选择器(持续更新中)

第三种:添加*符号

作用:就是选择都有的和通配符一个意思。

格式:标签[属性名*=属性名]{

}

例:


CSS的选择器(持续更新中)

CSS的选择器(持续更新中)

第四种:标签选择器

作用:就是所有同一个标签发生改变

格式:

标签 {

}

例:

p {

}

span {

}

div {

}

第五种: 父子选择器(常用)

作用:可以选择父元素里面的子元素。简单来理解是/里面/

格式:

标签(空格)标签(空格)标签 {

}

例:类名里面h1标签里面的所有p标签


CSS的选择器(持续更新中)

CSS的选择器(持续更新中)

第六种: 子孙选择器(常用)

作用:可以选择某个元素里面的(最近一级的)子元素。简单来理解是/下面/

格式:

标签>标签>标签 {

}

例:


CSS的选择器(持续更新中)

CSS的选择器(持续更新中)

第七种: 相邻兄弟选择器

作用:选择1个元素同级别的元素

格式:标签+标签 {

}

例:


CSS的选择器(持续更新中)


CSS的选择器(持续更新中)

第八种: 兄弟选择器 可以解释为,第一个标签的兄弟第二个标签而选择的就是他的兄弟

作用:选择1个元素同级别所有相同的元素

格式:标签~标签 {

}

例:


CSS的选择器(持续更新中)

CSS的选择器(持续更新中)

原创文章,作者:27149,如若转载,请注明出处:http://wpbbw.com/4500.html

发表评论

登录后才能评论