【JavaWeb】CSS_css中的选择器

最新推荐文章于 2024-05-05 02:04:52 发布

Enjoy96

最新推荐文章于 2024-05-05 02:04:52 发布

阅读量496

点赞数

分类专栏： JavaWeb 文章标签： css

本文链接：https://blog.csdn.net/Enjoy96/article/details/79048785

版权

JavaWeb 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

一、标签选择器

1.选择器概述：在style 标签体中使用来设置样式

2.使用方法：选中所有同名的标签，来使用标签选择器

3.格式：

/*css标签选择器*/
需要设置的标签名称{

属性：属性值；
font-size:24px;
color:#F00;
}

二、类选择器

1.方法：给标签设置class 属性例如：<div class="c"></div>

2.类选择器的语法：.class属性名称{样式}

3.书写结构：

/*css类选择器*/

.class属性名称{

属性：属性值；
font-size:24px;
color:#F00;
}

4.特点：在同一个html页面中，多个html标签可以指定多个同名的class 属性

三、id选择器

1.使用方法：给标签体中设置id 属性例如：<div id="dl"></div>

2.使用语法：在样式中 ——> #id属性值{书写样式}例如：#dl { 书写样式}

3.书写结构：

/*css id选择器*/

#id属性名称{

属性：属性值；
font-size:24px;
color:#F00;
}

4.特点：在同一个html页面中不要去给多个标签指定同名的id属性，防止Javascript中的一个方法“ document.getElementById(“id属性值”) ” ——>获取标签对象，可能获取不到

注：选择器优先级：id 选择器 > 类选择器 > 标签选择器

四、并集选择器

1.标签格式：

/*css 并集选择器*/

.class名称，#id属性名称{

属性：属性值；
font-size:24px;
color:#F00;
}

注：选中的class和id 的标签都会变化

例：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS选择器</title>
<style type="text/css">
	
	/*并集选择器*/
	
	.c1,#dl{
		font-size:24px;
		color:#F00;	
	}
		
</style>
</head>

<body>
<div class="c1">div1的内容</div>
<div id="dl">div2的内容</div>
<div>div3的内容</div>
<div>div4的内容</div>
<span>span的内容</span>
</body>
</html>

效果：

五、交集选择器

1.方式：选中的为一个标签中的子标签

2.标签格式：

/*css 交集选择器*/

标签1 标签1中的子标签{

属性：属性值；
font-size:24px;
color:#F00;
}

注：后面的必须为前面标签的子标签

3.例：选中的就为div 中的子标签span

div span{

font-size:36px;

color:#0F0;

}

例：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS选择器</title>
<style type="text/css">
	
	/*交集选择器*/
	
	div span{
		font-size:36px;
		color:#0F0;	
	}

		
</style>
</head>

<body>
<div class="c1">div1的内容 <span>span的内容</span> </div>
<div id="dl">div2的内容</div>
<div>div3的内容</div>
<div>div4的内容</div>
<span>span的内容</span>
</body>
</html>

效果：

六、通用选择器

1.方式：“*” 通配符，代表所有的标签（给整体设置）

2.书写格式：

样式

}

练习：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS选择器</title>
<style type="text/css">
	/*css标签选择器*/
	/*
	div{
		font-size:24px;
		color:#F00;	
	}
	*/
	
	/*类选择器*/
	/*
	.c1{
		font-size:36px;
		color:#0F0;	
	}
	*/
	
	/*id选择器*/
	/*
	#dl{
		font-size:24px;
		color:#00F;		
	}
	*/
	
	
	/*通用选择器*/
	*{
		font-size:36px;
		color:#CCC ;	
	}
</style>
</head>

<body>
<div class="c1">div1的内容</div>
<div id="dl"  class="c1">div2的内容</div>
<div>div3的内容</div>
<div>div4的内容</div>
<span>span的内容</span>
</body>
</html>

*七、伪类选择器

1.概述：代表选中的一种状态（例如：超链接标签）

2.伪类的状态：

（1）link：没有被访问过时的状态

（2）visited：已经被访问过的状态(鼠标点了,并且松开了)时的一种状态

（3）hover：鼠标悬浮时的一种状态

（4）active：鼠标激活(点击了,但是没有松开)的一种状态

注：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的
在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的

书写顺序：link——>visited——>hover——>active

3.书写格式：

标签名称：link{

属性：属性值；

}

注：属性 “text-decoration”表示文本修饰，下划线

伪类例子：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>伪类选择器</title>
<style type="text/css">
	/*伪类的link控制状态:没有访问过的状态*/
	a:link{
		font-size:24px;
		color:#FF0;
	}
	
	/*伪类的visite状态:已经访问过的状态(点击,并且松开的状态)*/
	a:visited{
		font-size:24px ;
		color:#000 ;
		text-decoration:none ;
	}

	
	/*伪类的hover状态:鼠标悬浮显示的一种状态*/
	a:hover{
		font-size:24px;
		color:#F00;	
		/*文本修饰:去掉下划线*/
		text-decoration:none;
	}
	
	/*伪类的active状态:鼠标激活状态(点击,但是没有松开的一宗状态)*/
	a:active{
		font-size:24px;
		color:#0F0;
		/*文本修饰:设置下划线*/
		text-decoration:underline;
	}
	
	
</style>

</head>

<body>
	<a href="http://www.baidu.com" target="_blank">超链接</a>
</body>
</html>

伪类选择器练习：鼠标经过表格的每一行，背景颜色变为蓝色（表头除外）

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>伪类选择器练习</title>

<style type="text/css">
	/*利用表格的拆分:将中间的每一行都包含在了tbody,选中tbody 给的子标签tr 交集选择器*/
	tbody tr:hover{
		background-color:#00F;	
	}
</style>
</head>

<body>
<table border="1px" align="center" width="400px" height="200px">
	<caption>2017年xxx学校学生成绩表</caption>
    
    <thead>
	<tr>
    	<th>姓名</th>
        <th>班级</th>
        <th>成绩</th>
    </tr>
    <thead>
    
    <tbody>
    <tr>
    	<td>张三</td>
        <td>软工1班</td>
        <td>78</td>
    </tr>
    <tr>
    	<td>李四</td>
        <td>软工2班</td>
        <td>85</td>
    </tr>
    <tr>
    	<td>王五</td>
        <td>软工3班</td>
        <td>90</td>
    </tr>
    </tbody>
    
</table>
</body>
</html>

效果：

Enjoy96

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【JavaWeb】CSS_css中的选择器

一、标签选择器1.选择器概述：在style 标签体中使用来设置样式2.使用方法：选中所有同名的标签，来使用标签选择器3.格式：/*css标签选择器*/需要设置的标签名称{属性：属性值；font-size:24px;color:#F00; }二、类选择器1.方法：给标签设置class 属性例如：2.类选择器的语法：.class属性名
复制链接

扫一扫