选择器
所谓的选择器,指的是选择器施加样式目标的方式。
1 元素选择器
用标签名作为选择器,选中所有相应的元素。
<style type="text/css">
div{
font-size:30px;
color:#3695ff;
}
p{
font-size:50px;
color:#a1ff54;
}
</style>
<body>
<div>元素选择器</div>
<p>元素选择器1</p>
<p>元素选择器2</p>
</body>
2 id选择器
顾名思义就是根据id来选择元素,只能被引用一次。
形式为:#idname{...}
<style type="text/css">
#div1{
width:200px;
height:200px;
background-color:#a1ff54;
}
#div2{
width:200px;
height:200px;
background-color:#ff1919;
}
</style>
<body>
<div class="div1"></div>
<div class="dov2"></div>
</body>
3 类选择器
根据class属性来选择元素,可以被引用多次。
形式为:.classname{...}
<style type="text/css">
.odd{
width:200px;
height:200px;
background-color:#a1ff54;
}
.even{
width:200px;
height:200px;
background-color:#ff1919;
}
</style>
<body>
<div class="odd"></div>
<div class="even"></div>
<div class="odd"></div>
</body>
从结果可以看出类选择器定义的样式会施加到所有class=""中。
4 属性选择器
根据某个属性的特性(比如有无、值得等)来选择。
(1)根据有无某属性来选择
<style type="text/css">
[title]{
width: 100px;
height: 50px;
background-color: #3695ff;
border: 1px solid;
}
</style>
<body>
<div title="div1">1</div>
<div title="div2">2</div>
<div>3</div>
<div title="adiv">4</div>
<div title="diva">5</div>
</body>
从结果可以看出。所具有title属性的元素都应用了该样式。
(2)根据属性的值来选择
<styletype="text/css">
[title="div2"]{
width:100px;
height:50px;
background-color:#3695ff;
border:1px solid;
}
</style>
</head>
<body>
<div title="div1">1</div>
<div title="div2">2</div>
<div>3</div>
<div title="a div"></div>
<div title=" div a"></div>
</body>
~
[title~="div"]
选中属性值包含指定完整单词的元素,只有
<div title="adiv">4</div>
<divtitle="div a">5</div>才能引用该样式
^
[title^="div"]
结果会选中以div开头的1,2,5
<div title="div1">1</div>
<div title="div2">2</div>
<div title="div a">5</div>
$
[title$="div"]
结果会选择不是以div开头的
<div title="a div">4</div>
*
[title*="div"]
包含div的
<div title="div1">1</div>
<div title="div2">2</div>
<div>3</div>
<div title="a div">4</div>
<div title="div b">5</div>
5 结构选择器(关系选择器)
(1)后代选择器,可以选择一个元素的后代元素,只要是包括在里面的用一个标签,都有效。
写法:.父标签 子标签。就是在父标签里找到所有子标签。
<style type="text/css">
.content a{
font-size:30px;
}
</style>
<h1>高温橙色预警</h1>
<div class="content">
<p><a href="http://www.baidu.com/">中央气象台</a>2013年8月11日18时继续发布高温橙色预警,这是自2007年开始有高温预警机制后,中央气象台首次连续18天发布高温最高级别预警信号。</p>
<a href="http://www.baidu.com/">前往现场</a>
</div>
<a href="http://www.baidu.com/">查看原文</a>
(2)子元素选择器。找到父元素的下一级,可以有很多的下一级标签,但是要是平级关系。
写法:. 父标签 > 子标签
<style type="text/css">
.content>a{
font-size:30px;
}
</style>
<h1>高温橙色预警</h1>
<div class="content">
<p><a href="http://www.baidu.com/">中央气象台</a>2013年8月11日18时继续发布高温橙色预警,这是自2007年开始有高温预警机制后,中央气象台首次连续18天发布高温最高级别预警信号。</p>
<a href="http://www.baidu.com/">前往现场</a>
</div>
<a href="http://www.baidu.com/">查看原文</a>
6并选择器(组合选择器)
将相同的样式一起,类名用逗号隔开
写法:.classname,.classname{}
<style type="text/css">
.div1,.div2{
position: relative;
width: 100px;
height: 100px;
}
.div1{
border: 1px solid yellow;
}
.div2{
border: 1px solid red;
}
</style>
7通配符选择器 *
可以选中页面中所有的标签。对页面上所有的元素进行初始化。用的不是太多。
写法:*{}
清空浏览器自带的样式边框。例如:清空边距
<style type="text/css">
*{
padding:0;
margin:0px;
}
</style>
8弟弟选择器
(1)选择一个弟弟(就是同级别的),只选择离他最近的一个,只会往下找,不会往上找。
写法:.classname + 标签
<style type="text/css">
.goto +a{
text-decoration:none;
font-size:30px;
}
</style>
(2)选择下面所有的弟弟
写法:.classname ~ 标签
<style type="text/css">
.goto ~a{
text-decoration:none;
font-size:30px;
}
</style>