css选择器
1.通用选择器:“*”;
2.元素选择器
3.id选择器:前面加一个#号 一个元素只能有一个id,多个元素可以共用一个类,一个元素可以应用两个类
4.类选择器:前面加符号.
①给一个元素加上多个类名
②指定某一特定的类
5.属性选择器
E[att]:选择具有att属性的E元素。需要选择有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器。
例如:
input[value]{background:green;}
可以根据多个属性进行选择,只需将属性选择器链接在一起即可
例如:
input[style][value]{background:green;}
E[att="val"]:选择具有att属性且属性值等于val的E元素。进一步缩小选择范围,(只选择有特定属性值的元素。)
例如:
input[value="vip2"]{background:red;}
E[att~="val"]:选择具有att属性且属性值有多个,其中一个的值等于val的E元素。
例如:
input[style~='15px']{background:red;}//我试了不管用
E[att|="val"]:选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。
例如:
p[lang|='en']{color:red;}
css3新增:
E[att`="val"]:选择具有att属性且属性值为以val开头的字符串的E元素。
例如:
input[value^="vip"]{color:green;}
a[href^="http"]{color:green;}
E[att$="val"]: 选择具有att属性且属性值为以val结尾的字符串的E元素。
例如:
a[href$="cn"]{color:red;}
E[att*="val"]:选择具有att属性值且属性值包含val的字符串的E元素。
例如:
a[href*="xxx"]{color:yellow;}
test1:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Test1</title> <link rel="stylesheet" type="text/css" href="style.css"> <style type="text/css"> </style> </head> <body> <input type="text" value="住址" style="padding:10px 20px 30px"><br><br> <input type="text" value="姓名" style="padding:15px 25px 35px"><br><br> <input type="tel"><br><br> <input type="button" value="vip2"><br><br> <input type="button" value="vip3"><br><br> <input type="button" value="vip4"><br><br> <a href="http://www.baidu.com">百度</a><br><br> <a href="http://www.xxx.cn">xxx</a><br><br> <p lang="en-us">HTML5</p> </body> </html>
style.css:
/*input[style][value]{background:green;}*/ /*input[value="vip2"]{background:red;}*/ input[style~='15px']{background:red;} p[lang|='en']{color:red;} input[value^="vip"]{color:green;} a[href^="http"]{color:green;} a[href$="cn"]{color:red;} a[href*="xxx"]{color:yellow;}
6.关系选择器
后代选择器(包含选择器)ul li{}:后代选择器又称为包含选择器。后代选择器可以选择作为某元素后代的元素。
例如:
ul li{color:red;border:1px solid;}
div p{color:green;}
子元素选择器ul>li:与后代选择器相比,子元素选择器只能选择作为元素子元素的元素,缩小了选择范围。
例如:
ul>li{border:1px solid;color:red;}
相邻选择符:E+F:选择紧贴在E元素之后F元素。
例如:
h2+p{color:green;}
CSS3新增:
兄弟选择器E~F:选择E元素所有兄弟元素F。(只可以选择到之后的元素)
例如:
h2~p{color:green;}
test2:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="style2.css" type="text/css"> </head> <body> <ul> <li>我是ul的子元素1 <ol> <li>我是ul的孙元素1</li> <li>我是ul的孙元素2</li> <li>我是ul的孙元素3</li> <li>我是ul的孙元素4</li> <li>我是ul的孙元素5</li> </ol> </li> <li>我是ul的子元素2</li> <li>我是ul的子元素3</li> <li>我是ul的子元素4</li> </ul><hr> <div> <h2>我是标题1</h2> <p>我是段落p1</p> <p>我是段落p2</p> <p>我是段落p3</p> <p>我是段落p4</p> <h3>我是标题2</h3> <p>我是段落p5</p> <p>我是段落p6</p> <p>我是段落p7</p> <p>我是段落p8</p> </div> </body> </html>
style2.css:
/*ul li{color:red;border:1px solid;}*/ /*div p{color:green;}*/ /*ul>li{border:1px solid;color:red;}*/ /*h2+p{color:green;}*/ h2~p{color:green;} div,ul{color:red;}//并列关系