HTML
元素。* {
属性名;属性值;
}
/* 选中所有元素 */
* {
color: orange;
font-size: 40px;
}
在清除样式方面有很大作用
标签名 {
属性名:属性值;
}
h1 {
color: orange;
font-size: 30px;
}
例如说用该选择器对以下代码进行设置:
<h1>元素选择器会选择选定的元素进行设置效果</h1>
<p>1234</p>
<div>通配选择器</div>
<h1>测试1</h1>
得到的就是以下样式:
备注:元素选择器无法实现差异化设置,例如上面的代码中,所有的 p 元素效果都一样。
.类名 {
属性名:属性值;
}
.student{
color: blue;
font-size: 40px;
}
可以选中所有class
为student的元素,对于 <div class="student">软件工程1班</div>
来说,效果如下图:
一个元素的
class
可以写多个值,用空格隔开,如:<div class="student soft">软件工程1班</div>
。
id
属性值,来精确的选中某个元素。#id值 {
属性名;属性值;
}
选择器1选择器2选择器3 { }
<style>
/* 选中:类名为beauty的p元素,为此种写法用的非常多!!!! */
p.beauty {
color: blue;
}
/* 选中:类名包含rich和beauty的元素 */
.rich.beauty {
color: green;
}
</style>color: green;
}
选择器1,选择器2,选择器3 { }
一般将每一个类名都换一个行,美观
/* 选中id为peiqi,或类名为rich,或类名为beauty的元素 */
#peiqi,
.rich,
.beauty {
font-size: 40px;
background-color: skyblue;
width: 200px;
}
祖先选择器 后代选择器 { }
(先写祖先,再写后代)选择器之间,用空格隔开
<style>
/* 选中ul中的所有li */
ul li {
color: red;
}
/* 选中ul中所有li中的a */
ul li a {
color: orange;
}
/* 选中类名为subject元素中的所有li */
.subject li {
color: blue;
}
/* 选中类名为subject元素中的所有类名为front-end的li */
.subject li.front-end {
color: blue;
}
</style>
注意:
子代选择器只能选择直接子代,即第一层子元素,不能选择更深层的子代。
选择器1>选择器2>选择器3 { }
<style>
/* div中的子代a元素 */
div>a {
color: red;
}
/* 类名为persons的元素中的子代a元素 */
.persons>a {
color: red;
}
</style>
选择的都是指定下面的兄弟
一定是紧挨着的下一个**** (睡在我下铺的兄弟)
选择器1+选择器2 { }
/* 选中div后相邻的兄弟p元素 */
div+p {
color:red;
}
选择器1~选择器2 { }
/* 选中div后的所有的兄弟p元素 */
div~p {
color:red;
}
紧挨着
<style>
/* 选中具有title属性的元素 */
[title]{
color:red;
}
/* 选中title属性值为atguigu的元素 */
[title="atguigu"]{
color:red;
}
/* 选中title属性值以a开头的元素 */
[title^="a"]{
color:red;
}
/* 选中title属性值以u结尾的元素 */
[title$="u"]{
color:red;
}
/* 选中title属性值包含g的元素 */
[title*="g"]{
color:red;
}
</style>