Question

这是我的菜单条形码：

<!DOCTYPE html>
<html>
<link href = menuBarStyle.css rel = "stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">   
<div class = "menu">

<ul class = "bar">
    <li><a href = "index.php">Home</a></li>
    <li><a>Music</a>
        <ul>
        <li><a href = "djdizzstart.php">DJ Dizz Home</a></li>
        <li><a href = "djdizzspotify.php">Spotify</a></li>
        <li><a href = "djdizzsoundcloud.php">SoundCloud</a></li>
        <li><a href = "djdizzitunes.php">iTunes</a></li>               
        </ul>           
    </li>            
    <li><a>Learn</a>     
        <ul>          
        <li><a>JavaScript</a></li>
        <li><a>Java</a></li>
        <li><a>Web</a></li>
        <li><a>SQL Databases</a></li>            
        </ul>
    </li>
    <li><a>Credits</a>
        <ul>
            <li><a>Design & Code</a></li>
            <li><a>Music</a></li>
            <li><a>Marketing</a></li>
            <li><a>Hosting</a></li>
           </ul>
      </li>
    <li><a id = "login">Login</a></li>
 </ul>
 </div>
</html>

这是样式：

import url('https://fonts.googleapis.com/css? 
family=Amatic+SC:700|Hind+Siliguri|Shadows+Into+Light');

body {
    background-size: cover;
    font-family: 'Hind Siliguri', sans-serif;
    color: white;
    min-width:800px;       
    width: auto !important;  
    width:800px; 
}
ul {
    margin: 0px;
    padding: 0px;
    list-style: none;    
    position: relative;
    float:left;
    left: 50%;
    cursor:pointer;
    max-width: 100%;
}
ul li {
    float: left;
    width: 200px;
    height: 40px;
    background-color: black;
    opacity: .8;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
    display:block;
    position: relative;
    right: 50%;
}
ul li a {
    text-decoration: none;
    color: white;
    display: block;       
}
ul li a:hover {
    background-color: green;
}
ul li ul li {
    display: none;
}
ul li: hover ul li {
    display: block;
}
#login {
    background-color: green;
    text-decoration: none;
    border: none;
}
#login:hover {
    background-color: limegreen;
}
#menu {
    z-index: 2;
    position: relative;
}

现在，我想要做的就是使所有其他元素独立于该样式，但是我下面的代码中的ul li始终具有我的navigationBar的样式。

<!DOCTYPE html>
<html>    
<head><title>DJ Dizz iTunes</title></head>
<?php include ("menuBar.html"); ?>
<link href = "style.css" rel = stylesheet>
<body>
    <div id="Startpage">
        <p style="text-align: center">iTunes</p>
    </div>
    <div id="itunes" style="text-align:center">
        <a href="https://geo.itunes.apple.com/us/artist/dj-dizz/1204428323?mt=1&app=music" style="display:inline-block;overflow:hidden;background:url(https://linkmaker.itunes.apple.com/assets/shared/badges/de-de/music-lrg.svg) no-repeat;width:200px;height:55px;"></a>
    </div>
    <ul id="songs">
        <li><a href = "https://geo.itunes.apple.com/us/album/staying-down/1434126188?i=1434126382&mt=1&app=music">Staying Down</a></li>
        <li><a href = "https://geo.itunes.apple.com/us/album/its-me/1270058662?i=1270058790&mt=1&app=music">It's Me</a></li>    
    </ul>           
</body>
</html>

因此，带有iTunes href的其他ul li元素现在根本没有改变，它们与navigationBar保持不变。我尝试了类和ID，但是没有用。除了我的.php，所有文件都位于menuBar中，这是.html

感谢您的回答

Lars（初学者）

Answer 1

您的导航中包含“ bar”类，因此您需要在CSS中指定该类以仅定位该元素，而不是页面上的所有ul。例如：

import { Injectable } from '@angular/core';
import { ApiService } from "../../services/api.service";
import { HttpClient,  HttpParams, HttpResponse} from '@angular/common/http';
import { Observable } from "rxjs/Observable";
import { timeout } from 'rxjs/operators';

@Injectable()
export class GifpickerService {

    public items: Array<object>;

    constructor(
        private http: HttpClient,
        private apiService: ApiService
    ) { }

    search(searchTerm: string): any {
        let url = this.apiService.getApiUrl('gif/search');
        let params = new HttpParams();
        params = params.append('q', searchTerm);

        return this.http.get(url, {params: params})
           .subscribe(response => {
              console.log(response);
            });
     };
}

对CSS中的所有ul规则执行此操作，就可以了。

所有元素仍然具有menuBar样式吗？（<！-？php包括...-->）

1 个答案:

所有元素仍然具有menuBar样式吗？ （<！-？php包括...-->）

1 个答案:

所有元素仍然具有menuBar样式吗？（<！-？php包括...-->）