站长百科 | 数字化技能提升教程 数字化时代生存宝典
首页
数字化百科
电子书
建站程序
开发
服务器
办公软件
开发教程
服务器教程
软件使用教程
运营教程
热门电子书
WordPress教程
宝塔面板教程
CSS教程
Shopify教程
导航
程序频道
推广频道
网赚频道
人物频道
网站程序
网页制作
云计算
服务器
CMS
论坛
网店
虚拟主机
cPanel
网址导航
WIKI使用导航
WIKI首页
最新资讯
网站程序
站长人物
页面分类
使用帮助
编辑测试
创建条目
网站地图
站长百科导航
站长百科
主机侦探
IDCtalk云说
跨境电商导航
WordPress啦
站长专题
网站推广
网站程序
网站赚钱
虚拟主机
cPanel
网址导航专题
云计算
微博营销
虚拟主机管理系统
开放平台
WIKI程序与应用
美国十大主机
编辑“
CSS id选择器
”
人物百科
|
营销百科
|
网赚百科
|
站长工具
|
网站程序
|
域名主机
|
互联网公司
|
分类索引
跳转至:
导航
、
搜索
警告:
您没有登录。如果您做出任意编辑,您的IP地址将会公开可见。如果您
登录
或
创建
一个账户,您的编辑将归属于您的用户名,且将享受其他好处。
反垃圾检查。
不要
加入这个!
<span style="text-align:center; border:1px solid #000; float:right; padding:6px;"><strong>导航:</strong> [[CSS学习教程#CSS学习教程|上一页]] | {{template:开发语言导航}}</span> <div style="clear:both;"></div> == id 选择器 == id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 <br> id 选择器以 "#" 来定义。<br> 下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色:<br> <nowiki>#red {color:red;}</nowiki><br> <nowiki>#green {color:green;}</nowiki><br> 下面的 HTML 代码中,id 属性为 red 的 p 元素显示为红色,而 id 属性为 green 的 p 元素显示为绿色。<br> <nowiki><p id="red">这个段落是红色。</p></nowiki><br> <nowiki><p id="green">这个段落是绿色。</p></nowiki><br> 注意:id 属性只能在每个 HTML 文档中出现一次。想知道原因吗,请参阅 XHTML:网站重构。<br> == id 选择器和派生选择器 == 在现代布局中,id 选择器常常用于建立派生选择器。<br> <nowiki>#sidebar p {</nowiki><br> <nowiki>font-style: italic;</nowiki><br> <nowiki>text-align: right;</nowiki><br> <nowiki>margin-top: 0.5em;</nowiki><br> }<br> <nowiki>上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落。这个元素很可能是 div 或者是表格单元,尽管它也可能是一个表格或者其他块级元素。它甚至可以是一个内联元素,比如 <em></em> 或者 <span></span>,不过这样的用法是非法的,因为不可以在内联元素 <span> 中嵌入 <p> (如果你忘记了原因,请参阅 XHTML:网站重构)。</nowiki><br> == 一个选择器,多种用法 == <nowiki>即使被标注为 sidebar 的元素只能在文档中出现一次,这个 id 选择器作为派生选择器也可以被使用很多次:</nowiki><br> <nowiki> #sidebar p {</nowiki><br> <nowiki>font-style: italic;</nowiki><br> <nowiki>text-align: right;</nowiki><br> <nowiki>margin-top: 0.5em;</nowiki><br> <nowiki>}</nowiki><br> <nowiki>#sidebar h2 {</nowiki><br> <nowiki>font-size: 1em;</nowiki><br> <nowiki>font-weight: normal;</nowiki><br> <nowiki>font-style: italic;</nowiki><br> <nowiki>margin: 0;</nowiki><br> <nowiki>line-height: 1.5;</nowiki><br> <nowiki>text-align: right;</nowiki><br> <nowiki>}</nowiki><br> <nowiki>在这里,与页面中的其他 p 元素明显不同的是,sidebar 内的 p 元素得到了特殊的处理,同时,与页面中其他所有 h2 元素明显不同的是,sidebar 中的 h2 元素也得到了不同的特殊处理。</nowiki><br> == 单独的选择器 == id 选择器即使不被用来创建派生选择器,它也可以独立发挥作用:<br> <nowiki>#sidebar {</nowiki><br> <nowiki>border: 1px dotted #000;</nowiki><br> <nowiki>padding: 10px;</nowiki><br> } <br> <nowiki>根据这条规则,id 为 sidebar 的元素将拥有一个像素宽的黑色点状边框,同时其周围会有 10 个像素宽的内边距(padding,内部空白)。老版本的 Windows/IE 浏览器可能会忽略这条规则,除非你特别地定义这个选择器所属的元素:</nowiki><br> <nowiki>div#sidebar {</nowiki><br> <nowiki>border: 1px dotted #000;</nowiki><br> <nowiki>padding: 10px;</nowiki><br> }<br> [[category:CSS学习教程]]
摘要:
请注意,您对站长百科的所有贡献都可能被其他贡献者编辑,修改或删除。如果您不希望您的文字被任意修改和再散布,请不要提交。
您同时也要向我们保证您所提交的内容是您自己所作,或得自一个不受版权保护或相似自由的来源(参阅
Wordpress-mediawiki:版权
的细节)。
未经许可,请勿提交受版权保护的作品!
取消
编辑帮助
(在新窗口中打开)
本页使用的模板:
模板:开发语言导航
(
编辑
)