更改div CSS的字体

Question

我很难理解如何更改h2标头下的div行的字体。 我试图在网上找到有关此信息，但只能是内联的，或者标头已被分类为类。 我无法编辑html代码，只能修改css文件。 我还尝试通过编写Class示例来定义标头，然后定义div元素。示例1：对CSS类进行编写，然后编写代码。 这是一个问题，因为div类中不能有空格吗？

 * { background-color: #ffcc66; color: #003399; font-family: Comic Sans MS; font-size: 14px; } a { color: #CC0000; text-decoration: none; } a:visited { color: #CC0000; } a:hover { color: #006600; } a:active { color: #CC0000; } h1 { background-color: #3399FF; text-align: center; margin: 35px; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: #000033; } h2 { color: #333333; font-weight: bold; } p { font-family: Georgia; color: #003300; padding: 15px; } li { font-family: Arial; background-color: #808080; font-weight: bold; font-size: 18px; } 

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Test</title> <link rel="stylesheet" type="text/css" href="styles.css"/> </head> <body> <h1>Formatting with CSS</h1> <p>This is a basic web page to be used as a test for applying CSS formatting rules.</p> <h2>Hyperlinks</h2> <a href="http://www.google.com/">Link to the Google website</a> <br/> <a href="http://www.google.com/">Link to the google page on CSS</a> <h2>List Items</h2> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 2</li> </ul> <h2>Class examples</h2> <div>Example 1 Class CSS</div> <div>Example 2 Class CSS</div> <div>Example 3 Class CSS</div> </body> </html> 

Answer 1

您可以使用nth-of-type，因为您只有单独的div 小提琴

 * { background-color: #ffcc66; color: #003399; font-family: Comic Sans MS; font-size: 14px; } a { color: #CC0000; text-decoration: none; } a:visited { color: #CC0000; } a:hover { color: #006600; } a:active { color: #CC0000; } h1 { background-color: #3399FF; text-align: center; margin: 35px; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: #000033; } h2 { color: #333333; font-weight: bold; } p { font-family: Georgia; color: #003300; padding: 15px; } li { font-family: Arial; background-color: #808080; font-weight: bold; font-size: 18px; } div:nth-of-type(1){ font-family: Arial; } div:nth-of-type(2){ font-family: fantasy; } div:nth-of-type(3){ font-family: Trebuchet; } 

 <h1>Formatting with CSS</h1> <p>This is a basic web page to be used as a test for applying CSS formatting rules.</p> <h2>Hyperlinks</h2> <a href="http://www.google.com/">Link to the Google website</a> <br/> <a href="http://www.google.com/">Link to the google page on CSS</a> <h2>List Items</h2> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 2</li> </ul> <h2>Class examples</h2> <div>Example 1 Class CSS</div> <div>Example 2 Class CSS</div> <div>Example 3 Class CSS</div> 

Answer 2

尝试通过不更改html的方式更改每个div字体。 想法是使用相邻的同级对象（例如h2 + div ， h2 + div + div ， h2 + div + div + div等）来定位每个给定对象

 * { background-color: #ffcc66; color: #003399; font-family: Comic Sans MS; font-size: 14px; } a { color: #CC0000; text-decoration: none; } a:visited { color: #CC0000; } a:hover { color: #006600; } a:active { color: #CC0000; } h1 { background-color: #3399FF; text-align: center; margin: 35px; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: #000033; } h2 { color: red; font-weight: bold; } p { font-family: Georgia; color: #003300; padding: 15px; } li { font-family: Arial; background-color: #808080; font-weight: bold; font-size: 18px; } * { background-color: #ffcc66; color: #003399; font-family: Comic Sans MS; font-size: 14px; } a { color: #CC0000; text-decoration: none; } a:visited { color: #CC0000; } a:hover { color: #006600; } a:active { color: #CC0000; } h1 { background-color: #3399FF; text-align: center; margin: 35px; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: #000033; } h2 { color: red; font-weight: bold; } p { font-family: Georgia; color: #003300; padding: 15px; } li { font-family: Arial; background-color: #808080; font-weight: bold; font-size: 18px; } h2 + div{ font-family: Arial; } h2 + div + div{ font-family: Sakkal Majalla; } h2 + div + div + div{ font-family: Batang; } 

  <html> <head> <meta charset="utf-8"> <title>Test</title> <link rel="stylesheet" type="text/css" href="styles.css"/> </head> <body> <h1>Formatting with CSS</h1> <p>This is a basic web page to be used as a test for applying CSS formatting rules.</p> <h2>Hyperlinks</h2> <a href="http://www.google.com/">Link to the Google website</a> <br/> <a href="http://www.google.com/">Link to the google page on CSS</a> <h2>List Items</h2> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 2</li> </ul> <h2>Class examples</h2> <div>Example 1 Class CSS</div> <div>Example 2 Class CSS</div> <div>Example 3 Class CSS</div> </body> </html> 

Answer 3

您可以使用相邻的同级组合器

h2 + div {
  background-color: #808080;
}

这只会影响h2元素（之后的下一个元素）的立即同级

更多关于CSS组合器的信息

Answer 4

这将在您的代码中起作用。

div:first-of-type {
    /*Your Styles Here*/
}

问候，