作者jimmyken793 (达)
看板jimmyken793
标题[ HW ] CSS选取器 基本款
时间Sat Nov 29 08:58:22 2008
※ [本文转录自 jimmyken793]
科科 借我打广告
CSS语法里面有个很重要也很强大的的东西 Selector
什麽是Selector呢
简单来说就是一段用来描述你想要指定的目标的语法
例如
#kerker{
color:blue;
}
会把id是kerker的这个元素变成蓝色
蓝色的那部分就是Selector了
W3C的规格(阿 叫做建议规格XD)在这里
http://www.w3.org/TR/CSS2/selector.html
底下会简单的介绍一下
以下如果有用大写代表标签内的Attribute值或者目标物件的属性
一开始是单一个Selector的介绍
* 全部选取
就是把网页上所有元素选取起来
TAG 把目标标前名称为TAG的都选起来
例如我打div就是把所有<div>标签都选起来
.C_NAME 将网页里面Class是C_NAME的东西选起来
class的指定方式是这样的 <div class="abc"> abc123 </div>
#TARGET 把网页里面id是TARGET的选起来
ID的指定方法和CLASS很像 也就是<div id="ababc"> ababc123123 </div>
非常强大好用的功能
[ATTR] 把网页里面有任何一个Attribute的值是ATTR的都选起来
例如 <div abc="kk"></div> <p sd="kk"></p> 等都会被[kk]选到
[ATTR=VAL] 把网页里面所有元素里面 有个叫做ATTR的Attribute而且里面的值是VAL的都
选起来(好长= =)
例如 <div ss="kk"></div> <p ss="kk"></p> 就可以用 [ss=kk]来选
那麽就要讲到把它们组合在一起用了
有很多种组合法
序列:
div h2
这样是就是选取接在div後面的h2标签(注意是选取那个h2 而不是div)
像是 <div></div><h2>Title</h2>
巢状:
div>h2
这样则是选取在div"里面"的h2标签
例如 <div><h2>Title</h2></div>
一次定义多个:
.button, .link, .input
这样选取的是属於button、link或input"类别"的元素
以下皆适用
<div class="button"></div>
<a class="link"></a>
<div class="input"></div>
另外还有某些特殊属性(没有傲娇)
active 点下去的那瞬间险式的样式
hover 滑过去的时候显示的样式
focus 被选到的时候显示的样式
link 没被点过的连结的样式
visited 被点过的连结的样式
属性的用法就是
Selector:属性
例如
.topMenuLinks:hover
之类的东西
Selector的简单介绍大概到这
关於内部描述样式的那部分 有人要接手吗囧
--
※ 发信站: 批踢踢兔(ptt2.cc)
◆ From: 118.166.117.46
1F：→ ming1053:要注意id只能有一个，class可重复(无名的工程师在这点推 11/29 12:52
2F：→ ming1053:脑包...)推 11/29 12:52
3F：→ jimmyken793:ID有重复印象中在getElementById会爆炸推 11/29 20:36
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 118.166.117.46
※ 编辑: jimmyken793 来自: 118.166.117.46 (11/29 20:55)
※ 编辑: jimmyken793 来自: 118.166.117.46 (11/29 20:56)
※ 编辑: jimmyken793 来自: 118.166.117.46 (11/29 20:59)
※ 编辑: jimmyken793 来自: 118.166.117.46 (11/29 20:59)
4F：→ jimmyken793:勘误 有打错请通知我XD 11/29 20:59
5F：→ benck:吉米肯好威 推一个 11/29 21:00
※ 编辑: jimmyken793 来自: 118.166.117.46 (11/29 21:01)
※ 编辑: jimmyken793 来自: 118.166.117.46 (11/29 21:03)
※ 编辑: jimmyken793 来自: 118.166.117.46 (11/29 21:04)
6F：推 jlg79531: 吉米肯好威 11/29 21:21
7F：推 LPH66:路人推没有傲娇XDDD 11/30 18:45