Question

我很难理解如何在h2标题下更改div行的字体。我试图在线查找有关此内容的信息，但仅限于内联或标题已被归类为类。我无法编辑html代码，我只能修改css文件。我还尝试通过编写Class examples来定义头部然后定义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 Fiddle

＆＃13;

*
{
	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;
}

＆＃13;

<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>

＆＃13;

Answer 2

尝试此操作来更改每个div字体而不修改html。我们的想法是使用相邻的兄弟作为目标，例如h2 + div，h2 + div + div，h2 + div + div + div等等。

＆＃13;

    
    *
    {
    	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;
}

＆＃13;

    <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>

＆＃13;

Answer 3

您可以使用Adjacent兄弟组合器

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

这只会影响h2元素

的（下一个元素）的直接兄弟

有关css组合器的更多信息here

Answer 4

这将适用于您的代码。

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

此致

更改div css的字体

4 个答案: