css入门之html选择器，ID选择器，类选择器，属性选择器

本文链接：https://blog.youkuaiyun.com/kissme_a/article/details/18733165

Css 基本语法：选择器：{属性1：值1；属性2：值2.......}

例：h1{color:red;fond-size:14px}

对于属性有4钟：HTML选择器，ID选择器，类选择器，属性选择器

1.对于HTML选择器，用法：p{color:red},对于p，如果我们是行标记的话，就用tr，如果是表格标记的话就用table标记，等等

<html>
<head>
	<title>html选择器</title>
	<style type = "text/css">
		p{color:red;font-weight:bold}
	</style>
</head>
<body>
	<p>这是一个段落。</p>
</body>
</html>

2,对于ID选择器，用法：#test{color:red}, 这里的test，我们可以自己定义，注意是用#.

在HTML文档中只能出现一次。同时对大小写敏感，推荐适用小写。

<html>
<head>
	<title>ID选择器</title>
	<style type = "text/css">
		#test{color:blue;font-weight:bold}
	</style>
</head>
<body>
	<p id="test">这是一个段落。</p>
</body>
</html>

3,对于类选择器，.用法：test{color:red},这里的test同ID选择器我们可以行定义，但不同的是前面用的是点.

在HTML文档中可以出现多次。同时对大小写敏感，推荐适用小写。

<html>
<head>
	<title>类选择器</title>
	<style>
		.test{color:red;font-weight:bold}
	</style>
</head>
<body>
	<p class="test">这是一个段落</p>
</body>
</html>

4.对于属性选择器是带有指定属性的HTML元素设置样式

用法：

[align=center]{color:blue}

//包含指定值，试用于由空格分隔的属性值

[name~="t1"]{color:red}

//包含指定值，适用由连字符分隔的属性值

[name|="t"]{color:red}

<html>
<head>
	<title>属性选择器</title>
	<style type="text/css">
		[align = "center"]{color:blue}
		[name~="t1"]{color:red}
		[name|="t"]{color:green}
	</style>
</head>
<body>
	<p align = "center">这是一个段落</p>
	<p align = "center" name = "t t1">这是一个段落</p>
	<p align = "center" name = "t-t1">这是一个段落</p>
</body>
</html>