gpt4 book ai didi

html - 当 CSS 选择器在 CSS 文件的一个部分中定义而不在另一个部分中定义时,CSS 选择器会影响 HTML 元素吗?

转载 作者:太空宇宙 更新时间:2023-11-03 22:07:11 24 4
gpt4 key购买 nike

CSS 选择器 .content-block 影响本节中的 .content-block div:

#branding, #mainbar, #accordion, .content, .content0, .content-block, .posts, #footer a {
margin-left: 10px !important;
margin-right: 10px !important;
}

但不在这一个中:

   .content-block {
float: left;
margin: 10px 0 20px;
width: 300px;
}
.content-block h2 {
background: url(images/underline.png) repeat-x scroll center;
font-size: 22px;
letter-spacing: -1px;
padding: 0 0 15px 0;
}
.content-block p {
padding-top: 20px;
}

CSS 文件:

  /* Structure */
.container {
margin: 0 auto;
overflow: hidden;
width: 960px;
}
#header .container, #tagline .container {
margin: 0 auto;
overflow: hidden;
text-align: center;
width: 960px;
}
#header, #intro, #tagline, #content {
background: url(images/bg.png) top center repeat;
}
#branding, #mainbar, #accordion, .content, .content0, .content-block, .posts, #footer a {
margin-left: 10px !important;
margin-right: 10px !important;
}
#intro h2, #content h2, #nav li a {
text-shadow: 0 1px 0 #FFF;
}
/* Header */
#header {
}
#header a {
color: #333
}
#header a:hover {
color: #28A
}
#branding {
float: left;
margin: 10px 0 10px;
width: 940px;
}
#header h1, #lang {
margin: 20px 0 12px;
width: 280px;
}
#header h1 {
float: left;
overflow: hidden;
width: 940px;
}
/* Intro */
#intro, #intro2 {
background: #333;
}
#intro {
height: 300px;
}
#intro2 {
background: #333;
}
#intro2 h2 {
color: #DDD;
font-size: 30px;
}
#intro2 h2 {
color: #DDD;
font-size: 30px;
}
.shadow-top {
height: 10px;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#222), to(#333));
background: -moz-linear-gradient(#222, #333);
-pie-background: linear-gradient(#222, #333);
}
.shadow-bottom {
height: 10px;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#333), to(#222));
background: -moz-linear-gradient(#333, #222);
-pie-background: linear-gradient(#333, #222);
/* Tagline */
#tagline {
}
.content {
margin: 20px 0;
}
.content0 h2, .content h2 {
font-size: 30px;
letter-spacing: -1px;
}
.content0 {
margin: 130px 0 50px;
}
/* Content */
#content {
}
#mainbar {
float: left;
margin: 0 0 0;
overflow: hidden;
}
.content-block {
float: left;
margin: 10px 0 20px;
width: 300px;
}
.content-block h2 {
background: url(images/underline.png) repeat-x scroll center;
font-size: 22px;
letter-spacing: -1px;
padding: 0 0 15px 0;
}
.content-block p {
padding-top: 20px;
}
#blog {
float: left;
width: 640px
}
.post {
margin-bottom: 30px;
}
.post {
border-bottom: 1px solid #BBB;
padding: 0 0 30px 0;
}
.post h2 {
margin-bottom: 10px;
}
.post h2 a {
color: #333;
}
.post h2 a:hover {
color: #28A;
}
.post .posted-on {
font-size: 10px;
margin-bottom: 10px;
}
.post p {
margin-bottom: 30px;
}
.post p.read-more a {
background: #28A;
color: #FFF;
padding: 5px 20px;
}
.post .post-bottom {
font-size: 10px;
}

PHP文件:

<div class="container">
<div id="mainbar">
<?php // Create and run custom loop
$custom_posts = new WP_Query();
$custom_posts->query('category_name=Content (Front Page)');
while ($custom_posts->have_posts()) : $custom_posts->the_post();
?>
<div class="content-block">
<h2><?php the_title(); ?></h2>
<p><?php the_content(); ?></p>
</div><!-- .content-block -->
<?php endwhile; ?>
</div><!-- #mainbar -->
</div><!-- .container -->

引用图片:

enter image description here

确实很奇怪。

最佳答案

.shadow-bottom {
height: 10px;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#333), to(#222));
background: -moz-linear-gradient(#333, #222);
-pie-background: linear-gradient(#333, #222);

缺少 http://jigsaw.w3.org/css-validator/是一个有用的工具。

/* Tagline */
#tagline {
}

关于html - 当 CSS 选择器在 CSS 文件的一个部分中定义而不在另一个部分中定义时,CSS 选择器会影响 HTML 元素吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4966704/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com