4. 元素选择器详解
4.1 元素选择器
4.2 选择器分组
用英文逗号","相连，使用相同的样式表
使用通配符对所有元素进行通用设定。
4.3 类选择器详解
4.3.1. 类选择器允许以一种独立于文档元素的方式来指定样式
.class{}
4.3.2. 结合元素选择器
a.class{} (只指定a标签内的class类)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
a.div{
color:red;
}
/*只改变a标签下类为div的元素样式*/
</style>
</head>
<body>
<div class="div">
hello world!
</div>
<a href="#" class="div">
hello world!
</a>
</body>
</html>
4.3.3 多类选择器
.class.class{} (设置两个类的共同的独有的特性)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.p1{
color:blue;
}
.p2{
font-size:30px;
}
.p1.p2{
font-style:italic;
}
</style>
</head>
<body>
<p class="p1">
p1p1p1p1p1p1p1
</p>
<p class="p2">
p2p2p22p2p2p2p2
</p>
<p class="p1 p2">
p3p3p33p3p33p3p
</p>
</body>
</html>
4.4 id选择器详解
4.4.1. ID选择器类似于类选择器，不过也有一些重要差别
例如：#id{}
4.4.2. ID只能在文档中使用一次，而类可以多次使用
ID选择器不能结合使用
当使用js的时候，需要使用到id
4.5 属性选择器详解
4.5.1 简单属性选择
[title]{}
4.5.2 根据具体属性进行选择
4.5.3 属性和属性值必须完全匹配
4.5.4 根据部分属性值选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[title]{
color:aqua;
}
/*title不指定具体的值就是默认
让所有的title元素都是用这个样式表
*/
[href="http://www.baidu.com"]{
font-size: 30px;
}
[title~="hello"]{
font-size: 50px;
}
/*~=符号是用来进行模糊选择的，只要类名中有提供的字眼就可以。*/
</style>
</head>
<body>
<p title="hello">
hello;
</p>
<p title="hel">
hello;
</p>
<p title="world hello">
hello;
</p>
<p title="hello">
hello;
</p> <a href="http://www.baidu.com">百度</a>
</body>
</html>
4.6 后代选择器
后代选择器可以选择作为某元素后代的元素
在4.7中查看代码
4.7 子元素选择器
与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素。
后代选择器不能隔代选择元素，只能一代挨着一代选择
例如：h1>strong{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
p strong{
color:red;
}
p strong i{
color:aqua;
}
/*后代选择器可以隔代选择元素*/ p>b{
color: deepskyblue;
}
/*
p>strong>b{
color: deepskyblue;
}
子元素选择器必须这样写才可以实现效果
子元素选择器不能隔代选择元素
*/
</style>
</head>
<body>
<p><strong>
p strong后代选择器；
</strong></p>
<p>
<strong>
<i>
p，strong，i后代选择器；
</i>
</strong>
</p>
<p>
<strong>
<b>
p，strong，i后代选择器设置蓝色不起作用；
</b>
</strong>
</p>
</body>
</html>
4.8 相邻兄弟选择器
可选择紧接在另一个元素后的元素，且二者有相同的父元素
例：h1+p{};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li+li{
font-size: 50px;
color:blanchedalmond;
}
/*让同一父元素之下的第一个li标签下的其他li标签样式更改。
最终效果是两个列表下的除了第一个的li其他的li样式都会更改。
*/
</style>
</head>
<body>
<div>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<ol>
<li>item11</li>
<li>item22</li>
<li>item33</li>
</ol>
</div>
</body>
</html>