CSS_2th_CSS选择器

最新推荐文章于 2022-07-15 16:58:27 发布

weqpo

最新推荐文章于 2022-07-15 16:58:27 发布

阅读量681

点赞数

分类专栏： CSS 文章标签： html css 选择器

本文链接：https://blog.csdn.net/weqpo/article/details/63253899

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、选择器
1、类选择器：class
1）一个选择符能有不同的class，因而允许同一个选择符具有不同的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			p.code{ font-size: 16px; color: red; }
			p.comment{ font-size: 10px; color: green; }
		</style>
	</head>
	<body>
		<p class="comment" >//第一个Java程序</p>
		<pre>
		<p class="code" >
		public class Hello {
			public static void main(String[] args) {
				System.out.println("Hello World!");
			}
		}
			</p>
		</pre>
	</body>
</html>

总结：
①p.comment{}表示：如果一个p标签的class是"comment"，就将该p标签的样式设为{}中所描述的样式。
②即"."和class相对应。
③<pre></pre>标签可以保留内容的格式（如换行和缩进）。

2）不同的标签通过类选择器同时定义成一样的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.code{ font-size: 16px; color: red; }
		</style>
	</head>
	<body>
		<h1 class="code" >//第一个Java程序</h1>
		<pre>
		<p class="code" >
		public class Hello {
			public static void main(String[] args) {
				System.out.println("Hello World!");
			}
		}
		</p>
		</pre>
	</body>
</html>

总结：
①class选择器可以指定某一类（多个标签）的装修风格。

2、id选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#code1{ font-size: 16px; color: red; }
			#code2{ font-size: 16px; color: blue; }
		</style>
	</head>
	<body>
		<h1 id="code1" >//第一个Java程序</h1>
		<pre>
		<p id="code2" >
		public class Hello {
			public static void main(String[] args) {
				System.out.println("Hello World!");
			}
		}
		</p>
		</pre>
	</body>
</html>

总结：
①"#code1"表示找到一个标签其id是"code"，则把该标签的样式设置为#code1{}的样式。
②在style标签中看到"#"则说明这是一个id选择器。id与"#"相搭配，class与"."相搭配。
③class和id的区别：两个标签的class可以一样，但是id通常情况下不能取一样的值，即一个标签的id在整个html文档中是独一无二的。
④id可以与JavaScript结合在一起使用，由于id是独一无二的，使用document.getElementById("code1")获得当前文档对象中id为"code1"的那个标签对象的引用。

3、多标签选择
1）例1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			h1,p{ font-size: 16px; color: red; }
		</style>
	</head>
	<body>
		<h1>//第一个Javac程序</h1>
		<pre>
		<p>
		public class Hello {
			public static void main(String[] args) {
				System.out.println("Hello World!");
			}
		}
		</p>
		</pre>
	</body>
</html>

总结：
①h1,p{}表示将html文档中的h1和p标签都设置为{}中的样式。
②"，"相当于"与"的关系。

2）例2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			p a{ font-size: 16px; color: red; }
		</style>
	</head>
	<body>
		<p>
			<a>Hello</a>
		</p>
		<p>World</p>
	</body>
</html>

总结：
①p a{}表示将p标签内部的a标签设置为{}中的样式。
②" "（空格）表示从属关系。

二、装饰超链接的伪类选择符
1、对链接的修饰
1）a:link未访问时的状态
2）a:visited访问过后的状态
3）a:active鼠标点中不放时的状态
4）a:hover鼠标划过时的状态

5）例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			a:link{color: blue; text-decoration: none; }
			a:visited{ color: blueviolet; text-decoration: none;}
			a:hover{ color: blue; text-decoration: underline; }
			a:active{ color: red; text-decoration: none; }
		</style>
	</head>
	<body>
		<a href="01.html">我就是用来说明问题的链接</a>
	</body>
</html>

总结：
①设置伪类的顺序一定要是：a:link->a:visited->a:hover->a:active
②在实际开发中经常只设置两种：a、a:hover
如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			a{color: gray; text-decoration: none; }
			a:hover{ color: blue; text-decoration: underline; }
		</style>
	</head>
	<body>
		<a href="01.html">我就是用来说明问题的链接</a>
	</body>
</html>