属性选择器
语法:
E[类型]{ }:给某一类型的元素设置样式
例子:
[type=password]{
width: 500px;
height: 60px;
background-color: honeydew;
}
注意:=后面不能有 “:”".""//",如果必须要用,加引号。
缩小范围可加:
E[attr^=”value”]:设置sttr是以y开头的样式,其中sttr也可以是类,id,标签
例子:
[clss^="y"]{
border: 2px solid blueviolet;
}
E[attr$=”value”]:以x结尾的样式
例子:
[class$="x"]{
border:2px solid brown;
}
E[attr*=”value”]:设置类名中出现x的样式
[class$="x"]{
border:2px solid brown;
}
结构伪类选择器
/* 所有偶数行的样式 */
p:nth-child(even){
color: white;
background-color: yellow;
}
/* 所有奇数行的样式 */
p:nth-child(odd){
color: whitesmoke;
background-color: yellowgreen;
}
/* 第一行的样式 */
p:first-child{
color: azure;
background-color: blueviolet;
}
/* 最后一行的样式 */
p:last-child{
color: whitesmoke;
background-color: blue;
}
/* 第一个子元素 */
div:first-child{
width: 300px;
height: 250px;
background-color: green;
}
/* 最后一个子元素 */
div:last-child{
width: 50px;
height: 20px;
background-color: cornflowerblue;
}
/* 子元素只有一个 */
p:only-child {
width: 100px;
height: 100px;
color: cornflowerblue;
background-color: yellow;
}
/* 父元素中这类型的子元素只有一个 */
h2:only-of-type {
width: 100px;
height: 100px;
background-color: pink;
}
/* 子元素是空白,空格也不能有 */
div:empty{
width: 100px;
height: 100px;
background-color: hotpink;
}
UI状态选择器
/* 设置type属性为text禁用时的样式 */
[type="text"]:disabled{
background-color: lightcoral;
}
/* 设置type属性为text正常时的样式 */
[type="text"]:enabled{
background-color: lightgreen;
}
/* 设置type属性为checkbox点击时的样式 */
[type="checkbox"]:checked{
appearance: none;
width: 14px;
height: 14px;
border: 1px solid slateblue;
background-color: lightseagreen;
}
/* 所有偶数行的样式 */
p:nth-child(even){
color: white;
background-color: yellow;
}
/* 所有奇数行的样式 */
p:nth-child(odd){
color: whitesmoke;
background-color: yellowgreen;
}
/* 第一行的样式 */
p:first-child{
color: azure;
background-color: blueviolet;
}
p:nth-child(4){
font-size: 40px;
color: chartreuse;
background-color: cornflowerblue;
}
/* 最后一行的样式 */
p:last-child{
color: whitesmoke;
background-color: blue;
}
后代选择器
.wrap1>div{
width: 300px;
height: 200px;
}
否定伪类选择器
:not() 除了什么什么 可以让你定位不匹配该选择器的元素
input:not([type=text]){
width: 100px;
height: 60px;
background-color: springgreen;
}
input:not(.pwd){
width: 100px;
height: 60px;
background-color: red;
margin-bottom: 20px;
}
目标伪类选择器
:target 选择器可用于选取当前活动的目标元素。
使用该选择器来对页面中的某个target元素(该元素的id当做页面中的超链接来使用)指定样式,该样式只在用户点击了页面中的超链接,并且跳转到target元素后起作用。
全部可参考这个图