美文网首页
CSS选择器

CSS选择器

作者: 梨啊梨 | 来源:发表于2017-08-11 11:47 被阅读0次

每一条css样式声明由两部分组成,如下

选择器{

      样式;

}

有标签选择器,类选择器

标签选择器太简单,这里不赘述

类选择器,首先创建在<head></head>之间创建个类如.setBlue{color:blue},类需要.开头,然后在需要的地方插入,比如<span class="setBlue">xxxxxxxxxx</span>

id选择器,与类选择器类似,创建类以#开头,插入时,<span id="你创建的类名">xxxxxxx</span>

区别

1.            id选择器在文档中只能用一次,仅一次!!,而类选择器可以多次使用


子选择器

在类选择器中,使用>符号,来选择指定标签元素的 第一代子元素

如:

.food>li{border:1px solid red;}

这行代码会使class名为food下的子元素li里面的内容加入红色实线框

后代选择器,子选择器只包含第一代,而后代选择器则包括所有后代,只需这样.food li{xxxxx}之前子选择器的>改成一个空格 就可以了

通用选择器,它使用*号指定,他的作用是匹配html中所有的标签元素

如下:

*{color:blue;}所有的HTML标签元素都变成蓝色了

伪类选择器,所谓伪类选择器就是他能给html中不存在的标签设置样式,比如:

a: hover{color:red;}

这段代码让a标签里的内容鼠标滑过字体变成红色,最常用的就是 a:hover组合,因为他兼容所有浏览器

分组选择符,(,)逗号,他的作用是将多个标签元素设置成一个样式,如:

h1,span{color:red;}h1和span标签的字体颜色都为红色

相当于 h1{color:red;}    span{color:red;}


相关文章

  • CSS选择器

    CSS 元素选择器CSS 选择器分组CSS 类选择器详解CSS ID 选择器详解CSS 属性选择器详解CSS 后代...

  • CSS选择器

    目录: CSS派生选择器 CSS元素选择器 CSS Id 和 Class选择器 CSS 属性选择器 CSS 派生选...

  • css选择器

    css选择器】 1.css属性选择器 2.css伪类选择器 3.css层次选择器

  • CSS 选择器

    CSS 选择器 CSS 基本选择器及其扩展 CSS 基本选择器 通配符选择器 * 元素选择器 使用标签的名称...

  • Sublime 学习web的css

    html + css + js css引用 css外部样式 css优先级 css的选择器 标签选择器 类选择器 i...

  • CSS选择器

    CSS选择器的作用 CSS 选择器用于定位我们想要给予样式的 HTML 元素。 CSS选择器的类型 CSS选择器大...

  • JQuery CSS选择器

    CSS普通选择器 选择器函数 CSS伪类选择器

  • CSS-选择器1-概述

    CSS选择器-系列文章 CSS选择器-系列文章下一节 CSS选择器2-类选择器CSS3参考手册

  • CSS选择器、优先级以及!important知识总结

    一、CSS选择器 关于CSS选择器,首先请看这里:CSS 选择器参考手册 通过以上,我们可以将CSS选择器分为以下...

  • CSS

    CSS规则 at 规则 CSS选择器 CSS选择器 继承与层叠 继承与层叠 CSS 属性 CSS 属性 CSS值 ...

网友评论

      本文标题:CSS选择器

      本文链接:https://www.haomeiwen.com/subject/tvphrxtx.html