如何在没有内联样式的无序列表中设置每个列表项的样式？

Question

我有这个无序列表：

<div id="topmenudiv">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
</div>

如何在不使用内联样式的情况下，使用CSS分别访问每个li标记以便为每个标记设置样式？

Answer 1

如果您想以不同方式设置每个列表项的样式，可以使用nth-child selector：

/* First item */
li:nth-child(1) {
  color: red;
}

/* Second item */
li:nth-child(2) {
  color: blue;
}


/* Add additional items */

<div id="topmenudiv">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>
</div>

Answer 2

像这样使用：

class Form < ActiveRecord::Base
  self.table_name = 'tblForms_tbl'
  self.primary_key = 'formID'
  self.inheritance_column = :_type_disabled

  alias_attribute :formsTitle, :title

  # use self.category as an accessor for the "type" column
  def category=(type)
    attr_writer :type, type
  end

  def category
    attr_reader :type
  end

end