教学讲解视频:视频地址
语法结构:标签名{css属性名:属性值;}
作用:通过标签名,找到页面中所有的这类标签,并设置样式。
注意
一类
标签,而不是单独的一个。无论嵌套关系有多深
,都能够找到对应的标签。<style>
p {
color: red;
}
style>
<body>
<div>
111
<p>
2222
<div>
333
<p>444p>
div>
p>
div>
body>
语法结构:.类名{css属性名:属性值;}
作用:通过类名,找到页面中所有的带有这个类名的标签,并设置样式。
注意
都有
class属性,class属性的属性值成为类名。数字,字母,下划线,中划线
组成,但是不能以数字开头
。多个
类名,类名之间用空格
隔开。重复
,一个类选择器可以同时选中多个
标签。<style>
.class-one {
color: red;
}
.class-two {
font-weight: bold;
}
style>
<body>
<div class="class-one">
111
<div>
<div class="class-one class-two">
222
div>
div>
div>
body>
语法结构:#id属性值{css属性名:属性值;}
作用:通过id属性值,找到页面中带有这个id属性值的标签,并设置样式。
注意
唯一
的,不可重复的。一个
标签上只能有一个
id属性值。一个
id选择器只能选中一个
标签。<style>
#id-one {
color: red;
}
style>
<body>
<div id="id-one">
111
div>
body>
语法结构:*{css属性名:属性值;}
作用:找到页面中所有的标签,然后设置样式。
注意
极少
,只有在特殊的情况
下才会使用。<style>
* {
margin: 0;
padding: 0;
}
style>
<body>
<div>
111
div>
body>
语法结构:选择器1选择器2{css样式}
作用:选中页面中同时满足多个选择器的标签。
注意
紧挨
着的。标签选择器必须放在前面
。<style>
div.class-one {
color:red;
}
div#id-one {
color:green;
}
style>
<body>
<div class="class-one">
111
div>
<div id="id-one">
222
div>
<div>
333
div>
body>
语法结构:选择器1,选择器2{css样式}
作用:同时选择多组标签,设置相同的样式。
注意
,
隔开。<style>
p, div, .class-one {
color: red;
}
style>
<body>
<div class="class-one">
111
div>
<div>
222
div>
<p>
333
p>
body>
作用:选中含有指定属性的元素。
<style>
[title] {
color: red;
}
style>
<body>
<div title="111">
111
div>
<div>
222
div>
body>
作用:选中含有指定属性和指定
属性值的元素。
注意
数字,字母,下划线,中划线
组成,并且不能以数字
开头。<style>
[title=aaa] {
color: red;
}
style>
<body>
<div title="aaa">
aaa
div>
<div title="bbb">
bbb
div>
body>
作用:选中含有指定属性和指定属性值开头
的元素。
注意
数字,字母,下划线,中划线
组成,并且不能以数字
开头。<style>
[title^=aaa] {
color: red;
}
style>
<body>
<div title="aaa-one">
aaa
div>
<div title="aa">
bbb
div>
body>
作用:选中含有指定属性和指定属性值结尾
的元素。
注意
数字,字母,下划线,中划线
组成,并且不能以数字
开头。<style>
[title$=aaa] {
color: red;
}
style>
<body>
<div title="aaa-one">
aaa
div>
<div title="bbb-aaa">
bbb
div>
body>
作用:选中指定属性和含有
指定属性值的元素。
注意
数字,字母,下划线,中划线
组成,并且不能以数字
开头。<style>
[title*=a] {
color: red;
}
style>
<body>
<div title="aaa-one">
aaa
div>
<div title="bbb-aaa">
bbb
div>
body>
作用:选择某元素后面的第一代
子元素。
<style>
.class-one > .class-two {
color: red;
}
style>
<body>
<div class="class-one">
<div class="class-two">
aaa
div>
<div>
<div class="class-two">
bbb
div>
div>
div>
body>
作用:选择某元素后面的所有
子元素。
<style>
.class-one .class-two {
color: red;
}
style>
<body>
<div class="class-one">
<div class="class-two">
aaa
div>
<div>
<div class="class-two">
bbb
div>
div>
div>
body>
作用:可选择紧接
在另一元素后的元素,且二者有相同
父元素。
<style>
.class-one+.class-two {
color: red;
}
style>
<body>
<div class="class-one">
aaa
div>
<div class="class-two">
bbb
div>
body>
作用:选取某个元素之后的所有相同
元素。
注意
.class-one ~ h2
这句就是选取 .class-one后面所有
的 h2。同一个
父元素内,被选取的元素不必直接紧随
。<style>
.class-one ~ .class-two {
color: red;
}
style>
<body>
<div class="class-one">
aaa
div>
<div>
<div class="class-two">
bbb
div>
div>
<div class="class-two">
ccc
div>
body>
请浏览博客:CSS中伪类详解和用法例子详解
请浏览博客:CSS中伪元素详解和用法例子详解