CSS选择器有：
- 元素选择器
- 选择器分组*
- 类选择器
- ID选择器
- 属性选择器*
- 后代选择器*
- 子元素选择器*
- 相邻兄弟选择器*
选择器分组：
h1,h2{
/*同时对h1,h2定义样式*/
...
}
通配符“*”：
*{
...
}
/*用“*”对所有元素定义样式*/
类选择器+标签选择器：
<h class="cww" ...>
<a class="cww" ...>
a.cww{
...
}
多类选择器：
<p class="p1">...</p>
<p class="p2">...</p>
<p class="p1 p2">...</p>
.p1{
...
}
.p2{
...
}
.p1.p2{
...
}
其中".p1.p2"会包含自身样式以及前面".p1"和".p2"的样式。
id选择器：
<p id="cww">...</p>
#cww{
...
}
/*用“#”定位*/
- 使用js需要用到获取id
- id只能一次性使用，而类可以多次使用
- id选择器不可以结合使用
属性选择器：
<a href="http://www.cww.com">...</a>
<a href="http://www.mochayo13.com">...</a>
/*对属性href定义样式*/
[href]{
...
}
- 属性选择器可以具体到属性值来下定义
- 可以根据部分属性选择，
<p tltle="cw"></p> <p tltle="cww"></p> <p tltle="cww13"></p> [title~="cww"]{ ... } /*“~”可以理解为省略，即该样式只对title属性值包含“cww”字符串的部分元素作用*/
后代选择器：
<!DOCTYPE html>
<html>
<body>
<p>米娜桑，<b>这里是<i>陈玩玩</i></b>，早安QwQ</p>
</body>
<style>
p b i{
color: blue;
}
</style>
</html>
效果如下：
相比用class，id来实现，这样要快很多。
子元素选择器：
/*仍用上述的例子：*/
<!DOCTYPE html>
<html>
<body>
<p>米娜桑，<b>这里是<i>陈玩玩</i></b>，早安QwQ</p>
</body>
<style>
p>b>i{
color: blue;
}
</style>
</html>
注意这里通过子元素定义的格式,用到符号“>”一层一层表示：
p>b>i{
color: blue;
}
- 注意子元素选择器和后代选择器的区别，前者要定义<i></i>中内容需要通过先找到<b></b>，共三层关系一个不能漏；而后者则可以直接由<p>转到<i>可以省略中间的<b>层。
相邻兄弟选择器：
- 从相邻元素的后一个开始作用
- 必须属于同一父元素
时间： 2024-10-20 01:44:42