使用css对文本应用更改

我再次需要帮助。我有一个问题做一些改变在我的html和css文本。我可以问一下，我调用给定类的方法是"title"有什么问题吗?我不能做任何改变，如颜色，字体粗细等

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-transform: capitalize;
  transition: all .2s linear;
  list-style-type: none;
  text-decoration: none;
  font-family: 'Poppins';
}

/*bluebar on top css*/
.bluebar {
  width: 100%;
  height: 30px;
  background-color: #1C3879;
}

/*Header logo cart login css*/
header .mlogo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  width: 100%;
  padding: 10px 20px;
}
header .logo {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}
.iconbar {
  float: right;
  margin-right: 10%;
}
.shopicons {
  padding: 14px 15px;
  margin-right: 1px;
}
.shopicons a {
  padding: 13px;
  color: #607EAA;
  font-weight: bold;
  font-size: 15px;
}
.shopicons i {
  font-size: 25px;
  text-align: left;
}
.shopicons a:hover {
  color: #1C3879;
}

/*navigation bar css*/
.mainnav {
  text-align: center;
  font-family: 'Poppins', sans-serif;
}
.mainnav ul {
  list-style: none;
  background-color: #607EAA;
}
.mainnav ul li {
  display: inline-block;
  position: relative;
}
.mainnav ul li a {
  display: block;
  padding: 20px 25px;
  color: #EAE3D2;
  text-decoration: none;
  text-align: center;
  font-size: 15px;
  text-transform: capitalize;
  justify-content: space-between;
  font-weight: 600;
  word-spacing: 1px;
  letter-spacing: 1px;
}
.mainnav ul li ul.dropdown li {
  display: block;
}
.mainnav ul li ul.dropdown {
  width: 100%;
  background: #607EAA;
  position: absolute;
  z-index: 999;
  display: none;
}
.mainnav ul li a:hover {
  background-color: #1C3879;
}
.mainnav ul li:hover ul.dropdown {
  display: block;
}

/*image slider top css*/
.slidecontainer {
  margin: auto;
  width: 100%;
  height: 500px;
  align-items: center;
  display: flex;
  justify-content: center;
}
.swiper {
  width: 100%;
  height: fit-content;
}
.swiper-slide img {
  width: 100%;
}

/*brands*/
.title {
  color: red;
}
.brands-wrap {
  margin: 50px 20px 20px 20px;
}
.brands-in {
  width: 100%;
  height: auto;
}
.brands-in ul {
  padding: 0;
  margin: 0;
}
.brands-in ul li {
  list-style: none;
  display: inline-block;
  width: 200px;
  height: 200px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: .5s;
}
.brands-in ul li img {
  width: 100%;
  height: 100%;
}
.brands-in ul li img:nth-child(1) {
  transform: translateY(0);
  transition: .5s;
}
.brands-in ul li img:nth-child(2) {
  transform: translateY(0);
  transition: .5s;
}
.brands-in ul li:hover img:nth-child(1) {
  transform: translateY(-100%);
  transition: .5s;
}
.brands-in ul li:hover img:nth-child(2) {
  transform: translateY(-100%);
  transition: .5s;
}

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Main Page</title>
  <link rel="stylesheet" href="./cssfiles/main.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
  <link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
</head>
<div class="bluebar">
</div>
<!--Header Part (header.php)-->
<?php
    include_once 'header.php';
?>

  <body>
    <!--navigation bar-->
    <div class="mainnav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Shop now</a>
        </li>
        <li><a href="#">All Brands ▼</a>
          <ul class="dropdown">
            <li><a href="#">Nike</a></li>
            <li><a href="#">Adidas</a></li>
            <li><a href="#">Skechers</a></li>
            <li><a href="#">Fila</a></li>
            <li><a href="#">New Balance</a></li>
            <li><a href="#">Under Armour</a></li>
          </ul>
          <li><a href="#">Contact Us</a></li>
    </div>
    <!--Image Slider - Top-->
    <div class="slidecontainer">
      <div class="swiper">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
          <!-- Slides -->
          <div class="swiper-slide"><img src="slideshow/1.jpg"></div>
          <div class="swiper-slide"><img src="slideshow/2.jpg"></div>
          <div class="swiper-slide"><img src="slideshow/3.jpg"></div>
        </div>
        <!-- If we need pagination -->
        <div class="swiper-pagination"></div>
        <!-- If we need navigation buttons -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
    </div>

    <!--Brands section-->
    <div class="titlecontent">
      <p class="title">Our Brands</p>
    </div>
    <div class="brandcontainer" id="brands">
      <div class="brands-wrap">
        <div class="brands-in">
          <ul>
            <li>
              <!--Nike logo-->
              <img src="./images/nike1.png">
              <img src="./images/nike2.png">
            </li>
            <li>
              <!--Adidas-->
              <img src="./images/addi1.png">
              <img src="./images/addi2.png">
            </li>
            <li>
              <!--New Balance-->
              <img src="./images/nb1.png">
              <img src="./images/nb2.png">
            </li>
            <li>
              <!--Underarmour-->
              <img src="./images/ua1.png">
              <img src="./images/ua2.png">
            </li>
            <li>
              <!--Fila-->
              <img src="./images/fila1.png">
              <img src="./images/fila2.png">
            </li>
            <li>
              <!--Skechers-->
              <img src="./images/ske1.png">
              <img src="./images/ske2.png">
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!--Footer part (footer.php)-->

    <!--Script for image slider-->
    <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
    <script>
      const swiper = new Swiper('.swiper', {
        spaceBetween: 30,
        centeredSlides: true,
        // Optional parameters
        autoplay: true,
        // If we need pagination
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        // Navigation arrows
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      });
    </script>

这个文件实际上是测试文件，因为当我试图在主文件中这样做时，它不允许我改变颜色或任何与文本相关的东西。

我期望的输出当然是制作"我们的品牌"。段落变成红色

由于这个用户没有提供足够的信息(在我写这个答案的时候，我已经根据当时提供的信息来写了)

CSS不能工作的原因有很多。

文件链接错误

我认为以上是不言自明的

浏览器缓存

浏览器通常会缓存，或暂时存储，从你访问的网站的资源，以提高加载速度。有些网站还会使用插件来进行额外的缓存。通常当你的网站上看不到你的自定义样式时，这是因为浏览器或其他系统缓存了一个旧版本的网站。

CSS格式无效

CSS必须以特定的格式编写，以便浏览器能够理解它。有很多在线工具可以检查你的CSS是否有效，包括W3School的CSS验证器。如果你有很多自定义CSS，并且至少有一点创建CSS的经验，这是一个很好的选择。

CSS特异性

因为所有的主题和大多数插件都包含他们自己的样式集，你会经常发现你的自定义样式必须与现有的样式"竞争"。在这种情况下，更具体的CSS选择器几乎总是优于不太具体的选择器。

关于CSS专用性的方法是在CSS中使用!

在某些情况下，您可以通过在分号前包含!important规则来强制不太特定的CSS片段工作。首先尝试一个更具体的选择器(如上所述)总是更好的，但有时这可以提供一个快速修复。

相关内容

最新更新

热门标签：