1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

基础:如何合理运用CSS selector 选择符

作者:用户 来源:互联网 时间:2016-07-07 16:58:36

html标签colorselector语法选择

基础:如何合理运用CSS selector 选择符 - 摘要: 本文讲的是基础:如何合理运用CSS selector 选择符, css|select   CSS selector 选择符是我们进行CSS网页布局的基础。CSS selector到底有哪些,如何合理的运用呢?选择符可以分

css|select

  CSS selector 选择符是我们进行CSS网页布局的基础。CSS selector到底有哪些,如何合理的运用呢?选择符可以分为三类,除了第一类HTML selector之外,其它两类我们是可以自己命名的,在进行命名时,注意包含语义,或者添加必要的注释,使我们的代码更清晰,易读。

  HTML selector 标签选择符

  HTML selector就是HTML的标签,如:DIV,TD,P,H1等等,如你用 CSS 定义了它们,在CSS文章所控制的页面中这个标签的性质就按照你的定义来显示。

  比如我们想叫H1的颜色是红的,则:H1 {color: red}。这里我们学习一个CSS的特点,它可定义好几个 selector在一个rule里。如:H1, H2, TD {color: red}。这个定义就能让所有的 H1, H2, 和 TD 的颜色都为红色。在具体使用中,可以将几个设置相同的属于合并起来编写,减小我们的代码。

  Class selector 类选择符 

  Class selector有两种,一种叫相关 class selector,它跟一个 HTML 的标签有关系它的语法是tag.Classname {property:value}。如:我们想设置一些而不是全部 H1 的颜色是红的 H1.redone {color: red}则:第一个 H1 是红色的,而第二个就不是了。

  第二种是独立class selector。它可被任何 HTML标签所应用。它的语法如下 .Classname {property:value}假如我们有下面这个定义.blueone {color: blue}那么我们可以把他应用到不同的标签中去。非常明显class selector 给了我们更多的自由与发挥的空间。

  ID selector ID选择符

  ID selector 其实跟独立 class selector 的功能很相似。而区别在于它们的语法和用法不同,以及对于 javascript 操纵 HTML元素有帮助。我们在布局中,对不同的结构区域的定义,往往用ID选择符。

  它的语法如下#IDname {property:value}。假如我们有下面的定义#yelowone {color: yellow}。我们可以运用这个定义到任何的有同样 ID 名字的标签,如:text here你可能觉得既然 ID selector 和独立 class selector 功能一样,为什么两者都存在呢?有 ID 的 HTML元素可以被JavaScript来操纵。



以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索html , 标签 , color , selector , 语法 选择 selector选择器、queryselector选择器、js selector选择器、变量选择符16、css选择符,以便于您获取更多的相关知识。

js-CSS属性选择器支持‘与或非’的关系吗?

...差不多,可以用属性选择器 http://www.w3school.com.cn/css/css_selector_attribute.asp 解决方案二: 推荐你看一下css的属性选择付和伪类选择符,相信可以帮助你。

基础:如何合理运用CSS selector 选择符

  CSS selector 选择符是我们进行CSS网页布局的基础。CSS selector到底有哪些,如何合理的运用呢?选择符可以分为三类,除了第一类HTML selector之外,其它两类我们是可以自己命名的,在进行命名时,注意包含语义,或者添加必...

jQuery的animate运用实例(安卓组的跑马灯替换之道)

...p' [滚动方向,参考值有二left,top] * @param {[type]} selector='.content' [选择滚动的对象,类选择器] * @param {[type]} speed=3000 [滚动时间] * @param {[type]} diff [滚动距离,单位像素] * @param {[type]} ...

LESS介绍,和与Sass的比较

...in定义一个样式。再使用@include来调用它。 选择器继承(Selector Inheritance) 这是一个LESS没有的功能。使用这个功能,你可以使用@extend方法把一个selector的样式添加到另一个selector里。 .menu {border: 1px solid #ddd; } .footer {@extend .menu; ...

小而合理的前端理论:rscss和rsjs

...释: In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+0080 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. 其...

前三篇
后三篇