搜索
查看: 22667|回复: 10

[教程] HTMLayout CSS选择器语法详解

  [复制链接]

43

主题

679

帖子

3805

积分

版主

Rank: 7Rank: 7Rank: 7

积分
3805
发表于 2012-6-7 19:29:07 | 显示全部楼层 |阅读模式
HTMLayout可以使用CSS选择器语法查询并返回节点, 非常方便.
使用的CSS选择器语法基本与jQuery没有什么太大的区别, 不过速度就快多了.

在普通CSS里就可以使用这些选择器, 你不需要考虑太多兼容性的问题,
因为HTMLayout引擎内置在你的程序中,这非常的方便, 也是HTMLayout的一大优势.

在CSSS!脚本里也可以使用这些选择器,有两个全局函数 $() 以及 $1()
对于节点对象,他们也有内置的成员函数 ele.$() 以及 ele.$1() , 这两个函数的区别是 $()返回一个节点集合(多个节点),
而 $1() 仅返回一个元素.

下面是一个完整的CSSS!脚本范例

  1. .item {
  2.       hover-on! :
  3.             ele = $1( input.url ) ,
  4.             ele:empty == true ?
  5.                   (self.value = "empty") #
  6.                   (self.value = "filled"),
  7.             ele:hover = true,
  8.             self::width = ele.box-content-width(),
  9.             self.$(.icon) -> @(ele) ele::background = "#CCC"
  10.       ;
复制代码
ele = $1( input.url )  这句代码使用选择器返回了一个节点对象.
而 self.$(.icon)  则返回了一个包含多个节点的集合, ->后面的函数负责枚举遍历该集合.

如果使用节点对象调用CSS选择器, 有一个特殊的选择器 ":root" 表示当前节点
例如 self.$( :root > .icon) 这里的:root实际上表示self节点,这里可不是表示根节点的意思!

参考:HTMLayout - CSSS!脚本入门
http://bbs.aardio.com/thread-7244-1-1.html



回复

使用道具 举报

43

主题

679

帖子

3805

积分

版主

Rank: 7Rank: 7Rank: 7

积分
3805
 楼主| 发表于 2012-6-7 19:30:19 | 显示全部楼层

[size=5][b]一、CSS 2.1 选择器[/b] [/size][hr] [b][size=3]1.1、元素选择符 [/size][/b] [

一、CSS 2.1 选择器


1.1、元素选择符

*  
通用元素选择器,匹配任何元素
Matches any element. Universal selector
  
E
标签选择器,匹配所有使用E标签的元素, 例如 $(a) 返回所有超链接节点.
Matches any E element (i.e., an element of type E). Type selectors

E#myid
id选择器,匹配所有id属性等于myid的E元素,这里的E也可以省略
Matches any E element with ID equal to "myid". ID selectors

E.myclass
CSS类选择器,匹配所有class属性等于myclass 的E元素,这里的E也可以省略
Matches any E element with CSS className equal to "myclass". Class selectors
Language specific. (In HTML, the same as DIV[class~="myclass"].) Class selectors  

1.2、关系选择器

E,F
多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔

E F
后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔
Matches any F element that is a descendant of an E element. Descendant selectors

E > F
子元素选择器(忽略中间的空格),匹配所有E元素的子元素F,
Matches any F element that is a child of an element E. Child selectors

E + F
毗邻元素选择器,匹配所有紧随E元素之后的同级元素F,在HTMLayout里这个选择器有个问题,如果其
Matches any F element immediately preceded by a sibling element E. Adjacent selectors

1.3、伪类选择器

E:first-child
伪类选择器,匹配父元素的第一个子元素
Matches element E when E is the first child of its parent. The :first-child pseudo-class

E:last-child
伪类选择器,匹配父元素的最后一个子元素
Matches element E when E is the last child of its parent. The :last-child pseudo-class

E:link
匹配所有未被点击的链接
Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited.
The link pseudo-classes

E:visited  
匹配所有已被点击的链接
Matches element E if E is the source anchor of a hyperlink of which the target is already visited.
The link pseudo-classes

E:active
匹配鼠标已经其上按下、还没有释放的E元素

E:hover
匹配鼠标悬停其上的E元素

E:focus
匹配获得当前焦点的E元素
Matches E during certain user actions. The dynamic pseudo-classes

1.4 属性选择器

E[att]
匹配所有具有att属性的E元素,不考虑它的值。(注意:E在此处可以省略,比如“[cheacked]”。以下同。)
Matches any E element with the "att" attribute set (whatever the value). Attribute selectors

E[att="val"]
精确匹配所有att属性等于“warning”的E元素,这里的引号也可以省略。
Matches any E element whose "att" attribute value is exactly equal to "val". Attribute selectors

E[foo~="warning"]
匹配所有att属性具有多个空格分隔的值、其中一个值等于“warning”的E元素
Matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warning". Attribute selectors

E[foo%="warning"]  
匹配所有att属性具有多个空格分隔的值、其中一个值等于“warning”的E元素(忽略大小写),
这是HTMLayout扩展的语法(CSS标准里没有)
Matches any E element whose "foo" attribute value is a list of space-separated values, one of which is equal to "warning" case insensitively. non-standard

E[lang|="en"]
匹配所有att属性具有多个连字号分隔(hyphen-separated)的值、其中一个值以“val”开头的E元素,主要用于lang属性,比如“en”、“en-us”、“en-gb”等等
Matches any E element whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en". Attribute selectors

二、CSS 3.0 选择器


E:not( {simple selector} )
反选伪类,匹配不符合当前选择器的任何元素
Represents an element that is not represented by the simple selector. Negation Pseudo Class.
Example: E:not(:first-child) matches all E elements that are not at first child position in their containers. The negation pseudo-class

E[foo^="val"]
属性att的值以"val"开头的元素(模式匹配里^也是限定开始的作用)
Matches any E element having "foo" attribute whose value begins with the prefix "val"  

E[foo$="val"]
属性att的值以"val"结尾的元素(模式匹配里$也是限定结束的作用)
Matches any E element having "foo" attribute whose value ends with the suffix "val"
  
E[foo*="val"]
属性att的值包含"val"字符串的元素,可理解为模糊匹配
Matches any E element having "foo" attribute whose value contains at least one instance of the substring "val".   

E:nth-child(An+B)

参数有三种不同的写法
E:nth-child(n)
匹配其父元素的第n个子元素,第一个编号为1(aardio语法里起始索引与是1,而不是0)

E:nth-child(An)
匹配所有倍数为A的元素。其中参数an中的字母n不可缺省,它是倍数写法的标志,如E:nth-child(3n)

E:nth-child(An+B)
先对元素进行分组,每组有A个,b为组内成员的序号,其中字母n和加号+不可缺省,位置不可调换,这是该写法的标志,其中a,b均为正整数或0。如3n+1、5n+1。

Matches any E element which is Bth child of an parent element after all its children have been split into groups of A elements each. A and B are integer numbers. Structural Pseudo Classes

可以使用odd表示奇数索引,even参数表示偶数索引,
例如下面的CSS使表格的奇数与偶数行分别显示不同样式:
/* each odd row */
table tr:nth-child(odd) {
    background-color:white;
}
/* each even row */
table tr:nth-child(even) {
    background-color:#F4F3F9 white white #F4F3F9;
}

E:nth-last-child(An+B)
参数用法与E:nth-child(An+B)完全相同,区别是索引是倒过来从后面往前计算的, 倒数第一个编号为1。

Matches any E element which is Bth child of an parent element after all its children have been split into groups of A elements each and counting from last to first direction.

E:only-child
匹配父元素下仅有的一个子元素,等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
Represents an element that has a parent element and whose parent element has no other children other than this one.  :only-child pseudo-class

E:only-of-type
匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
Represents an element that has a parent element and whose parent element has no other element children with the same element name :only-of-type pseudo-class

E:has-child-of-type(T)
匹配节点包含一个类型为T的子节点(不能是多个哦),例如 menu li:has-child-of-type(menu) ,
这是指菜单menu的子节点li如果包含一个子节点是menu,那么.......(例如显示一个右向箭头,以表示可以展开子菜单),非CSS标准选择器(HTMLayout扩展)
Represents an element that has exactly single child element of type T among its other children. Non standard, h-smile core specific.

E:has-children-of-type(T)
匹配节点包含一个或多个类型为T的子节点
Represents an element that has one or more children elements of type T among its other children.

三、节点状态选择器


E:focus

匹配节点获得焦点时的状态
Matches element in focus state. STATE_FOCUS

E:tab-focus
节点使用tab键切换得到焦点
Matches element that got focus by pressing TAB keyboard button. STATE_TABFOCUS

E:focusable
节点指定了tabindex 或者可以接受输入焦点
Matches any element which has tabindex defined or will accept focus. Behaviors attached to elements are responsible for "focusability" (accept HANDLE_FOCUS events). For example behaviors under <a href>'s and most of <input>/<widget> elements are focusable by default. Elements that have overflow:auto | scroll are also intrinsically focusable. STATE_FOCUSABLE

E:current
当前选中节点(例如tabs里面当前点选的选项卡)
Matches current element in collection. E.g. current <option> in <select>. STATE_CURRENT

E:checked
当前勾选的节点
Matches element in checked state. Internal behaviors checkbox, radio and select (for option) are known to set/reset this flag. STATE_CHECKED

E:disabled
节点禁用状态
Matches element in disabled state. All elements in container having disabled attribute defined will also have this flag set. STATE_DISABLED

E:read-only
节点只读状态
Matches element in read-only state (with readonly attribute defined) STATE_READONLY

E:expanded
节点展开状态,例如可以实现手风琴效果,Outlook菜单效果的 web.layout.behavior.collapsibleList 里就用到了这个状态。
Matches element in expanded state. Internal behavior select are known to set/reset this flag. Used for implementation of collapsible nodes in the <select>. STATE_EXPANDED

E:collapsed
节点折叠状态,与E:expanded相对
Inversed to :expanded attribute. Element can have either expanded or collapsed or neither expanded nor collapsed state but not both. STATE_COLLAPSED

E:incomplete
节点未加载完成
Is set when element is in incomplete state - one of requested resources (e.g. background or foreground image) is not arrived yet. STATE_INCOMPLETE

E:busy
节点忙状态
E.g. is set when element requested some data to download and this data is not arrived yet. This flag can be set from code of behaviors. STATE_BUSY

E:empty
节点内容为空状态
Matches element that has no textual content and no children. STATE_EMPTY

E:has-child
节点当前至少有一个子节点
Matches element that has exactly one child. STATE_HAS_CHILD

E:has-children
节点有多个子节点
Matches element that has more than one child. STATE_HAS_CHILDREN

E:animating
节点正在播放动画
Element, at the moment, is animating e.g. expanding/collapsing STATE_ANIMATING

E:popup
节点当前是弹出显示状态,这个指的是浮动弹出面板这类
Element, at the moment, is shown as a popup. STATE_POPUP

E:owns-popup
这个一般指的是弹出其他节点的按钮,间单讲,如果你点击A按钮弹出显示B节点, A按钮的状态就是owns-popup.
Element requested popup to be shown and that popup is shown at the moment. STATE_OWNS_POPUP

E:synthetic
这个指引擎自动合成的节点,例如表格中自动补全的列(td节点)
Element is synthesized by the engine while parsing e.g. all missed cells in tables (<td>) are getting this flag. STATE_SYNTHETIC

E:drop-target
当前是拖放目标
While inside the active drag-n-drop opeartion this element is a valid drop target for the dragged element. STATE_DROP_TARGET

E:drag-over
正在当前节点上拖动
Matches drop target element when dragged element is over it. STATE_DRAG_OVER

E:moving
正在拖动节点(移动)
Matches drag-moving element (temporary copy of the drag-source). STATE_MOVING

E:copying
正在拖动节点(复制)
Matches drag-copying element (temporary copy of the drag-source). STATE_COPYING

E:drag-source
当前是拖放源节点
Matches drag source element in active drag-n-drop operation. STATE_DRAG_SOURCE

E:rtl  
节点指定了属性 dir="rtl", 节点内容自右到左显示
Matches element in strictly Right-To-Left environment - when it or its nearest container has defined dir attribute and the value of that dir attribute is exactly "rtl".   

E:ltr
如果节点指定了属性 dir="ltr" 节点内容自左向右显示
Matches element in strictly Left-To-Right environment - when it or its nearest container has defined dir attribute and the value of that dir attribute is exactly "ltr".


评分

参与人数 1专家分 +100 收起 理由
落伍者 + 100 非常棒.很详细...

查看全部评分

回复

使用道具 举报

43

主题

679

帖子

3805

积分

版主

Rank: 7Rank: 7Rank: 7

积分
3805
 楼主| 发表于 2012-6-7 19:32:13 | 显示全部楼层

[code]import win.ui; /*DSG{{*/ var winform = ..win.form( bottom=399;parent=...

  1. import win.ui;
  2. /*DSG{{*/
  3. var winform = ..win.form( bottom=399;parent=...;text="实战CSS选择器 - 创建弹出菜单";right=599 )
  4. winform.add(  )
  5. /*}}*/

  6. import web.layout;
  7. wbLayout = web.layout( winform )

  8. wbLayout.html = /**
  9. <body>
  10. <button type="menu">点这里弹出菜单
  11.   <menu class="office">
  12.     <li title="hello!">打开</li>
  13.     <hr />
  14.     <li>新建
  15.       <menu>
  16.         <li>Web应用程序</li>
  17.         <li>HTMLayout应用程序</li>
  18.       </menu>
  19.     </li>
  20.     <li>保存</li>
  21.     <li>另存为</li>
  22.   </menu>
  23. </button>
  24. </body>
  25. **/

  26. wbLayout.css = /**

  27. /* button节点,有一个type属性并且他的值等于 "menu" */
  28. button[type="menu"] {
  29.   behavior:button popup-menu;
  30.   width:83px;
  31.   height:13px;
  32.   
  33.   /*
  34.   在CSSS!脚本中可以使用CSS选择器语法,
  35.   注意 self.$("menu") 是错误的写法,正确写法应去掉引号
  36.   
  37.   assigned!事件在CSS应用到节点时触发.
  38.   */
  39.   assigned!:
  40.     self.$(menu)->@(ele)ele::text-align = "left"; //设定所有菜单节点文本左对齐
  41. }

  42. /* 当你按下按钮弹出菜单,菜单的状态就变为 owns-popup  */
  43. button[type="menu"]:owns-popup {
  44.     background-image:url(theme:button-pressed);  
  45. }

  46. /* 这个是最简单的选择符了,直接匹配所有 menu标签定义的HTML节点 */
  47. menu {
  48.   font: system;
  49.   behavior:menu; /*这里定义了behavior行为是一个菜单*/
  50.   flow: vertical;
  51.   display:none;
  52.   margin:0;  
  53.   padding:1px;
  54.   max-width:max-intrinsic;
  55.   border:1px solid threedshadow;
  56.   background-color: window;
  57.   color:windowtext;
  58.   margin:0 1px;   
  59. }

  60. /* 匹配 menu节点下的子节点 menu */
  61. menu menu {
  62.   max-width: max-intrinsic;
  63. }

  64. /* 下面匹配 menu 节点下的子节点 li,也就是菜单项 */
  65. menu li {  
  66.   width:*;
  67.   padding-left:24px; /* 左侧留出24像素的空白,用来显示图标 */
  68.   padding-right:12px; /* 右键留出12像素的空白,用来显示可能出现的子菜单箭头 */
  69.   padding-top:4px;
  70.   padding-bottom:4px;
  71.   foreground-repeat: no-repeat;
  72.   foreground-position: 2px 50%; /*前景图像定位,第一个是横坐标,第二个指定纵坐标*/
  73.   color:windowtext;
  74. }

  75. /* 如果menu的子节点也就是菜单项li有一个子节点类型是menu,简单讲就是他有子菜单 */
  76. menu li:has-child-of-type(menu){
  77.   foreground-image:url(stock:arrow-right); /* 那就显示一个向右的箭头 */
  78.   foreground-repeat: no-repeat;
  79.   foreground-position: 100% 50%;
  80. }

  81. /* 逗号指定多个选择器条件, 这里指的是当前菜单项,或鼠标放在上面并且弹出了子菜单的项*/
  82. menu li:hover:owns-popup,
  83. menu li:current {
  84.   background-color:highlight;
  85.   color:highlighttext;  
  86. }

  87. /* 菜单分隔符 */
  88. menu hr {
  89.   margin:2px;
  90. }

  91. menu.office,
  92. menu.office menu {
  93.   background: url(data:image/png;base64,
  94. iVBORw0KGgoAAAANSUhEUgAAAE8AAABNCAIAAABonq7aAAAAAXNSR0IArs4c6QAA
  95. AARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADxSURBVHhe7dFR
  96. DcAgAAPRMV34F4EDXEwEOXLJjn9K6Rt77+fsrLXmnGcZl26/l95xPNNvHQ5Ei2yJ
  97. VR2Z2TociBbZEqs6MrN1OBAtsiVWdWRm63AgWmRLrOrIzNbhQLTIlljVkZmtw4Fo
  98. kS2xqiMzW4cD0SJbYlVHZrYOB6JFtsSqjsxsHQ5Ei2yJVR2Z2TociBbZEqs6MrN1
  99. OBAtsiVWdWRm63AgWmRLrOrIzNbhQLTIlljVkZmtw4FokS2xqiMzW4cD0SJbYlVH
  100. ZrYOB6JFtsSqjsxsHQ5Ei2yJVR2Z2TociBbZEqs6MrN1OBAt/mX7AbInBpf1Ub24
  101. AAAAAElFTkSuQmCC) expand;
  102.   /*
  103.   如果 background-repeat为expand, stretch and no-repeat之一,
  104.   那么可以使用background-position:指定切图的位置,按上右下左的顺序,,
  105.   注意CSS里很多用到四个坐标的属性都遵守这个顺序,从顶部开始顺时针走一圈. 例如 padding,margin等.
  106.   */
  107.   background-position: 0 0 0 24; //在图片左侧切出24个像素的切片固定,其他部位平铺
  108. }
  109.         
  110. **/

  111. //使用CSS选择器得到body节点,这类似调用 CSSS!脚本里的全局函数 $1("body")
  112. var body = wbLayout.querySelector("body")

  113. //这类似 调用 CSSS!脚本里的节点 成员函数 body.$1()
  114. var ltEle = body.querySelector("menu li:has-child-of-type(menu)");//在aardio中使用CSS选择器
  115. ltEle.style.color = "red"; //在aardio 中修改节点CSS属性

  116. //使用 with语句创建临时名字空间,批量修改节点属性
  117. with body.querySelector("button").style {
  118.     right = 10; //按扭放在右面右侧,右边距为10像素
  119.     top = 10;  //按钮放在页面顶部,顶边距为10像素
  120.     position = "absolute";  //绝对定位
  121. }

  122. //在aardio中使用CSS选择器
  123. var menu = body.querySelector("menu");

  124. //在aardio中监听节点事件
  125. menu.onMenuItemClick = function (ltTarget,ltEle,reason,behaviorParams) {
  126.     winform.msgbox("你点了:" + ltTarget.innerText );
  127.     return true;
  128. }
  129. menu.attachEventHandler();//开始监听节点事件


  130. winform.show()
  131. win.loopMessage();
复制代码
回复

使用道具 举报

43

主题

679

帖子

3805

积分

版主

Rank: 7Rank: 7Rank: 7

积分
3805
 楼主| 发表于 2012-6-7 22:18:20 | 显示全部楼层

selector 是CSSS!脚本里的一个全局函数. 在范例里可以看到该函数用于将CSS选择器本身转换为一个选择器对象, 并赋值到相关的CSS属性. [

selector 是CSSS!脚本里的一个全局函数.
在范例里可以看到该函数用于将CSS选择器本身转换为一个选择器对象, 并赋值到相关的CSS属性.

1、用于指定右键菜单:
  1. div.htmlarea {
  2.   behavior:htmlarea;
  3.   context-menu:selector(menu#for-htmlarea);
  4. }
复制代码

2、用于指定可以接受拖放的节点,
例如:
  1. context-menu: selector( menu.popup );
复制代码

3、用于 -for, -at 自定义属性,
示例如下:

import win.ui;
/*DSG{{*/
var winform = ..win.form( bottom=399;parent=...;right=599;text="测试 -for -at 自定义属性" )
winform.add(  )
/*}}*/

import web.layout;

var wbLayout = web.layout(winform);

wbLayout.html =
/*********
<html>
  <head>
    <style>
   
      body {
        font:system;
      }
      
      div#container {
        flow:horizontal;
        border-spacing:20px; .
        width:*;
        height:*;
      }   
      
      div#container > widget[type="select"] {
        width:*; //星号的作用等价于 100%%,也就是撑满可用空间
        height:*;
      }
      
      div#container > div.buttons  {
        width:max-intrinsic;
        height:*;
      }
      
      div#container > div.buttons > widget {
        -for: selector(widget[type="select"]); //使输入焦点强制转移到CSS选择器指向的节点
        -at: selector(div#container);
        click!:
          $1(widget[type="select"]):value = self:index
        ;
      }
    </style>
  </head>
<body>
  点击右侧的按钮,然后再试试按键盘上下方向键,<br />
  可以看到select控件将继续保持输入焦点,<br /><br />
  <div #container>
    <widget type="select">
      <option value=1>第一个选项</option>
      <option value=2>第二个选项</option>
      <option value=3>第三个选项</option>
    </widget>
    <div .buttons>
      <widget type="button" .b1 >切换到第一个选项</widget>
      <widget type="button" .b2 >切换到第二个选项</widget>
      <widget type="button" .b3 >切换到第三个选项</widget>
    </div>
  </div>
</body>
</html>
*********/


var ltEle = wbLayout.querySelector("div#container > div.buttons > widget")

//CSS中横线开头的自定义属性,可以在aardio中使用 getCustomAttribute()函数获取
var val  = ltEle.getCustomAttribute("for") ;
winform.msgbox(val,
"ltEle.getCustomAttribute() 函数获取自定义属性")

winform.show()
win.loopMessage();

建议使用 aardio最新版本运行上面的代码。

回复

使用道具 举报

43

主题

679

帖子

3805

积分

版主

Rank: 7Rank: 7Rank: 7

积分
3805
 楼主| 发表于 2012-9-7 16:22:50 | 显示全部楼层

HTMLayout的HTML源码里, class="myClass" 可以简写为 .myClass, id="myId" 也可以简写为 #myId,

HTMLayout的HTML源码里,
class="myClass" 可以简写为 .myClass,
id="myId" 也可以简写为 #myId,

例如:
  1. <div #myId ></div>
复制代码
但是这种写法有时候导致在CSS中使用 #myId 选择器找不到节点。
HTML中改为 id="myId" 就正常了。

所以推荐大家尽量改用标准写法,别使用这种缩写。
回复

使用道具 举报

33

主题

543

帖子

3304

积分

荣誉会员

Rank: 8Rank: 8

积分
3304
发表于 2012-9-7 16:44:01 | 显示全部楼层

[quote][size=2][color=#999999]编程 发表于 2012-9-7 16:22[/color] [url=forum.php?mod=r

编程 发表于 2012-9-7 16:22
HTMLayout的HTML源码里,
class="myClass" 可以简写为 .myClass,
id="myId" 也可以简写为 #myId,

HTMLayout 元素的 id、class 中不推荐出现大写字母。例如 myId 应写为 my-id。

简写形式中不支持大写字母,会将大写字母转化为小写,例如:

<div #myId>这是一个层</div>


会被解析为:

<div id="myid">这是一个层</div>

import win.ui;
/*DSG{{*/
var winform = ..win.form( bottom=399;parent=...;text="aardio Form";right=599 )
winform.add(  )
/*}}*/

import web.layout;

var wbLayout = web.layout(winform);

wbLayout.html =
/**
<div #myId></div>
**/


wbLayout.getEle(
"myid").innerHTML = "test";

winform.show();
win.loopMessage();

点评

真棒: 5.0
真棒: 5
谢谢!  发表于 2012-9-7 16:58
回复

使用道具 举报

0

主题

14

帖子

176

积分

一级会员

Rank: 2

积分
176
发表于 2013-1-6 09:53:58 | 显示全部楼层

学习CSS{:3_41:}{:3_41:}

学习CSS
回复

使用道具 举报

0

主题

6

帖子

36

积分

新手入门

Rank: 1

积分
36
发表于 2014-1-24 15:06:45 | 显示全部楼层

学习CSS


学习CSS
回复

使用道具 举报

0

主题

1

帖子

12

积分

新手入门

Rank: 1

积分
12
发表于 2014-8-12 11:43:53 | 显示全部楼层

[quote][size=2][url=forum.php?mod=redirect&goto=findpost&pid=36650&ptid=7255][co

编程 发表于 2012-6-7 22:18
selector 是CSSS!脚本里的一个全局函数.
在范例里可以看到该函数用于将CSS选择器本身转换为一个选择器对象 ...

"-at"的作用是用来指定"-for"的父元素?
回复

使用道具 举报

0

主题

10

帖子

56

积分

一级会员

Rank: 2

积分
56
发表于 2015-2-9 10:28:53 | 显示全部楼层

又学习了!

又学习了!
回复

使用道具 举报

0

主题

15

帖子

109

积分

一级会员

Rank: 2

积分
109
发表于 2016-3-27 17:18:32 | 显示全部楼层

学习学习再学习

学习学习再学习
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

手机版|未经许可严禁引用或转载本站文章|站长邮箱|aardio.com|aardio官方社区 ( 皖ICP备09012014号 )

GMT+8, 2018-10-22 04:35 , Processed in 0.140625 second(s), 25 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表