1.选择器分组
选择器分组语法:
选择器分组: 选择器1,选择器2{ 属性的名称:属性的值}
选择器分组.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器分组</title>
<style>
h1,h2,h3,h4,h5,h6{
color: red;
}
</style>
</head>
<body>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
</body>
</html>
2.属性选择器
a.a[href]
只对有 href 属性的锚（a 元素）应用样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
a[href]
{
color:red;
}
</style>
</head>
<body>
<h1>可以应用样式：</h1>
<a href="#">h2</a>
<hr />
<h1>无法应用样式：</h1>
<a name="aa">h1</a>
</body>
</html>
b.a[title='aaa']
把包含标题（title）的所有元素变为红色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
a[title='aaa']
{
color:red;
}
</style>
</head>
<body>
<h2 title="Hello world">Hello world</h2>
<a title="aaa" href="#">baidu</a>
<hr />
<h2>Hello world</h2>
<a href="#" title="bbb">谷歌</a>
<hr />
<h2>Hello world</h2>
<a href="#">火狐</a>
</body>
</html>
c.a[href][title]
将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
a[href][title]
{
color:red;
}
</style>
</head>
<body>
<h1>可以应用样式：</h1>
<a title="a" href="3">可以应用样式</a>
<hr />
<h1>无法应用样式：</h1>
<a href="#">无法应用样式</a>
</body>
</html>
d.a[href][title='a']
将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
a[href][title='a']
{
color:red;
}
</style>
</head>
<body>
<h1>可以应用样式：</h1>
<a title="a" href="3">可以应用样式</a>
<hr />
<h1>可以应用样式：</h1>
<a title="b" href="3">可以应用样式</a>
<hr />
<h1>无法应用样式：</h1>
<a href="#">无法应用样式</a>
</body>
</html>
3.后代选择器
后代选择器语法:
爷爷选择器 孙子选择器 找出所有的后代
注:中间有空格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style>
h1 em {
color:red;
}
</style>
</head>
<body>
<h1>
This is a
<em>important</em>
<p>
This is a
<em>important</em>
paragraph.
</p>
heading
</h1>
</body>
</html>
4.子元素选择器
子元素选择器语法:
父选择器 > 儿子选择器
注:中间有>号
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>子元素选择器</title>
<style>
h1 > em {
color:red;
}
</style>
</head>
<body>
<h1>
This is a
<em>important</em>
<p>
This is a
<em>important</em>
paragraph.
</p>
heading
</h1>
</body>
</html>
5.伪类选择器
伪类选择器: 通常都是用在a标签上
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
</style>
</head>
<body>
<a href="#">百度</a>
</body>
</html>