1.ID选择器(一对一)
1 | <div id="only">123</div> |
2. class选择器(多对多):关注多个样式修饰一个div,也就是一个人可以穿多件衣服
1 | <div class="demo demo1">123</div> |
###3. 标签选择器:想选择某个元素设置样式时,只要写对应的标签再设置样式即可。1
2
3
4
5
6<div>123</div>
<div>234</div>
div{
color:#f40;
}
注意:上面写法会对引入网页的所有的div标签生效1
2
3
4
5
6
7
8
9<span>123</span>
<div>
<span>234</span>
</div>
span{
color:#f40;
}
注意:不管标签嵌套多少层,都会生效: 中国所有的男人,那么在屋子里的也算
###4. 通配符选择器:1
2
3
4
5
6
7
8
9
10<span>123</span>
<div>234</div>
<strong>111</strong>
*{
color: #f40;
}
整个文档所有标签全部生效
###5. 属性选择器:
123
[id]{
color: #f40;
}
123和234都显示为红色。因为这两个标签都有属性名id
如果我这么写:
[class]{
color: #f40;
}
那么只有123变为红色。因为只有123的标签含有属性名 class
属性选择器还可以进一步:将属性值也写进去:
[id=”demo1”]{
color: #f40;
}
此时只有123颜色变红1
2
###6. !important
div{
background-color:green
}
不用问肯定显示红色,因为行间选择器优先级很高,比id选择器优先级都高。更别谈现在是属性选择器了。但我要这么改:
div{
background-color:green!important
}
会发现显示的是绿色1
2
问题1:ID选择器与class选择器优先级比较: 下面文本显示红色还是绿色?:也就是 你妈和你媳妇的话 听谁的1
2
3
4
5
6
7
8<div id="only" class="demo">123</div>
#only{
color: red;
}
.demo{
color: green;
}
答案:红色: ID选择器优先级高于class选择器: 身份证丢了痛苦还是上衣脱了痛苦
问题2: class选择器与标签选择器优先级比较:下面这段代码显示红色还是绿色?1
2
3
4
5
6
7
8<div class="demo">123</div>
.demo{
color: red;
}
div{
color: green;
}
答案:红色: class选择器优先级高于标签选择器
问题3:行间选择器与id选择器哪个优先级高: 下面代码显示黄色还是红色?1
2
3
4
5
6
7
8<div id="only" style="background-color:yellow">123</div>
#only{
background-color:red
}
答案:黄色,也就是行间样式优先级高于id选择器:二者都是一一对应。打个比方。id选择器好比身份证。而行间选择器直接作用到人身上了,好比纹身。肯定纹身优先级比身份证高了哈。
问题4: class选择器与属性选择器哪个优先级高:
.demo{
color: red;
}
[class=”demo”]{
color: black;
}
显示的是黑色。 但是我要交换下顺序:
[class=”demo”]{
color: black;
}
.demo{
color: red;
}
会发现显示的是红色
答案: class选择器与属性选择器优先级是一样的。后面的会覆盖前面的
1 |
|
123
234
要求:只可以用标签选择器,将123的背景色设置为红色,css代码要怎么写?
div span{
background-color:red;
}
将div下的span标签的背景色设为红色。这就叫父子选择器也叫派生选择器:设置的只是span也就是孩子。前面的元素只是限制条件
1 | 父子选择器前面的限制条件可以有多个: |
234
div strong em{
background-color:red;
}
父子选择器前面的限制条件可没有规定必须得是标签:
.wrapper .box em{
background-color:red;
}1
2
3</br>
</br>
有下面代码:
1
2
div em{
background-color:red;
}
哪个会变红色?1还是2还是都变红?
答案:都变红。 这个意思是:div下的所有em标签。如果只想2变为红色.写法如下:
div strong em{
background-color:red;
}1
2
3
</br>
###8. 直接子元素选择器
1
2
div > em{
background-color:red;
}
意思是div下的直接的子元素也就是儿子em。这样的话只有1会变红
`
###8. 伪类选择器:
www.baidu.com /想要让鼠标移动到该标签上时,字体颜色变红/
a:hover{
background-color: orange;
}
这样写也行:
[href]:hover{
background-color: orange;
}
也就是说冒号前面的不管是id选择器,class选择器,标签选择器,属性选择器等等。只要能选中元素就都可以。
再来个hover效果
www.baidu.com
www.taobao.com
www.jd.com
a{
text-decoration:none; /没有下划线/
}
a:hover{
text-decoration: underline:
border-radius:10px;
background-color: #f40;
color:#fff; /字体颜色/
font-weight:bold;
font-family:arial; /字体/
}
标签总结:
行级元素,也叫内联元素 display: inline
feature: 内容决定元素所占位置 不可以通过css改变宽高 span strong em a del
块级元素 display: block
feature: 独占一行,可以通过css改变宽高: div p ul li ol form address
行级块元素 display: inline-block
feature: 内容决定大小,可以改变宽高 img
凡是带有inline的元素都有文字特性:有文字特性就意味着会被分割,就是会有间距:默认是4px