[OT]请教一个关于CSS的问题

[Arith Xu]

最近因为要做j2ee的期末大作业，后台都写好了。因为没有接触过css，所以对css无从下手。

有一段css，我想让它只对网页中特定的一个标签<div>.....</div>内的所有标签生效，如何实现？我附上css代码。

<style type="text/css">

h2,p{

  font-size:100%;

  font-weight:normal;

}

ul,li{

  list-style:none;

}

ul{

  overflow:hidden;

  padding:3em;

}

ul li a{

  text-decoration:none;

  color:#000;

  background:#ffc;

  display:block;

  height:10em;

  width:10em;

  padding:1em;

  -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);

  -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);

  box-shadow: 5px 5px 7px rgba(33,33,33,.7);

  -moz-transition:-moz-transform .15s linear;

  -o-transition:-o-transform .15s linear;

  -webkit-transition:-webkit-transform .15s linear;

}

ul li{

  margin:1em;

  float:left;

}

ul li h2{

  font-size:140%;

  font-weight:bold;

  padding-bottom:10px;

}

ul li p{

  font-family:"Reenie Beanie",arial,sans-serif;

  font-size:180%;

}

ul li a{

  -webkit-transform: rotate(-6deg);

  -o-transform: rotate(-6deg);

  -moz-transform:rotate(-6deg);

}

ul li:nth-child(even) a{

  -o-transform:rotate(4deg);

  -webkit-transform:rotate(4deg);

  -moz-transform:rotate(4deg);

  position:relative;

  top:5px;

  background:#cfc;

}

ul li:nth-child(3n) a{

  -o-transform:rotate(-3deg);

  -webkit-transform:rotate(-3deg);

  -moz-transform:rotate(-3deg);

  position:relative;

  top:-5px;

  background:#ccf;

}

ul li:nth-child(5n) a{

  -o-transform:rotate(5deg);

  -webkit-transform:rotate(5deg);

  -moz-transform:rotate(5deg);

  position:relative;

  top:-10px;

}

ul li a:hover,ul li a:focus {

  box-shadow:10px 10px 7px rgba(0,0,0,.7);

  -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);

  -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);

  -webkit-transform: scale(1.25);

  -moz-transform: scale(1.25);

  -o-transform: scale(1.25);

  position:relative;

  z-index:5;

}

ol{text-align:center;}

ol li{display:inline;padding-right:1em;}

ol li a{color:#fff;}

</style>

[Alan Z]

div 上加 id属性 id="list"，然后所有的 css 选择器前加 #list

 

比如：

#list h2,p{

  font-size:100%;

  font-weight:normal;

}

相关教程：

http://www.w3schools.com/css/default.asp 英文

http://www.w3school.com.cn/css/index.asp 中文

2013/5/17 Arith Xu <icea...@gmail.com>

--
-- You received this message because you are subscribed to the Google Groups Shanghai Linux User Group group. To post to this group, send email to sh...@googlegroups.com. To unsubscribe from this group, send email to shlug+un...@googlegroups.com. For more options, visit this group at https://groups.google.com/d/forum/shlug?hl=zh-CN
---
您收到此邮件是因为您订阅了 Google 网上论坛的“Shanghai Linux User Group”论坛。
要退订此论坛并停止接收此论坛的电子邮件，请发送电子邮件到 shlug+un...@googlegroups.com。
要查看更多选项，请访问 https://groups.google.com/groups/opt_out。
 
 

--

Alan Zhu

----------------------------------------

MOBILE: +86 18502139300

 

[依云]

On Fri, May 17, 2013 at 09:38:30AM +0800, Arith Xu wrote:
> 最近因为要做j2ee的期末大作业，后台都写好了。因为没有接触过css，所以对css无从下手。
> 有一段css，我想让它只对网页中特定的一个标签<div>.....</div>内的所有标签生效，如何实现？我附上css代码。

哈，好像 Fx 22 刚加上 scoped style 支持呢 ^_^

--
Best regards,
lilydjwg

Linux Vim Python 我的博客:
http://lilydjwg.is-programmer.com/
--
A: Because it obfuscates the reading.
Q: Why is top posting so bad?

[Arith Xu]

嗯，按照你的方法，搞定了。谢谢你呀~

2013/5/17 Alan Z <tozh...@gmail.com>

[小花喵]

#=id

.=class

都可以，id & class不能用数字命名。

~盛开如夏莲，美丽动人~
~شکوفه مانند لوتوس تابستان، زیبا~
Me.Sina 

小花(Jyu..)谨上

[依云]

On Sat, May 18, 2013 at 10:31:08PM +0800, 小花喵 wrote:
> #=id
> .=class
>
> 都可以，id & class不能用数字命名。

是么？我看中文都可以的呢。

[ghosTM55]

2013/5/17 Arith Xu <icea...@gmail.com>

最近因为要做j2ee的期末大作业，后台都写好了。因为没有接触过css，所以对css无从下手。

有一段css，我想让它只对网页中特定的一个标签<div>.....</div>内的所有标签生效，如何实现？我附上css代码。

如果想让一段CSS代码对特定div中的所有标签生效，首先需要使用class或者id来标记这个div

一般我们都会使用class，id已经接近被抛弃的边缘，唯一的好处就是JavaScript在操作标记为id的标签时会在一些地方比较方便

所以一般来说你会需要这么写:

.classname div * {

    property: value;

}

所有 <div class="classname">...</div> 的标签以及包含在内的tag都会生效

--
Thomas
Shanghai Linux User Group

GitCafe - Share a cup of open source

http://ghosTunix.org
Twitter: @ghosTM55

[小花喵]

真的中文我有试过，不记得是用啥的浏览器居然也行耶，不过大多数不行。

(╯▽╰ ) 

~盛开如夏莲，美丽动人~
~شکوفه مانند لوتوس تابستان، زیبا~
Me.Sina 

小花(Jyu..)谨上

2013/5/18 依云 <lily...@gmail.com>