1,元素选择器(标签选择器) p{} h1{}
2,选择器的分组:
将选择器的名字用逗号隔开,构成一组选择器 h1,h2{} 同组选择器公用大括号内的样式 特殊选择器的分组*通配符*{}用来初始化 内外边距
3,类选择器:
.class{} 可以结合元素选择器(标签选择器) a.class{} (结合标签的选择器) .class1.class2{} (多类选择器) .p1{} .p2{} 为两个并列的选择器, class=”p1 p2” 的元素会同属拥有 p1 p2的样式, 也可以通过 .p1.p2{样式} 添加p1 p2中没有的样式,当p1 p2中的样式有冲突时,谁写在后,渲染谁
4,id选择器:
#idname{样式} (区别于类选择器,1,id选择器只能使用一次,而类选择器可以多次使用 ### id选择器不能结合使用 当使用js 时需要用到id)
5,属性选择器:
[属性名字]{ 设定样式}
<p 属性名=”属性值”>属性选择器</p>
属性和属性值选择器
[属性名字=属性值]{ 设定样式}
<p 属性名=”属性值”>属性和值选择器</p> (属性和值必须的对应,样式才能生效)
根据部分属性值选择器:
[属性名~=”属性值”]{} 只要属性中具有这个值 就可以使用该样式
6,后代选择器:
可以选择某些 被包裹在父代元素中的所有后代元素. P(父代) span(后代){样式}
7,子代选择器:
P(父代)>span(子代){样式} 只能选择父代中的子代span元素 而孙子代中的span不能被选中
8,相邻兄弟选择器:
可以选择紧邻在另一个元素后的元素,且二者有相同的父级 h1+p{样式} h1和p必须有同一个父级
9,并集选择器:
当同时具有 两个属性或类,或标签时才能被选中,比如 div.intersection{样式},只有是div标签 并且class的属性值为intersection时,此标签才能被选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器2</title>
<style>
<!--通配符选择器 -->
/*通配符选择器可以选中所有的标签,主要用于写样式前的初始化*/
*{
margin:0;
padding:0;
}
/*标签选择器*/
div{
color:red;
}
/*这里可以设置整个body的样式*/
body{
background-color:wheat;
}
/*class选择器*/
.green{
color:green;
}
#blue{
color:blue;
}
/*后代选择器*/
.box p{
color:red;
}
/*并集选择器(选择器的分组)*/
h3,h2{
color:pink;
}
/*交集选择器*/
div.intersection{
font-size:22px;
color:darkred;
}
/*子集选择器*/
.box3>span{
color:orange
}
/*属性选择器,*/
[title]{
color:red;
}
/*带有属性值得属性选择器*/
[title = Hello]{
color:blue;
font-size:18px;
}
/*属性选择器的泛型选择*/
/*下面的例子为包含指定值的 title 属性的所有元素设置样式*/
[title ~= hi]{
color:darkslategrey;
}
/*相邻兄弟选择器*/
.borther + div{
color: #00ec00;
}
</style>
</head>
<body>
<!--类选择器-->
<div class="green">这是一个类选择器</div>
<hr>
<!--id选择器-->
<div id="blue">
这是一个id选择器
</div>
<hr>
<!--后代选择器-->
<div class="box">
<p>这是一个p元素</p>
<div>这是一个div</div>
</div>
<p>这是类box外面的p标签,它的style由p标签选择器来决定</p>
<hr>
<!--选择器的分组,并集选择器-->
<h3>粉色,这是并集选择器的其中一个元素h3</h3>
<h2>粉色,这是并集选择器的其中一个元素h4</h2>
<hr>
<br>
<br>
<!--交集选择器-->
<div class="intersection">这是一个交集选择器,可以被选中</div>
<F class="intersecttion">这个标签中只有类,并没有div的标签属性,所以不能被选中</F>
<hr>
<br>
<br>
<!--关于子代选择器和后代选择器,当我们使用子代选择器的时候,后代的都后代不会被选中-->
<div class="box3">
<span>这是子代span,子代选择器和后代选择器,都能选择这个标签</span>
<div>
<span>这是后代span,子代选择器不能选中它</span>
</div>
</div>
<hr>
<!--普通属性选择器的演示-->
<h1>下面是通过属性选择器选择到的标签</h1>
<h2 title="helloword">Hello Word</h2>
<hr>
<h1>下面是没有属性的h2样式,字体演示不会被改变,依然是标签选择器设定的粉色</h1>
<h2>Hello Word</h2>
<br>
<br>
<hr>
<!--带有属性值的属性选择器-->
<h1>下面是带有属性值得属性选择器</h1>
<h2 title="Hello">这是一个h2标签,他的属性值为Hello</h2>
<hr>
<!--带有属性值的属性选择器-->
<!--/*下面的例子为包含指定值的 title 属性的所有元素设置样式*/-->
<h1>/*下面的例子为包含指定值的 title 属性的所有元素设置样式*/</h1>
<h2 title="hi nihao"> 你好</h2>
<h2 title="hi hello"> 哈喽</h2>
<hr>
<p class="borther">下面的div标签是它兄弟</p>
<div>这个div标签和上面的borther相邻.通过.borther + div 被选中</div>
</body>
</html>