css常用的几种选择器
一、基础选择器
1. 元素选择器
<html>
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<style type="text/css">
span{color:red;font-size: 20px}
</style>
</head>
<body>
<span>hello</span><br/>
<span>world</span>
</body>
</html>
2. id选择器
<html>
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style type="text/css">
#div1{background-color: red}
#div2{background-color: pink}
</style>
</head>
<body>
<div id = "div1">hello world1</div>
<div id = "div1">hello world1</div>
<div id = "div2">hello world2</div>
</body>
</html>
3. class选择器
<html>
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style type="text/css">
#div1{background-color: red}
#div2{background-color: pink}
</style>
</head>
<body>
<div id = "div1">hello world1</div>
<div id = "div1">hello world1</div>
<div id = "div2">hello world2</div>
</body>
</html>
4. 优先级别:
id > class > 元素
二、属性选择器
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
input[type = 'text'] {background-color: red}
input[type = 'password'] {background-color: pink}
</style>
</head>
<body>
<form>
name:<input type = "text"><br/>
pass:<input type = "password">
</form>
</body>
</html>
三、伪类选择器
<html>
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style type="text/css">
a:link{color:green ;font-size: 50px}
a:hover{color:pink;font-size: 50px}
a:active{color:yellow;font-size: 50px}
a:visited{color:red;font-size: 50px}
</style>
</head>
<body>
<a href = "#">点击</a>
</body>
</html>
四、层级选择器
<html>
<head>
<meta charset="UTF-8">
<title>层级选择器</title>
<style type="text/css">
#d1 .dd2 span{color:red}
</style>
</head>
<body>
<div id = "d1">
<div class = "dd1">
<span>span1-1</span>
</div>
<div class = "dd2">
<span>span1-2</span>
</div>
</div>
<div id = "d2">
<div class = "dd1">
<span>span2-1</span>
</div>
<div clss = "dd2">
<span>span2-2</span>
</div>
</div>
</body>
</html>
时间:2018年10月30日21:20:39
-END-