目 
录
CSS 选择器是用于“查找”（或选取）要设置样式的 HTML 元素的。
1.类选择器 （class选择器）
class选择器就是在HTML标签上设置属性class，再自己命名一个属性值。然后在css代码中去选中这个属性并且设置样式。在css代码中的格式是 .属性值{ 设置样式代码 } 。注意：class 选择器前面的小数点不能忘记哦！并且 一个标签是可以设置多个类名 的哦，可以方便单独设置样式！class属性值一样的话，那就归为一类，也就是选中这一类的设置样式。
<style type="text/css">
.one{
color: #FF0000;
}
.tow{
font-size: 50px;
}
.three{
font-size: 100px;
}
</style>
</head>
<body>
<h1 class="one">1111111111111111</h1>
<span class="tow">2222222222222222</span>
<h3 class="tow">3333333333333333</h3>
<span class="tow three">4444444444444444</span>
</body>
2.id选择器
id选择器就是在HTML标签上设置属性id，再自己命名一个属性值。然后在css代码中去选中这个属性并且设置样式。在css代码中的格式是 #属性值{ 设置样式代码 } 。注意：id 选择器前面的# 不能忘记哦！并且一个标签是只能设置一个，id一次也只能选择一个， id是唯一的！
<style type="text/css">
#d1{
color: #FF0000;
height: 200px;
width: 200px;
background-color: #7FFFD4;
}
#d2{
color: yellow;
height: 300px;
width: 300px;
background-color: gold;
}
</style>
</head>
<body>
<!-- 每个标签的 id属性值是唯一的，不要相同 -->
<div id="d1">
11111111111
</div>
<div id="d2">
22222222222
</div>
</body>
3.标签名选择器
标签名选择器不需要在HTML标签上设置属性什么的，直接在css代码中去选中标签名就可以了。在css代码中的格式是 标签名{ 设置样式代码 } 。注意：标签选择器一但选中一类标签，那么HTML中的所有这个标签都会被选中。
<style type="text/css">
h1{
background: yellow;
}
button{
background-color:red ;
}
div{
color: aqua;
}
</style>
</head>
<body>
<h1>1111111111111111111</h1>
<h1>2222222222222222222</h1>
<div id="">
33333333333333333333333
</div>
<button type="button">按钮</button>
</body>
4.包含选择器
包含选择器就是综合使用id，class选择器以及标签选择器，来选中某些标签包含内部的标签。格式是一层一层的递进选中。
<style type="text/css">
#d1 ul li a{
color: #00FFFF;
}
#d2 ul li a{
color: red;
}
</style>
</head>
<body>
<div id="d1">
<ul>
<li><a href="#">11111</a></li>
<li><a href="#">2222</a></li>
<li><a href="#">33333</a></li>
<li><a href="#">44444</a></li>
<li><a href="#">55555</a></li>
</ul>
</div>
<div id="d2">
<ul>
<li><a href="#">11111</a></li>
<li><a href="#">2222</a></li>
<li><a href="#">33333</a></li>
<li><a href="#">44444</a></li>
<li><a href="#">55555</a></li>
</ul>
</div>
<a href="#">一个连接</a>
</body>
5. 并列选择器
并列选择器就是综合使用id，class选择器以及标签选择器，来选中某些需要设计成相同样式的标签。格式是 选中之后拿逗号隔开。
<style type="text/css">
h1,#myh,h5{
color: red;
font-size: 50px;
}
</style>
</head>
<body>
<h1>222222222222222</h1>
<h3 id="myh">3333333333333333333333333333</h3>
<h5>5555555555555555555555555555</h5>
</body>
6.通配符选择器
通配选择器就是选中某个范围内的标签都是这样的样式！如通配全局的背景，格式是 *{ 设置样式代码 }。
<style type="text/css">
/*全局通配*/
* {
background-color: #00FFFF;
}
/* 局部通配 */
div ul *{
background-color: green;
}
div ol *{
background-color: yellow;
}
</style>
</head>
<body>
<div id="">
<ul>
<li>111111111111111111</li>
<li>111111111111111111</li>
<li>111111111111111111</li>
<li>111111111111111111</li>
</ul>
<ol>
<li>2222222222222222222222</li>
<li>22222222222222222</li>
<li>222222222222222222222</li>
</ol>
</div>
</body>
7.伪类选择器
针对a标签的四种状态，提供了四种伪类选择器，并且这样操作可以去掉a标签默认的下划线哦。 ●未连接 a:link ●已经访问链接 a:visited ●进入链接 a:hover ●激活（按下）状态 a:active（其中的hover 和active 可以用于其他控件）。
<style type="text/css">
/* 链接状态 */
a:link{
color: #FF0000;
/* 可以去掉a标签默认的下划线 */
text-decoration: none;
}
/* 鼠标悬浮 */
a:hover{
color: #00FFFF;
text-decoration: none;
font-size: 20px;
}
/* 鼠标按下 */
a:active{
color: #FFD700;
text-decoration: none;
}
/* 链接访问过后 */
a:visited{
color: skyblue;
text-decoration: none;
}
</style>
</head>
<body>
<a href="#">连接状态</a>
<a href="#">鼠标移上状态</a>
<a href="#">鼠标按下状态</a>
<a href="index.html">连接访问过后的状态</a>
</body>8.选择器的优先级
在页面中同一个html元素有不同的选择器定义样式的。这样就存在了谁先谁后。具体的优先级如下：
!important>内联样式 > id 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
9.子选择器
意思是父级标签里面所有的子标签都被会选中，但是需要注意的是对孙子标签是不起作用的。也就是子标签下面的孙子标签没有被选中。格式是 选中父标签>子标签{ 设置样式代码 }。
<style type="text/css">
#fu {
color: #0000FF;
}
/* 子选择器 */
#fu>div {
color: yellow;
}
#fu>ul {
color: #008000;
}
#fu>* {
background-color: #FF0000;
}
ol>li {
color: #0000FF;
}
ol>li>ul {
color: red;
}
</style>
</head>
<body>
<div id="fu">
发发发发发发发发发
<div id="zi">
哈哈哈哈哈哈哈哈
</div>
<ul>
<li>我爱java</li>
<li>我爱java</li>
<li>我爱java</li>
<li>我爱java</li>
</ul>
</div>
<ol>
<li>
<ul>
<li>我爱java</li>
<li>我爱java</li>
<li>我爱java</li>
</ul>
</li>
<li>我爱java</li>
<li>我爱java</li>
<li>我爱java</li>
</ol>
</body>
10.相邻选择器
相邻选择器格式是 标签名（选择器选中）+标签名（选择器选中）{ 设置样式代码 }。 以div+p{ 设置样式代码 }为例，意思就是选择跟我 div 同级的下一个挨着的p元素(单个的p 后面、再跟p是选不中的) 如果在div 和p 之间隔着一个元素 那也是选不中的。
<style type="text/css">
#d1 {
height: 200px;
width: 200px;
background-color: green;
}
#d1+div {
height: 200px;
width: 200px;
background-color: yellow;
}
#d1+#d2+div {
height: 200px;
width: 200px;
background-color: gold;
}
#d1:hover+div {
background-color: grey;
}
</style>
</head>
<body>
<div id="d1">
111111111111111
</div>
<div id="d2">
22222222222222
</div>
<div id="d3">
333333333333333333
</div>
11.相邻所有选择器
相邻所有选择器格式是 标签名（选择器选中）~标签名（选择器选中）{ 设置样式代码 }。 以div~p{ 设置样式代码 }为例，意思是 选中 div 后面所有同级的p元素 即使多个p 元素 之间有隔着的其他元素 也是能选中p元素。与上面的相邻选择器用法相似。
12.属性选择器
属性选择器就是只要标签中有这个属性，那么就都会被选中。格式是 标签名[属性]{ 设置样式代码 }。 我们以a[title] { 设置样式代码 }来说明以下的几类：
- a[title=num1] 意思是选中 属性title=num1 的a 标签
- a[title^=num] 选中title的属性值以num 开头的a标签
- a[title$=num]选中title的属性值以num 结尾的a标签
- a[title|=num] 选中title的属性值以num-连接的a标签 如<a title=“num-ai”>
- a[title~=num] 选中title的多个属性值以 空格隔开的 有其中一个属性值都能选中 例如<a tilte=“num num2 num3”> 三个属性值你任意选一个都能选中 比如a[title~=num2] 和 a[title~=num3] 选中的其实是同一个标签。
- a[title*=num] 选中title属性值 包含num的都能选中 例如<a title=“mynumaaaa”>
- a[title=num][name=lisi] 多个属性选择 意思 是选中 title=num 并且 name=lisi 的这个a标签 <a title=“num” name=“lisi”>
<style type="text/css">
[align] {
background: red;
}
h1[align] {
color: aqua;
}
h1[align='left'] {
font-size: 2px;
}
input[type^='te']{
border: 1px #FF0000 solid;
}
</style>
</head>
<body>
<h1 align="center">标题</h1>
<h2 align="left">8888888888</h2>
<input type="text" id="" value="哈哈哈哈哈哈哈哈" />
</body>
(小编也在努力学习更多哟!以后再慢慢分享的啦!)
希望对友友们有所帮助!!!!
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
