什么是选择器
当我们定义一条样式时候,这条样式会作用于网页当中的某些元素,所谓选择器就是样式作用的对象.
插入样式的三种方法
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}
联系客服