此页面上有一个包含不同链接的网页。我的目标是找到包含以下内容的链接：/dir/flowers/并拥有类：flower big
并以不同的方式设置它们（即将这些链接设为红色）。
以下是应匹配的示例链接：
<a class="flower big" href="http://example.net/dir/flowers/spring.php">Spring</a>
<a class="flower big" href="http://example.net/dir/flowers/winter.php">Winter</a>
<a class="flower big" href="http://example.net/dir/flowers/fall.php">Fall</a>
等
因此，如果链接包含：/dir/flowers/{*} 且具有类"flower big"，那么它应该匹配。
我尝试了类似下面的内容，但它不起作用：
(a[class="flower big"] AND a[href~="/dir/flowers/"] ) {color:red}
答案 0 :(得分：5)
您可以使用2 CSS attribute selectors
[class^="flower big"]的 ^会查找属性名称为class的任何元素，其第一个值的前缀为＆＃34; flower big＆＃34;。
[href*="/dir/flowers/"] *将查找属性名称为href的任何a，其值至少包含一次字符串＆＃34; / dir /花＆＃34; as substring。
a {
display: block
}
[class^="flower big"][href*="/dir/flowers/"] {
color: red;
}<a class="flower big" href="http://example.net/dir/flowers/spring.php">Will be red because has both classes in order and /dir/flowers/</a>
<a class="flower big" href="http://example.net/dir/flowers/winter.php">Will be red because has both classes in order and /dir/flowers/</a>
<a class="flower big" href="http://example.net/dir/flowers/fall.php">Will be red because has both classes in order and /dir/flowers/</a>
<a class="plant big" href="http://example.net/dir/flowers/spring.php">Won't be red because hasn't classes in order even having the /dir/flowers/</a>
<a class="flower big" href="http://example.net/dir/foobar/fall.php">Won't be red because hasn't the /dir/flowers/ even having the correct classes</a>
<强>更新
如果您希望在a内有更多课程或更改这两个课程的顺序，那么您需要以不同方式选择CSS中的a，例如.flower.big或.big.flower会这样做。
a {
display: block
}
.big.flower[href*="/dir/flowers/"] {
color: red;
}<a class="flower big foobar" href="http://example.net/dir/flowers/spring.php">Will be red because has both classes in link and /dir/flowers/</a>
<a class="big flower" href="http://example.net/dir/flowers/winter.php">Will be red because has both classes in link and /dir/flowers/</a>
<a class="foo bar classes big flower" href="http://example.net/dir/flowers/fall.php">Will be red because has both classes in link and /dir/flowers/</a>
<a class="plant big" href="http://example.net/dir/flowers/spring.php">Won't be red because hasn't classes in link even having the /dir/flowers/</a>
<a class="flower big" href="http://example.net/dir/foobar/fall.php">Won't be red because hasn't the /dir/flowers/ even having the correct classes</a>
答案 1 :(得分：2)
试试这个：
/*===== SLIDE MENU ======*/
/*---------- HIDE SELECT CHECKBOX ----------*/
.toggle,
.full-screen-close
{
display: none;
}
.full-screen-close
{
width: 100%;
height: 100%;
position: absolute;
cursor: pointer;
top:0;
left:0;
}
/*---------- TOGGLE OFF-CANVAS MENU ----------*/
.toggle:checked + .container > .menu-container
{
margin-left: 70%;
}
.toggle:checked + .container > .content .full-screen-close
{
display: block;
background: rgba(0,0,0,.5);
}
.menu
{
padding-top: 24px;
}
.toggle-btn,
.close-btn
{
cursor: pointer;
}
.toggle-btn
{
font-size: 2.25rem;
}
.close-btn
{
float: right;
font-size: 1.5rem;
padding: 1.5rem;
color: #ededed;
}
.menu-container,
.content
{
transition: margin 0.5s ease-in-out;
}
.menu-container
{
background: #2c3e50;
width: 40%;
margin-left: 100%;
float: right;
height: 100%;
position: absolute;
z-index:99;
}
.slide-menu i
{
margin-right: 1rem;
font-size: 1.5rem;
vertical-align: middle;
}
.slide-menu li a
{
color: #fff;
padding: 1.5rem;
font-size: 1.125rem;
text-transform: uppercase;
font-weight: 600;
display: block;
transition: background-color .5s ease-in-out;
}
.slide-menu li a:hover
{
background-color: #34495e;
}
/*===== MEDIA QUERIES ======*/
@media (max-width: 460px) {
.slide-menu li a
{
font-size: 0.875rem;
padding-left: 12px;
}
.slide-menu li i
{
font-size: 16px;
}
}
@media (max-width: 320px){
.slide-menu li i
{
display: none;
}
}<html lang="en">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Off-canvas navigation menu Tutorial" />
<meta name="keywords" content="slide-menu, sidebar, off-canvas, menu, navigation" />
<meta name="author" content="AcasA Programming" />
<link rel="icon" href="../../favicon.ico" />
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/right-slide.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<body>
<input type="checkbox" id="offcanvas-menu" class="toggle" />
<div class="container">
<aside class="menu-container">
<div class="menu-heading clearfix">
<label for="offcanvas-menu" class="close-btn">
<i class="fa fa-times"></i>
</label>
</div><!--end menu-heading-->
<nav class="slide-menu">
<ul>
<li><a href="#"><i class="fa fa-home"></i>Testing 1</a></li>
<li><a href="#"><i class="fa fa-star"></i>Testing 2</a></li>
<li><a href="#"><i class="fa fa-folder-open"></i>Testing 3</a></li>
<li><a href="#"><i class="fa fa-cogs"></i>Testing 4</a></li>
<li><a href="#"><i class="fa fa-star"></i>Testing 5</a></li>
<li><a href="#"><i class="fa fa-folder-open"></i>Testing 6</a></li>
<li><a href="#"><i class="fa fa-cogs"></i>Testing 7</a></li>
</ul>
</nav><!--end slide-menu -->
</aside><!--end menu-container-->
<section class="content">
<label for="offcanvas-menu" class="full-screen-close"></label>
<div class="menu right">
<label for="offcanvas-menu" class="toggle-btn">
<i class="fa fa-bars"></i>
</label>
</div><!--end menu-->
<div class="menu-options clearfix">
<div class="right">
</div>
</div>
<div class="content-body">
</div><!--end content body-->
</section><!--end content-->
</div> <!--end container -->
</body>
</html>
.flower.big[href*="dir/flowers"]{
color:red;
}表示＆＃34;在属性值（ href ）中的任意位置匹配以下值（在本例中为 dir / flowers ）这种情况）＆＃34;