在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。
我们在<head></head>中添加<style></style>来添加css样式,或者<link href="..css" rel="stylesheet">引用外部定义的css样式。那么css3中定义样式的选择器有哪些呢?
定义全局样式*{}
*{
font-size:40px;
color:#9C3;
}
这样,所有元素如果没有指定css样式,就会用上上面定义的样式;
定义全局非元素的样式body{}
body{
font-size:30px;
color:#C03;
}
class样式 .class名称 比如. divStyle{}
.divStyle{
background-color:#9CC;
font-size:20px;
}
引用<div class="divStyle">div样式</div>
id样式 #id名称 比如 #divIdStyle{} 引用<div id="divIdStyle">div样式</div>
id选择器也是可以进行组合其他选择器 比如
#content h1{} 就是id为content下面的所有h1样式
#content .item li a img {
width: 230px;
height: 230px;
border: none;
}
上面的样式定义是id为content下面class是item下面的li元素下面的a元素下面的img样式
id选择器和class选择器区别,id必须是唯一的,class可以是有多个
元素选择器 元素名称{} 比如 p元素样式 p{} a元素样式 a{},那么页面上所有的p和a元素都会应用这个样式
元素选择器也可以和class选择器进行组合使用,比如a.current{} 就是a标签并且class是current的样式
另外div,p{} 所有div和p元素应用同一个样式
div p{} 选择<div> 元素内部的所有 <p> 元素
div>p{}选择父元素为 <div> 元素的所有 <p> 元素
div+p{} 选择紧接在 <div> 元素之后的所有 <p> 元素
属性选择器 [属性名]{} 比如 <h1></h1>标签里面有属性title那么我们可以这样定义样式
[title]{
font-size:16px;
color:#6C0;
}
引用:<h1 title="">这个是H1的样式</h1>
另外还可以[属性名="属性值"]{} 来实现更加精确的匹配比如
[title="h2title"]{
font-size:20px;
color:red;
}
引用<h2 title="h2title">这个是H1的样式</h2>
注意:如果定义了*{},那么会先匹配*{}里面的样式,再匹配其他样式
还有一些其他选择器,比如鼠标指针位于其上的链接的样式选择器:a:hover{}等等
具体大家可以参考w3school上面关于css的说明:http://www.w3school.com.cn/cssref/css_selectors.asp