例如:
p{color: red;}
类选择器:使用标签的class属性值当作选择器,就是类选择器。所有属于该类名的标签都被选中。
(1)为标签定义class属性,使得标签有了类名。
(2)类选择器的写法: .类名{}
例如:
<style type="text/css">
p{color: red;}
div{
color: pink;
}
.s1{
color: purple;
}
</style>
</head>
<body>
<p style="">hello</p><p>world</p>
<div>这是一个层</div>
<span class="s1">这是span标签</span>
<h1 class="s1">这是h1</h1>
</body>
说明:其中,h1标签和span标签都属于s1这个类,所以他们的样式相同。
ID选择器 使用标签的id属性值当作选择器,就是id选择器。只有当前id值的元素被选中。
(1)为标签定义id属性,一般标签的id属性是唯一的
(2)id选择器的写法: #id属性值{}
例如:
<style type="text/css">
#p1{
background-color: yellow;
}
</style>
</head>
<body>
<p id="p1">hello</p><p>world</p>
</body>
标签选择器、类选择器、id选择器的优先级
id选择器的优先级>类选择器>标签选择器
例如:
<style type="text/css">
p{
background-color: red;
}
.blue{
background-color: blue;
}
#p1{
background-color: yellow;
}
</style>
</head>
<body>
<p class="blue" id="p1">hello</p><p>world</p>
<div class="blue">hello world</div>
</body>
群组选择器:将多个具有相同样式的选择器构成一个组。组中的每个选择器可以是学过的任意一种选择器,如标签选择器、id选择器、类选择器,可以是它们中两个或更多个选择器的组合。各个选择器之间使用“,”分隔。
<style type="text/css">
p,div{
color: red;
}
</style>
</head>
<body>
<p>hello</p><p>world</p>
<div>hello world</div>
</body>
<style type="text/css">
#p1,div{
color: red;
}
</style>
</head>
<body>
<p id="p1">hello</p><p>world</p>
<div>hello world</div>
</body>
、属性选择器,利用标签的某些属性作为选择器。
属性选择器分类
l 标签名[属性名]: 属于该标签,并且定义了中括号中指定的属性的页面元素,才被选中。只要该标签定义了这个属性就可以,和属性具体的值无关。
<style type="text/css">
p[id]{
color: red;
}
</style>
</head>
<body>
<p id="p1">hello</p><p>world</p>
<div id="d1">hello world</div>
</body>
说明:p[id] 选择那些定义了id属性的p标签
l E[attr][attr]: 可以根据多个属性进行选择,只能选中那些同时包含所列属性的元素。 只需将属性选择器链接在一起即可。
<style type="text/css">
p[id][class]{
color: red;
}
</style>
</head>
<body>
<p id="p1">hello</p><p id="p2" class="red">world</p>
<div id="d1">hello world</div>
</body>
说明:
p[id][class] 同时定义了id和class属性的p标签
l 标签名[属性名="属性值"]:E[attr]只是选择了有对应的属性, 并没有明确指其对应的属性值"value", 而E[attr="value"]:是指定了属性值“value”, 从而缩小了选择 围, 更能精确选择自己需要的元素。
“=”:此处要求属性名必须完全与属性值相等。
<style type="text/css">
p[id="p1"]{
color: red;
}
</style>
</head>
<body>
<p id="p1">hello</p><p id="p2" class="red">world</p>
<div id="d1">hello world</div>
</body>
p[class="red"]{
color: red;
}
因此:id选择器和类选择器是一种特殊的属性选择器。
l E[attr~="value"]:与E[attr="value"]不同的是, 他们两者区别就是一个有“~”号, 一个没有“~”号, E[attr="value"]是属性值需要完全匹配才会被选中, 而E[attr~="value"]则是属性值中只要有一个值匹配就可选中。
“~=”:此处要求属性名与指定的部分属性值相等即可。
补充:一个标签可以同时属于多个类,如下面的p标签同时属于两个类,red类和c1类
<p id="p2" class="red c1">world</p>
如果每个类都有自己的样式,那么使用类选择器选中该标签的时候,所有的样式都生效
.red{
color: red;
}
.c1{
font-size: 30px;
}
例1:两个类都生效
<style type="text/css">
.red{
color: red;
}
.c1{
font-size: 30px;
}
</style>
</head>
<body>
<p id="p1">hello</p><p id="p2" class="red c1">world</p>
<div id="d1">hello world</div>
</body>
例2:全等的比较。
<style type="text/css">
p[class="c1"]{
color: red;
}
</style>
</head>
<body>
<p id="p1">hello</p><p id="p2" class="red c1">world</p>
<div id="d1">hello world</div>
</body>
说明:没有元素被选中。
例3:不完全匹配的。
<style type="text/css">
p[class~="c1"]{
color: red;
}
</style>
</head>
<body>
<p id="p1">hello</p><p id="p2" class="red c1">world</p>
<div id="d1">hello world</div>
</body>
说明:第2个p标签可以被选中。
身)的状态指定样式,它会根据某种条件而非文档结构应用样式。
伪类选择器
HTML标记伪类名{属性名 :属性值;属性名 :属性值;......}
常用的伪类如下表所示:
伪类名 描述
:link 鼠标没放上之前,并且超链接从来没有被访问过的状态。
:visited 访问过的超链接的状态
:focus 用于元素成为焦点的时候,常用于表单元素
:hover 用于鼠标在元素上,而尚未触发或点击它的时候,例如,鼠标指针可能停留在一个超链接上, :hover 就会指示这个超链接
:active 按住鼠标左键不松开的样式, 这个状态特殊短暂
第1次鼠标点击超链接时,超链接所处的状态的变化顺序
1、:link 4、:visited 2、:hover 3、:active
第2次及以后鼠标点击超链接时,超链接所处的状态的变化顺序
3、:visited 1、:hover 2、:active
伪类使用的几点说明:
1. <a>标记上伪类的顺序应为LVHA( :link :visited :hover :active)在CSS定义中, a:hover 必须被置于 a:link 和 a:visited 之后, 才是有效的。在 CSS 定义中, a:active 必须被置于 a:hover 之后, 才是有效的。
2. 伪类的名称不区分大小写.
3. :hover :active等伪元素不限于<a>标记,也可以应用在其他元素上
4. IE6只允许 :hover伪类应用到<a> 标记上 ,只有IE8接受 :active状态。
例如:
<style type="text/css">
a:link{color:red;}
a:visited{color: green;}
a:hover{color: yellow;}
a:active{color: blue;}
</style>
</head>
<body>
<a href="http://www.google.com">goole</a>
</body>
例如:
<style type="text/css">
li{
border:2px red solid;
}
li:hover{
border-color: black;
}
</style>
</head>
<body>
<ul>
<li><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
</ul>
伪元素选择器
常用的伪元素如下表所示:
伪元素名 描述
:first-letter 向文本的第一个字母添加特殊样式,与块级元素关联
例如:
<style type="text/css">
p:first-letter{
font-size: 25px;
font-weight: bold;
color: red;
}
</style>
</head>
<body>
<p>hello world</p>
</body>
例如:
:first-line 向文本的首行添加特殊样式
<style type="text/css">
p:first-line{
font-size: 25px;
font-weight: bold;
color: red;
}
</style>
</head>
<body>
<p>hello world<br>hello world</p>
</body>
例如:
:before 在元素之前添加内容,默认地,这个伪元素是行内元素
<style type="text/css">
p:before{
content: "###";
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<p>hello world<br>hello world</p>
</body>
例如:
:after 在元素之后添加内容
<style type="text/css">
p:after{
content: "###";
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<p>hello world<br>hello world</p>
</body>
例如:
input:focus{
background-color: yellow;
}
</style>
</head>
<body>
<input type="button" value="保存">
交集选择器
交集选择器由两个选择器组成,其结果是选中二者各自元素范围的交集。
两个选择器之间不能有空格,必须连续书写。
例如:
<style type="text/css">
p.d{color: red;}
</style>
</head>
<body>
<div class="d"><p>div中的段落</p></div>
<p class="d">不在div中的段落</p>
</body>
等价于:
p[class="d"]{color: red;}
归纳:
选择器:
标签选择器 类选择器 id选择器 群组选择器 派生选择器(后代选择器 子元素选择器 相邻兄弟选择器) 属性选择器(标签[属性] 标签[属性][属性][属性] 标签[属性=属性值] 标签[属性~=属性值]) 伪类选择器(:link :visited :hover :active :focus) 伪元素选择器(:first-letter :first-line :before :after) 交集选择器(标签名.类名 标签名#id)
属性: