|
什么是选择器 当我们定义一条样式时候，这条样式会作用于网页当中的某些元素，所谓选择器就是样式作用的对象. 插入样式的三种方法 1.内联样式表（行内） 2.内部样式表（style中） 3.外部样式表 ■创建一个外部样式表 ■在head中使用link元素插入样式表 CSS语法 •单一元素的多个属性之间用分号隔开；若只有一个可以省略 •多个元素之间用逗号隔开 •如果值为若干单词，则要给值加引号;除了这种情况外其他时候不可以加引号 •css代码的注释 •样式的优先顺序: ◦设计者设计的样式>浏览器用户自定义的样式>浏览器自设的样式 ◦强制优先级：！important 1.行内（内联）样式 2.内部样式：style中的样式 3.外部样式 •层叠、继承、冲突 ◦外观样式--比如字体、颜色可以继承;而布局有关的样式不可以继承，比如边框等 •可以在同一个 HTML 文档内部引用多个外部样式表。 CSS选择器 •常用选择器 1.通用选择器：“*” 2.元素选择器 3.id选择器:前面有一个 # 号 4.类选择器:前面加符号 . ■给一个元素加上多个类名 ■指定某一特定的类 *{color: red;} div p{color: green} #div1{padding: 15px;background: blue} .class2{background: green;padding: 20px;} *ul li{color: red;border: 1px solid} *ul>li{color: red} div,ul{color: red} *h2+p{color: green} 5. •属性选择器 ◦E[att] :选择具有att属性的E元素。需要选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。 可以根据多个属性进行选择，只需将属性选择器链接在一起即可。 ◦E[att="val"]：选择具有att属性且属性值等于val的E元素。进一步缩小选择范围，（只选择有特定属性值的元素。） ◦E[att~="val"]:选择具有att属性且属性值有多个，其中一个的值等于val的E元素。 ◦E[att|="val"]:选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。 ◦E[att^="val"]:选择具有att属性且属性值为以val开头的字符串的E元素。 ◦E[att$="val"]:选择具有att属性且属性值为以val结尾的字符串的E元素。 ◦E[att*="val"]:选择具有att属性且属性值为包含val的字符串的E元素。 input[value][style]{background: green} input[value='vip1']{background: red} input[style~='15px']{background: red} p[lang|="en"]{color: red} p[lang|="en"]{color: red} /*input[value][style]{background: green}*/ /*input[value='vip1']{background: red}*/ /*input[style~='15px']{background: red}*/ /*p[lang|="en"]{color: red}*/ /*input[value^="vip"]{background: green} a[href^="http"]{color: green}*/ /*a[href$=".cn"]{color: red}*/ input[value*='vip']{background: red} •关系选择器 ◦后代选择器（包含选择器）ul li{}:后代选择器又称为包含选择器。后代选择器可以选择作为某元素后代的元素。 ◦子元素选择器ul>li:与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素,缩小了选择范围 ◦相邻选择符：E+F:选择紧贴在E元素之后F元素。 ◦兄弟选择器E~F:选择E元素所有兄弟元素F。(只可以选择到之后的元素) •伪元素选择器 ◦E:first-letter/E::first-letter 设置元素内的第一个字符的样式。 ◦E:first-line/E::first-line设置元素内的第一行的样式。 ◦E:before/E::before在每个 E元素的内容之前插入内容。用来和content属性一起使用 ◦E:after/E::after在每个E元素的内容之后插入内容。用来和content属性一起使用 ◦E::selection设置对象被选择时的颜色。 p::first-letter{font-size: 50px} p::first-line{color: green} /*a::before{ content: "点击" }*/ a::after{ content: url(../img/ss.png) } p::selection{background: red} •伪类选择器 结构伪类选择器 ◦E:first-child 父元素的第一个子元素E。 ◦:root:选择文档的根元素。 ◦E:last-child:最后一个子元素E。 ◦E:only-child:仅有的一个子元素E。 ◦E:only-of-type:只有一种类型的子元素。 ◦E:nth-child(n):元素的第n个子元素E。 /*:root{background: green}*/ /*li:first-child{color: red}*/ /*li:last-child{color: red}*/ /*li:only-child{color: green}*/ p:only-of-type{color: red} ■可以直接用数值：比如2 ■可以用奇数（odd）偶数(even) ■可以用公式3n ◦E:nth-last-child(n):匹配父元素的倒数第n个子元素E。 ◦E:first-of-type :匹配同类型中的第一个同级元素E。 ◦E:last-of-type:匹配同类型中的最后一个同级元素E。 ◦E:nth-of-type(n):匹配同类型中的第n个同级兄弟元素E。 ◦E:nth-last-of-type(n):匹配同类型中的倒数第n个同级兄弟元素E。 ◦E:empty :匹配没有任何子元素（包括text节点）的元素E。 /*tr:nth-child(ogg){background:red}*/ div:empty{width: 300px;height: 400px;background: red} /*#div1>h3:nth-child(2){color:red}*/ /*tr:nth-child(even){background:red}*/ /*tr:nth-last-child(3){background:green}*/ /* p:first-of-type{color: red}*/ /*p:nth-of-type(2){color: red}*/ div:empty{width:300px;height:200px;background: red} UI伪类及其他选择器 ◦E:active 向被激活的元素添加样式。 ◦E:hover 当鼠标悬浮在元素上方时，向元素添加样式。 ◦E:link 向未被访问的链接添加样式 ◦E:visited 向已被访问的链接添加样式。 ◦E:focus 向拥有键盘输入焦点的元素添加样式。 ◦E:lang向带有指定 lang 属性的元素添加样式。 ◦input:checked 选择每个被选中的input元素。 ◦input:disabled 选择每个禁用的input元素 ◦input:enabled 选择每个启用的input元素。 ◦input:disabled 选择每个禁用的input元素 ◦#E:target 选择当前活动的元素(某个被链接的元素)。 ◦:not(E) 选择E元素之外的每个元素。 a:active{background: green} a:hover{background: blue} a:link{color: red} a:visited{color: #9a9a9a}; p:lang(en){color: red} input:checked{width: 60px;height: 60px} input:enabled{background: #e6e6fa} input:disabled{background: #808080} :not(input){color: green} |
|
|
