所谓选择器,指的是选择施加样式目标的方式。
1.元素选择器
用标签名作为选择器,选中所有相应的元素
例:
<styletype="text/css">
div{
font-size: 24px;
color: red;
}
p{
font-size: 30px;
color:blue;
}
</style>
</head>
<body>
<div>元素选择器</div>
<p>元素选择器1</p>
<p>元素选择器2</p>
</body>
2.id选择器
id选择器就是根据id来选择元素。其样式定义形式为:
#id{}
例:
<styletype="text/css">
#div1{
width: 200px;
height: 200px;
background-color: red;
}
#div2{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<divid="div1"></div>
<divid="div2"></div>
</body>
3.类选择器
根据class属性来选择元素,其定义形式为:
.className{......}
例:
<styletype="text/css">
.even{
width: 200px;
height: 200px;
background-color: red;
}
.odd{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<divclass="odd"></div>
<divclass="even"></div>
<divclass="odd"></div>
</body>
4.属性选择器
根据某个属性的特性(比如有无、值)来选择
根据有无某属性来选择:
例:
<styletype="text/css">
[title]{
width: 100px;
height: 50px;
background-color: red;
border: 1px solid green;
}
</style>
</head>
<body>
<div title="div1">1</div>
<div title="div2">2</div>
<div>3</div>
<div title="a div">4</div>
<div title="div a">5</div>
</body>
从结果可以看出,所有具有title属性的元素都应用了红色背景的样式。
根据属性的值来选择
例:
<styletype="text/css">
[title = 'div2']{
width: 100px;
height: 50px;
background-color: red;
border: 1px solid green;
}
</style>
</head>
<body>
<div title="div1">1</div>
<div title="div2">2</div>
<div>3</div>
<div title="a div">4</div>
<div title="div a">5</div>
</body>
title ^=’div’:选中title属性值以“div”开头的元素。
title $=’div’:选中title属性值以“div”结尾的元素。
title *=’div’:选中title属性值包含“div”的元素。
5.后代选择器
后代选择器:可以选择一个元素的后代元素,这个后代元素包括儿子、孙子、儿子的孙子、孙子的儿子……
例:<style type="text/css">
.div1 a{
font-size: 28px;
}
</style>
<body>
<h1>dkajfpsd</h1>
<div class="div1">
预计多福多寿大家哦啊回复啥都发说的那个<ahref="E102-03-02.html">25℃</a>asfg
</div>
</body>
6.子元素选择器
子元素选择器:通过某一个元素选中的直接后代(子元素)。
写法:E > F7.并选择器
并选择器:将相同的样式放在一起,类名直接用英文逗号分割
例:
.div1,.div2{
width: 100px;
height: 100px;
position: relative;
}
通配符选择器可以选中页面所有的标签。(通常用来去除默认布局)
例:<styletype="text/css">
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<h1>dkajfpsd</h1>
<div class="div1">
<p> 预计多福多寿大家哦啊回复啥都发说的那个<a href="E102-03-02.html">25℃</a>asfg</p>
<ahref="http://www.baidu.com">啪啪啪啪</a>
</div>
</body>
例:
.go + a{
font-size: 50px;
}
<body>
<h1>大幅度神功风分公司唉是怪放到</h1>
<div class="div1">
<!--<p> 预计多福多寿大家哦啊回复啥都发说的那个<a href="E102-03-02.html">25℃</a>asfg</p>-->
<a class="go"href="http://www.baidu.com">哈哈哈哈</a>
<ahref="http://www.baidu.com">哈哈哈哈2</a>
<ahref="http://www.baidu.com">哈哈哈哈3</a>
</div>
</body>
10.伪类、伪元素选择器
伪类选择器:根据元素不同的状态,自动选择不同的样式。
1.伪类选择器:
(1)根据不同的状态,自动选择不同的样式。
(2)直接添加一个class,给这个class设定特殊的样式。
li:first-child{}
a:hover{}(鼠标悬停的时候添加样式)
a:active{}(鼠标点击时添加样式)
a:link:{}(链接地址未被访问时候添加的状态。必须设置href属性)
a:visited{}(链接地址点击之后添加的颜色。必须设置href属性)
input:focus{}(拥有键盘输入获取焦点时候添加的样)
2.伪元素选择器:
(1)需要设置特殊效果的内容放到一个元素(标签)里面span
(2)在添加一个class,对class设置特殊样式。
p:first-letter{}
p:first-line{}
p:before{}
p:after{}可以增加任意元素,位置末端。