css选择器:css选择器、css复合选择器、伪类选择器
作用:用来选择网页结构中具体的标签进行修饰,最终实现整个网页的表现形式。
一、通配符:
选择文档所以元素,重置文档各元素的默认样式设置。
*{属性:属性值;}
二、基础选择器
1、元素选择器:
元素{属性:属性值;}
2、类选择器:
.class名{属性:属性值;}
3、id选择器:
#id名{属性:属性值;}
三、群组选择器(并集选择器):(都有的属性)用 ,
隔开
例如:div,.div1,#box{属性:属性值;}
四、关系选择器
a、父子关系选择器:用空格隔开
.box p{color:red;} 在box里找到所有的p
b、兄弟选择器
p + a{color:red;} 与p标签相邻的a标签;
c、关联选择器
div.box{} 选择带有box类名的div标签
五、伪类选择器
1、a元素的伪类
a、a:link{属性:属性值;} 初始状态;
b、a:visited{属性:属性值;} 访问过后的状态;
c、a:hiver{属性:属性值;} 鼠标划入时的状态;
d、a:active{属性:属性值;} 点击到释放间的状态;
我们以<a href="">百度</a>
为例:
a:link {color:red;}
a:visited {color:green;}
a:hover {color:yellow;}
a:active {color:deeppink;}
注意:link、visited、hover、active同时使用时,只能按这样的顺序编码,顺序出错,样式就不会出现。元素a想要取消下划线,属性可设置为text-decoration:none;
2、其他标签的伪类
a、:hover{}
.box:hover span{} 鼠标划入box时,对子元素span的样式设置
b、:active{}
六、属性选择器
1、input[type=“checkbox”]{} 或者[type=“checkbox”] 选中input中带有type=“checkbox”属性的元素
2、[name=“inp”]{} 选择属性name="inp"的元素
七、css规则级联方式:
1、就近原则。
例如:h1{font-size:18px;}
h1{font-size:24px;} /*字体24px的会优先体现*/
2、具体性原则
如果一个选择器比其他选择器更具体,它的优先级更高;
例如*{font-size:18px;}
h1{font-size:24px;}/*字体24px的会优先体现*/
3、重要性原则
可以在任何属性值后面加上!important
来强调优先
例如 h1{font-size:40px!important;}
h1{font-size:34px;}
八、css(选择器)权重
元素类型 1 < class 10 < id 100 < 行内样式 1000