Question

我使用单独的CSS文件创建了一个站点，现在我想将它们组合起来。问题是我不能简单地将所有内容复制/粘贴到1个文件中，因为我的媒体查询具有不同的html，h1，h2，h3值。

有没有办法让媒体查询指定一个页面，以便它只选择主页的html和h1，而不更改联系页面的html和h1？

编辑：这是一个Wordpress自定义模板，因此所有页面将共享相同的标题和html开始标记。

示例：

我如何组合这两个文件？

index.css：

static void Main(string[] args)
{
    Hashtable ht = GetID(); // Use hashtable to concate 2 parameters
    Console.WriteLine("Your id is {0} and your password is {1}", ht["id"], ht["pass"]);            
}
// Change return type to Hashtable so it can return 2 concate parameter
public static Hashtable GetID()
{
    Hashtable ht = new Hashtable();
    Console.WriteLine("Please enter your ID");
    int id = int.Parse(Console.ReadLine());
    Console.WriteLine("You entered {0} as the id \t, is this correct? Y/N", id);
    string response = Console.ReadLine();
    // Store Password from here
    string pass = "";
    switch (response)
    {
        case "N":
            GetID();
            break;
        case "Y":
            Console.WriteLine("Accepted");
            pass = GetPass(id);
            break;
        default:
            Console.WriteLine("Incorrect answer");
            break;
    }
    // Adding 2 parameters
    ht["id"] = id;
    ht["pass"] = pass;
    return ht;
}
// No need of ref
public static string GetPass(int id)
{
    Console.WriteLine("Please enter your password");
    string password = Console.ReadLine();
    Console.WriteLine("You entered {0} as the id \t, is this correct? Y/N", password);
    string response = Console.ReadLine();
    switch (response)
    {
        case "N":
            GetPass(ref id);
            break;
        case "Y":
            Console.WriteLine("Accepted");
            break;
        default:
            Console.WriteLine("Incorrect answer");
            break;
    }
    return password;
}

contact.css：

html {
    font-size: 16px;
}

h1 {
    font-size: 1.5rem;
}

@media only screen and (min-device-width: 700px) {
    html {
        font-size: 17px;
    }
    h1 {
        font-size: 2rem;
    }
}

Answer 1

为这个特定页面提供一个类：

<link />

在CSS中：

<style>

或者：

仅将.aboutSection{ width: 100%; height:100%; position:relative; display:flex; flex-direction:column; flex-wrap:wrap; align-items:center; justify-content:center; } .section{ position:relative; display:flex; flex-direction:row; width:90%; overflow:hidden; } .aboutSection .section:nth-child(odd){ flex-direction:row-reverse;} .section p{ width:40%; margin:0; padding:2px; } .section img{ flex:0; width:auto; min-height:100%; }添加到该特定页面。
或作为该特定页面中的<div class="aboutSection"> <div class="section"> <p> <b>ME</b><br>Hello! My name is Max Jordan. I am a student living in the UK currently doing A-Levels in Maths, Engineering, Physics and computer science. I then want to do a degree in computer science and work as a Software Engineer/Developer. I currently live in Nottingham in the UK. I love programming and creating elegant soloutions for problems. </p> <img src="http://www.markgray.com.au/images/gallery/large/desert-light.jpg"> </div> <div class="section"> <p> <b>WORK</b><br> </p> <img src="http://www.markgray.com.au/images/gallery/large/desert-light.jpg"> </div> <div class="section"> <p> </p> <img src="http://www.markgray.com.au/images/gallery/large/desert-light.jpg"> </div> </div>标记。

Answer 2

如果主体类尚未在主题中使用，则可以使用它： https://developer.wordpress.org/reference/functions/body_class/

这将自动为主页，帖子，档案等添加特定的类。然后，您可以拥有一组全局使用的CSS规则，之后，您可以定义其他页面的所有特定样式。 / p>

body {
    font-size: 16px;
}
h1 {
    font-size: 1.5rem;
}

body.class-name {
    font-size: 18px;
}
h1.class-name {
    font-size: 1rem;
}

@media only screen and (min-device-width: 700px) {
    body {
        font-size: 17px;
    }
    h1 {
        font-size: 2rem;
    }

    html.class-name {
        font-size: 19px;
    }
    h1.class-name {
        font-size: 1.5rem;
    }
}

Answer 3

大多数WordPress页面具有类似-> .page-id-12345-的类，其中12345对于该页面是唯一的，并且不会更改。页面不包含此非常独特的类，但将（或应该）定义一个可以唯一标识该类的类，例如地理目录搜索结果页面上有一个名为“ .search-results”的顶级类。

有没有办法让媒体查询选择一个特定的页面？

3 个答案: