我的网站上有一个(导航(菜单，如下所示：
a
{
background:red;
}<a href="#">Home</a>
<a href="#">Downloads</a>
<a href="#">Contact</a>
<a href="#">FAQ</a>
<a href="#">Disclaimer</a>如果屏幕足够宽，菜单将显示在一行中。
但如果屏幕不够宽(例如智能手机(，就会有更多的线路。
这种情况下有CSS选择器吗？
对于这个例子，使用这样的选择器将背景颜色更改为绿色就足够了。
如果你知道你的字体值，更准确地说是一行的高度，这是一种很巧妙的想法。
调整屏幕大小，看看魔术：
.nav {
position:relative; /* relative here, no on the links */
font-size:20px;
line-height:1.2em; /* height of a line*/
z-index:0;
}
a {
clip-path:inset(0); /* clip the pseudo element to the element size */
display:inline-block;
color:#fff;
padding:0 10px;
}
a:before {
content:"";
position:absolute;
z-index:-1;
inset:0;
background:
/* green will get visible if 100% (height) is bigger than 1.2em (one line) */
linear-gradient(green 0 0) 0/100% calc(100% - 1.2em),
red;
}<div class="nav">
<a href="#">Home</a>
<a href="#">Downloads</a>
<a href="#">Contact</a>
<a href="#">FAQ</a>
<a href="#">Disclaimer</a>
</div>html:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<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">
<link href="styleSheet3.css" rel="stylesheet" />
<title>Document</title>
</head>
<body>
<div id="nav">
<a href="#" class="active"> Home</a>
<a href="#">Downloads</a>
<a href="#">Downloads </a>
<a href="#">Contact</a>
<a href="#">FAQ</a>
<a href="#">Disclaimer</a>
</div>
<div id="small_nav">
<div id="header">
<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48" viewBox="0 0 48 48">
<g>
<path id="path1" transform="rotate(0,24,24) translate(9,13.0382820367813) scale(0.9375,0.9375) "
fill="#1C9E51"
d="M1.230957,19.693036L30.768982,19.693036C31.506958,19.693036,32,20.185041,32,20.923019L32,22.154038C32,22.893054,31.506958,23.384999,30.768982,23.384999L1.230957,23.384999C0.49194336,23.384999,0,22.893054,0,22.154038L0,20.923019C0,20.185041,0.49194336,19.693036,1.230957,19.693036z M1.230957,9.8470059L30.768982,9.8470059C31.506958,9.8470059,32,10.339011,32,11.076989L32,12.30801C32,13.045987,31.506958,13.53903,30.768982,13.53903L1.230957,13.53903C0.49194336,13.53903,0,13.047025,0,12.30801L0,11.076989C0,10.339011,0.49194336,9.8470059,1.230957,9.8470059z M1.230957,0L30.768982,0C31.506958,-6.3337211E-08,32,0.49298194,32,1.2309594L32,2.4619804C32,3.1999579,31.506958,3.6930011,30.768982,3.6930013L1.230957,3.6930013C0.49194336,3.6930011,0,3.1999579,0,2.4619804L0,1.2309594C0,0.49298194,0.49194336,-6.3337211E-08,1.230957,0z" />
</g>
</svg>
</div>
<div id="content">
<a href="#">Home</a>
<a href="#">Downloads</a>
<a href="#">Contact</a>
<a href="#">FAQ</a>
<a href="#">Disclaimer</a>
</div>
</body>
</html>
和css：
body
{direction:rtl;
}
#nav {
display: table;
width: 100%
}
#nav span a {
display:block !important;
width:100%;
text-align:center
}
#nav span {
display: block;
text-align: center
}
#small_nav a {
display: block;
text-decoration: none;
}
a
{
background:red;
}
#small_nav #content {
display: none;
}
#small_nav:hover #content{display:block}
#small_nav {
cursor: pointer;
display: none
}
@media screen and (max-width:600px) {
#small_nav {
display: block;
}
#nav {
display: none
}
}
有点长，但我觉得很好，非常成功！