建站网站排行,seo公司网站,江门骏域网站建设,互联网广告投放公司CSS类选择器参考手册
一个元素同时使用多个类选择器
CSS中类选择器用点号表示。实际项目中一个div元素为了能被多个样式表匹配到#xff08;样式复用#xff09;#xff0c;通常div的class中由好几段组成#xff0c;如div classuser login能被.user和…CSS类选择器参考手册
一个元素同时使用多个类选择器
CSS中类选择器用点号表示。实际项目中一个div元素为了能被多个样式表匹配到样式复用通常div的class中由好几段组成如div classuser login能被.user和.login两个选择器选中。如果这两个选择器中有相同的属性值则该属性值先被改为.user中的值再被改为.login中的值即重复的属性以最后一个选择器中的属性值为准。测试如下 style
.user
{font-size: 30px;background-color:red;
}
.login
{background-color:blue;
}
/style
/head
bodydiv classuser你好。这是一个 DIV 元素classuser。/div
div classlogin你好。这是一个 DIV 元素classlogin。/div
div classuser login你好。这是一个 DIV 元素classuser login。/div/body 第三个div元素的背景颜色以.login中的为准效果如下图 CSS类选择器的匹配规则
CSS中多个类选择器之间有没有空格是怎样的匹配规则如.user.login和.user .login中间有空格的区别
直接上例子。电商项目中的导航栏包括用户的登录/注册/注销以及购物车等信息。
Html: div classnavdiv classwdiv classuser-infospan classuser not-loginspan classlink js-login登录/spanspan classlink js-register注册/span/spanspan classuser loginspan classlink-text欢迎span classusername/span/spanspan classlink退出/span/span/div!-- 右侧的导航链接 --ul classnav-listli classnav-itema classlink href./cart.htmli classfa fa-shopping-cart/i购物车(span classcart-cont0/span)/a/lili classnav-itema classlink href./order-list.html我的订单/a/lili classnav-itema classlink href./user-center.html我的MMall/a/lili classnav-itema classlink href./about.html关于MMall/a/li/ul/div
/div CSS: .nav{background: #eee;height: 30px;line-height: 30px;
}/* 用户部分 */
.nav .user{float: left;
}
.nav .user.login{display: none;
}
.nav .user .link{margin-right: 5px;
}/* 导航链接部分 */
.nav .nav-list{float: right;
}
.nav .nav-list .nav-item{display: inline-block;margin-left: 5px;
} 观察上面代码的运行结果可知
.nav .user中间有空格匹配到class含有nav的元素下面的class含有user的元素是span classuser not-login和span classuser login。.user.login中间没有空格匹配到class同时含有user和login的元素是span classuser login。.nav .user.login.nav和.user中间有空格.user和.login中间没有空格匹配到class含有nav的元素下面的class同时含有user和login的元素是span classuser login。
一个更小的例子 !DOCTYPE html
html
head
meta charsetutf-8
title类选择器/title
style
.user.login /* 匹配同时包含user和login的元素 */
{font-size: 35px;
}.user .login{ /* 匹配含user下的含login的元素 */background-color:green;
}/style
/head
bodydiv classuser你好。这是一个 DIV 元素classuser。div classlogin你好。这是一个 DIV 元素classuser login。/div
/div
div classlogin你好。这是一个 DIV 元素classlogin。/div
div classuser login你好。这是一个 DIV 元素classuser login。/div/body
/html
