HTML学习CSS选择器06-简单选择器
2019-04-18 本文已影响0人
coderhlt
- 按照一定的规则选择出符合条件的元素，为之添加CSS样式，叫CSS选择器
- 大致可分为: 元素选择器、通用选择器、类选择器、id选择器、属性选择器、组合、伪类、伪元素
1、元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
background-color: red;
}
</style>
</head>
<body>
<div>我是元素选择器，可以叫我标签选择器</div>
</body>
</html>
2、通用选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
color: red;
}
</style>
</head>
<body>
<div>我是div</div>
<h1>我是h</h1>
</body>
</html>
- 一般用来给所有元素做一些通用性的设置，比如内边距、外边距。
- 尽量不要使用，效率比较低
3、id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#the-first-element{
color: red;
}
#the_two_element{
color: blue;
}
#theThirdElement{
color: black;
}
</style>
</head>
<body>
<!--中划线-->
<p id="the-first-element">我是p2</p>
<!--下划线-->
<p id="the_two_element">我是p3</p>
<!--驼峰标示-->
<p id="theThirdElement">我是p4</p>
</body>
</html>
- 一个HTML文档里的id是唯一的，不能重复。
- id值如果由多个单词组成,单词之间可以用中划线-、下划线_、驼峰标示。
- 用#id值去取元素，如#theThirdElemen， #the_two_element，#the-first-element
3、类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.btn{
background-color: red;
width:60px;
text-align: center;
}
.confirm{
color: black;
}
.cancell{
color:blue ;
}
.delete{
color: aqua;``
}
</style>
</head>
<body>
<p class="btn confirm">红</p>
<p class="btn cancell">黄</p>
<p class="btn delete">绿</p>
</body>
</html>
- 一个元素可以有多个class值，每个class之间用空格隔开。在开发中可以将一些公共样式抽出来，写到某个类选择器中。谁要使用这些样式加上类名就可以了。
- 用 .class值去取元素，例如 .confirm， .cancell，.delete
4、属性选择器
4.1、属性值是one
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[title="one"]{
color: green;
}
</style>
</head>
<body>
<div title="one">文字一</div>
<div title="two">文字二</div>
</body>
</html>
4.2、属性值包含单词one
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[title~="one"]{
color: green;
}
</style>
</head>
<body>
<div title="one two">文字一</div>
<div title="two">文字二</div>
</body>
</html>
4.3、属性值以one为开头的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[title^="one"]{
color: green;
}
</style>
</head>
<body>
<div title="one two">文字一</div>
<div title="two one">文字二</div>
</body>
</html>
5、后代选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div span {
color: red;
}
</style>
</head>
<body>
<div>
<span>文字</span>
<p>
<span>文字二</span>
</p>
</div>
</body>
</html>
- div span {
}
div里的span元素，span是直接或者间接的子元素。
6、子选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div>span {
color: red;
}
</style>
</head>
<body>
<div>
<span>文字</span>
<p>
<span>文字二</span>
</p>
</div>
</body>
</html>
- div>span {
}
div里的span元素，span必须是直接子元素。
7、交集选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div.one{
background-color: red;
}
</style>
</head>
<body>
<div class="one">我是div</div>
<p class="one">我是div2</p>
</body>
</html>
- 同时符合两个条件或以上的元素
8、并集选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div,.one{
background-color: red;
}
</style>
</head>
<body>
<div >我是div</div>
<p class="one">我是div2</p>
</body>
</html>
- 符合条件一+条件二的所有元素，之间用逗号隔开。
