###########总结####
标签选择器 标签名 id选择器 #box1 类选择器.box2
css高级选择器
*子选择器* 子选择器用 大于号 .box1>.box2{ 100px; height: 100px; background-color: yellow; } .box1>div{ 100px; height: 100px; background-color: yellow; } .box1>.box2>.box3{ 100px; height: 100px; background-color: green; } .box1>.box2>p{ color: red; } 后代选择器 后代选择器用 空格 .box2 p{ color: green; } 通用选择器 *{ margin: 0; } 并集选择器 or的意思 body, h1, p{ margin:0; } 交集选择器 表示2者选中之后共有的特征
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box { color: red; } p { font-size: 20px; } /*两个交集的部分给他设置黄色背景颜色*/ p.active { background-color: yellow; } </style> </head> <body> <div class="box1" id="wrap1"> <div class="box2" id="wrap2"> <div class="box3" id="wrap3"> <p class="box active ">倚天屠龙记</p> </div> <p>天龙八部</p> </div> </div> <span>射雕英雄传</span> </body> </html>
属性选择器 [type]{ color:red; } [type='submit']{ color:red; } [type='text']{ color: green; } [for^='test']{ color:red; }
伪类选择器
body标签里面写
<a href="http://www.baidu.com" target="_blank">点我</a>
/*未被访问的链接*/ a:link{ color: green; } /*访问过的链接*/ a:visited{ color: red; } /*鼠标悬浮的时候的颜色*/ a:hover{ color:blue; } /*鼠标按下时的样式*/ a:active{ color: yellow; } ################ ul li:first-child{#选择第一个孩子变颜色 color: green; } ul li:last-child{ #选择最后一个孩子 color: yellow; } ul li:nth-child(0){#选择指定的孩子 color: red; } ul li:nth-child(3n){#间隔 color: red; } ################# p:first-letter{#选择第一个字符内容改变大小 颜色 font-size: 32px; color: red; } p:before{#在标签前边添加一个标签内容 content: 'alex'; } p:after{#在标签后面添加一个标签内容 content: '叫小宝宝'; }
继承性
字标签可以继承父标签的样式: color, font-, text- line-
层叠性
(选择器权重一样的时候)后边添加的样式会覆盖前边的样式
权重
id 权重100
类 权重10
标签 权重 1
!important 权重无限大
都有!important 的时候,比较权重
<div id='box1' class="wrap1"> <div id="box2" class="wrap2"> <div id="box3" class="wrap3"> <p>再来猜猜我是什么颜色？</p> </div> </div> </div>
.box1{ color: blue; } .box1 p{ color: red; } p{ color: yellow; } #pid{ color: green; } .pclass{ color: blue; } 权重问题 /*2 0 1*/ #box1 #box2 p{ color: yellow; } /*1 1 1 */ #box2 .wrap3 p{ color: red; } /*1 0 3*/ div div #box3 p{ color: purple; } /*0 3 1*/ div.wrap1 div.wrap2 div.wrap3 p{ color: blue; } /*权重相同的*/ /*1 1 1 */ #box1 .wrap2 p{ color: red; } /*1 1 1 */ #box2 .wrap3 p{ color: yellow; } /*2 1 0 */ #box1 #box2 .wrap3{ color: red; } /*1 1 0 */ .wrap1 #box2{ color: green; } /*2 0 0 */ #box1 #box2{ color: red ; } /*1 2 0 */ .wrap1 #box2 .wrap3{ color: green; } #box1 #box2 .wrap3{ color: red !important; } #box2 .wrap3{ color: blue !important; } #box3{ color: yellow; }