用来选取需要设置样式的元素(标签)
1.元素选择器
元素选择器:对所有的元素标签设置 CSS 样式
元素名称 {
color: red;
}
h1 {
color:red;
}
<h1>
Hello CSS
</h1>
2.id 选择器
给这个标签可以设置一个 id 属性,然后通过这个 id 来修改 CSS 样式。
#id 属性{
color:red;
}
#hid{
color:red;
}
<h1 id="hid">
CSS id Selector
</h1>
注意,只能调用一次,不能重复调用。
3.类选择器
.class 属性值 {
color:red;
}
.cls {
color:red;
}
<h1 class="cls">
CSS class Selector
</h1>
类选择器可以选择一个或者多个标签,开发最常用。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础选择器</title>
<style>
.red {
width :100px;
height :100px;
/* 背景颜色 */
background-color: red;
}
.green {
width :100px;
height :100px;
background-color :green;
}
</style>
</head>
<body>
<div class="red">红色</div>
<div class="green">绿色</div>
<div class="red">红色</div>
</body>
</html>
如果三种选择器都存在,id 的优先级最高!
类选择器的排名第二。
最后元素选择器。
4.后代选择器(重要)
后代选择器又称为包含选择器,可以选择父元素里面的子元素。
当标签发生嵌套时,内层标签成为外层标签的后代。
注意这里的后代(孩子),可以是孙子。
一层一层的往下查找就可以。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复合选择器</title>
<style>
/* 把ol里面的li都选出来 */
ol li {
color: red;
}
ul li {
color: pink;
}
ol li a {
color: blueviolet;
}
.nav li a {
color: coral;
}
</style>
</head>
<body>
<ol>
我变颜色了吗?
<li>我是ol的孩子</li>
<li>我是ol的孩子</li>
<li>我是ol的孩子</li>
<li><a href="#">我是ol的孩子</a></li>
</ol>
<ul>
<li>我是ul的孩子</li>
<li>我是ul的孩子</li>
<li>我是ul的孩子</li>
</ul>
<ol class="nav">
我变颜色了吗?
<li>我是ol的孩子</li>
<li>我是ol的孩子</li>
<li>我是ol的孩子</li>
<li><a href="#">我是ol的第二个孩子</a></li>
</ol>
</body>
</html>
5.子选择器(重要)
又称为子元素选择器,只能选择某元素的最近一级子元素,简单的理解就是选亲儿子元素。
又可以称作亲儿子选择器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复合选择器</title>
<style>
/* 这是后代选择器,把所有的儿子,孙子都选出来! */
.nav a {
color: orange;
}
/* 只想选儿子,不想选择孙子!用子选择器 */
.nav>a {
color: red;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">我是儿子!</a>
<p>
<a href="#">我是孙子!</a>
</p>
</div>
</body>
</html>
6.复合选择器练习
把下面的链接文字颜色修改为红色。
<div class="nav">
<ul>
<li><a href="#">百度</a></li>
<li><a href="#">新浪</a></li>
</ul>
</div>
<style>
.nav ul li a {
color: rde;
}
</style>
请将下面的大肘子改为红色。
<div class="hot">
<a href="#">大肘子</a>
<ul>
<li><a href="#">猪头</a></li>
<li><a href="#">猪尾巴</a></li>
</ul>
</div>
<style>
hot>a {
color: red;
}
</style>
7.并集选择器
并集选择器可以选择多组标签,同时为他们指定相同的样式。
<body>
<div>
熊大
</div>
<p>
熊二
</p>
<span>光头强</span>
<ul class="pig">小猪佩奇
<li>小猪佩奇</li>
<li>猪爸爸</li>
<li>猪妈妈</li>
</ul>
</body>
<style>
/*要求1:请把熊大和熊二改为粉色。*/
div, p {
color: pink;
}
/*要求2:把熊大和熊二改为粉色,还有小猪一家改为粉色。*/
div, p, .pig li {
color: blue;
}
</style>
注意任何形式的选择器,都可以作为并集选择器的一部分。
一般习惯于竖着写。
注意最后一个选择器不需要加逗号。
8.伪类选择器
用于向某些选择器添加特殊的效果。
伪类选择器用 :表示,比如,:hover,:first-child
链接伪类
给链接使用。
-
a:link
:选择所有未访问的链接 -
a:visited
:选择所有已访问的链接 -
a:hover
:选择鼠标指针位于其上的链接 -
a:active
:选择活动链接。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>复合选择器</title> <style> /* 1.未访问的链接选出来,然后更改样式。*/ a:link { color: #333; text-decoration: none; } /* 2.选择点击过的,访问过的 */ a:visited { color: orange; } /* 鼠标经过谁,就把谁选出来 */ a:hover { color: skyblue; } /* 选择正在按下,但是没有弹起鼠标的时候的 */ a:active { color: green; } </style> </head> <body> <a href="#">小猪佩奇</a> </body> </html>
注意事项
-
为了确保生效,请按照LVHA的顺序声明。
-
想给链接指定样式,一定要单独制定。
实际开发中的使用:
<style>
/*先制定标签选择器的样式*/
a {
color: gray;
}
/*:hover 鼠标经过选择器*/
a:hover {
color: red;
}
</style>
:focus伪类选择器
用于获取获得焦点的表单元素。
焦点就是光标,一般情况下<input>
类表单元素才能获取,因此这个选择器业主要针对于表单元素来说。
<style>
input:focus {
background-color: yellow;
color: green;
}
</style>
<body>
<input type="text">
<input type="text">
<input type="text">
</body>