[Toc]
1. 常用选择器种类-----*{}
- 选择器语法应该写在外部的.css文件中,此处为了方便,将选择器写在了.html文件中,在实际应用中,不允许这样写.
1. 元素选择器:---- 标签名{}
<head>
<style type = 'text/css'>
p{
color:red
}
h1{
color: blue
}
</style>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<p>床前明月光</p>
</body>
2. id选择器---- #id名{}
- id是唯一的,通过元素的id属性值选中唯一的一个元素
<head>
<style type = 'text/css'>
#p1{
color: red;
}
#h3{
color: green;
}
</style>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3 id = 'h3'>三级标题</h3>
<p id = 'p1'>床前明月光</p>
</body>
3.类选择器----- .类名{}
class选中一组元素,元素只有一个元素时,就相当于id
<head>
<style type = 'text/css'>
.h{
color: red;
font-size: 50px
}
.hello{
color: blue;
font-size: 20px
}
.p{
color: green;
}
</style>
</head>
<body>
<h1 class = 'h'>一级标题</h1>
<h2 class = ' h hello '>二级标题</h2>
<h3 class= 'h'>三级标题</h3>
<p class = 'p'>床前明月光</p>
</body>
4.选择器分组/并集选择器----多个选择器用逗号分开{}
- 如果有几个标签的样式是相同的,我们可以选择用并集选择器,这样可以达到代码的重复利用
<head>
<style>
h1,h2,h3{
color: red;
}
</style>
</head>
<body>
<h1 class = 'h'>一级标题</h1>
<h2 class = ' h hello '>二级标题</h2>
<h3 class= 'h'>三级标题</h3>
<p class = 'p'>床前明月光</p>
5.通配选择器---选中所有元素----- *{}
<head>
<style>
*{
color:red;
background-color:green;
}
</style>
</head>
<body>
<hr>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<p>床前明月光</p>
</body>
6.复合选择器(交集选择器)
- 同时满足多个条件时,可以选择交集选择器-----选择器1选择器2选择器N{}
- 对于id选择器来说，不建议使用复合选择器
<head>
<style type = 'text/css'>
span.p1{
background-color:yellow
}
</style>
<head>
<body>
<p class = 'p1'> sjjsjxxsjsjjs</p>
<span class = 'p1'> sjjsjxxsjsjjs</span>
<span id = 's'>水流量上来说</span>
</body>
7.后代元素选择器--- 祖先 后代{}
<head>
<style>
/* div span{
font-size: 20px;
color: red;
} */
#d1 p span{
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<div id="d1">
<span>我是div标签中的span</span>
<p><span>我是div中p标签中的span</span></p>
</div>
<div>
<span>我是body标签中div中的的span</span>
</div>
</body>
8.子元素选择器---父元素>子元素{}
<head>
<style>
/* 选择d1-p-span */
#d1 p > span{
color: red;
}
/* 选择div-span */
#d1 p > span{
color: red;
}
</style>
</head>
<body>
<div id="d1">
<span>我是div标签中的span</span>
<p><span>我是div中p标签中的span</span></p>
</div>
<div>
<span>我是body标签中div中的的span</span>
</div>
</body>
9. 伪类选择器---表示特殊状态
- 如:访问的超链接 普通的超链接 获取焦点的文本框,为这些特殊状态的元素设置样式时,可以使用伪类
- 链接的状态:
- (正常 访问过的 鼠标滑过的 正在点击的)
<head>
<style>
/* 只能设置文字颜色 ie6可以设置背景色 */
/*设置访问过的链接的字体颜色和大小 */
a:visited{
color:red;
}
/* 设置没有访问过的链接的字体颜色 */
a:link{
color :green;
font-size:50px;
}
/* */
/* 适用于其他能用鼠标操作的标签*/
/* 设置鼠标滑过时,链接的颜色 */
a:hover{
color : blue;
}
/* 适用于其他能用鼠标操作的标签 */
/* 设置鼠标点击时链接字体的颜色 */
a:active{
color:black;
}
input:focus{
background-color:yellow;
}
<!-- 对p标签的伪类使用 -->
/* 其他浏览器 */
p::selection{
background-color:red;
}
/* 兼容火狐浏览器 */
P::-moz-selection{
background-color:yellow;
}
</style>
<head>
<body>
<a herf = 'http://www.baid.com' taget = '_blank'>百度</a>
<a herf = 'http://www.baid.com' taget = '_blank'>有道</a>
<a herf = 'http://www.baid.com' taget = '_blank'>三星</a>
<a href="http://www.taobao.com">淘宝</a>
<!--输入框-->
<input type = 'text'>
<p>就是就是近十年男生女生</p>
</body>
10. 伪元素---表示元素中的一些特殊的位置
<head>
<style>
/* 为p中的第一个字符设置一个特殊的样式 */
p:first-letter{
color:red;
}
/* 为p中的第一行字符设置一个特殊的样式 */
p:first-line{
background-color:red
}
/*befor表示表示元素最前边的部分,一般它都需要结合content这个样式一起使用,通过content可以向before或after的位置添加一些内容,这些内容可以显示 但是鼠标无法选中*/
p:before{
content:'最开始'
color:green;
}
p:after{
content:'最末端';
color:green;
}
</style>
</head>
<body>
<p>aaaa</p>
</body>
11. 属性选择器
- 作用：可以根据元素中的属性或属性值来选取指定元素
- 语法：
[属性名] 选取含有指定属性的元素
[属性名="属性值"] 选取含有指定属性值的元素
[属性名^="属性值"] 选取属性值以指定内容开头的元素
[属性名$="属性值"] 选取属性值以指定内容结尾的元素
[属性名*="属性值"] 选取属性值包含指定内容的元素 - title属性，这个属性可以给任何标签指定
- 当鼠标移入到元素上时，元素中的title属性的值将会作为提示文字显示
<head>
<style>
/* 属性为title的 */
p[title]{
background-color:red;
}
/* title=''hello */
p[title='hello']{
background-color:yellow;
}
/* he开头 */
p[title^='he']{
background-color:yellow;
}
/* o结尾 */
p[title$='o']{
background-color:yellow;
}
/* 包含o的 */
p[title*='o']{
background-color:yellow;
}
</style>
</head>
<body>
<!--title 是提示信息-->
<p title = 'name'>aaaa</p>
<p title = 'hello'>aaaa</p>
<p title = 'he2llo'>aaaa</p>
<p title = 'he2wllo'>aaaa</p>
<p title = 'he3wllo'>aaaa</p>
<p>aaaa</p>
</body>
12. 子元素选择器
- 为第一个p标签设置一个背景颜色为黄色
- :first-child 可以选中第一个子元素
- :last-child 可以选中最后一个子元素
- :nth-child()/(3,4,even,odd) 可以选中任意位置的子元素
该选择器后边可以指定一个参数，指定要选中第几个子元素- even 表示偶数位置的子元素
- odd 表示奇数位置的子元素
- :first-child 可以选中第一个子元素
<!--p标签,且位于第一个,不管父元素-->
<head>
<style type = 'text/css'>
/* p的第一个子元素 */
p:first-child{
color:red
}
p:first-of-type{
color:red
}
/* 第一个标签的第一个子元素 */
body>p:first-child{
color:red
}
/* p的最后一个子元素y */
p:last-child{
color: green
}
p:last-of-type{
color:red
}
p:nth-child(3){
color: green
}
<!--偶数行-->
p:nth-child(even){
color: green
}
<!--奇数行-->
p:nth-child(odd){
color: green
}
nth-of-type(3){
color: green
}
nth-of-type(even){
color: green
}
nth-of-type(odd){
color: green
}
</style>
</head>
<body>
<p>aaaa</p>
<p>aaaa</p>
</body>
13.兄弟元素选择器
- 相邻的兄弟元素
- 作用：可以选中一个元素后紧挨着的指定的兄弟元素
- 语法：前一个 + 后一个
- 选中多个兄弟元素
- 选中后边的所有兄弟元素
- 语法：前一个 ~ 后边所有
<head>
<style>
/* span与p紧挨着 */
span + p{
color:p
}
/* span后面的所有p */
span~p{
color:green
}
</style>
</head>
<body>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<span>我是一个span</span>
<div>我是div</div>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
</body>
14. 否定伪类
- 作用：可以从已选中的元素中剔除出某些元素
- 语法：
- :not(选择器)
<head>
<style>
p{
color:p
}
/* 排除class */
p:not(.hello){
color:red;
}
</style>
</head>
<body>
<p>aaaa</p>
<p>aaaa</p>
<p class = 'hello'>aaaa</p>
</body>
15.样式继承
- 祖先元素上的样式，也会被他的后代元素所继承
利用继承，可以将一些基本的样式设置给祖先元素，这样所有的后代元素将会自动继承这些样式 - 父类中,背景、边框、定位相关的样式都不会被继承
<head>
<style>
body{
font-size:30px
}
</style>
</head>
<body>
<p>aaaa</p>
<p style = 'font-size:20px'>aaaa
<span>我是p标签中的span</span>
</p>
<p class = 'hello'>aaaa</p>
</body>
2. 选择器的优先级----权重
* !important 优先级最高 -------**慎用**
p{
color:red !important
}
<p style = 'color:red'>aaaaa</p>
- 内联样式,优先级:1000
- id选择器优先级:100
- 类和伪类优先级:10
- 元素选择器优先级:1
- 通配* 选择器优先级:0
- 继承的样式,没有优先级
- 有多种选择器时,各个选择器优先级相加,再进行比较,选择器优先级计算不会超过他的最大暑数量级
- 同一种选择器,优先级相同,会选择靠后的样式
- 对于并集选择器,优先级单独计算
- 伪类中的各个选择器的优先级一样
1. a的伪类
- link visited hover active 这四个的优先级是一样的
- link visitied 没有先后顺序
- hover active 有先后顺序,调换顺序必定会影响另一个,所以在写a 的伪类时要按照l v h a 的顺序来进行
3. 不推荐内联样式的原因
- 内联样式的优先级最高,在css中设置,不会更改,若想要更改,可以使用!impotant
网友评论