CSS的选择器分为基础选择器以及复合选择器
本日将将继续说明复合选择器
复合选择器可以更准确更高效的选择元素(标签)
1. 後代选择器
又称为包含选择器,可以选择父元素里面的子元素
元素1 元素2 { 样式
}
/*上述语法表示选择1里面的所有元素2(後代元素)*/
ex:
ul li{ color: red}
/* ul和li中间用空格隔开
ul是父级元素 li是子级元素 最终选择的是ul里面的li */
ex:
div ul li{ color: red} (选定div内lu标签内的li标签)
/* 也可以三个元素这样使用,最终也会选定到li
或是 div li { color: red} (这样的意思也是选定div里面的li标签)
*/
备注 :
2. 子选择器
子元素选择器只会选择最近一级子元素
元素1 > 元素2{
}
div >p { 样式
}
/* 选择div里面最近一级p元素*/
备注:
3.并级选择器
并级选择器可以选择多组标签,同时为他们定义相同的样式
通常用於集体声明
并级选择器用法:
将各选择器通过,连接而成,任何形式的选择器皆可使用
元素1,元素2{样式声明}
ex:
ul,div{ color: red}
ex:
div,table,ul,li{color:blue}
四个标签内所有的字体颜色都改为蓝色
4.伪类选择器
伪类选择器书写的特点是用冒号:表示比如:hover , :first-child
连接伪类选择器
a:link 选择未被访问的连接
a:visited 选择已被访问的连接
a:hover 选择滑鼠指针位於其上的连接
a:active 选择活动连接(滑鼠按下未弹起的
/* a 是标签选择器 所有的连接 */
a{
color : gray;
}
/* :hover是连接伪类选择器 鼠标经过*/
a:hover{
color: red;
}
:force 伪类选择器
用於选取获得焦点的表单元素
焦点就是光标,一般情况<input>
类表单元素才能获取
所以此选择器主要针对於表单元素
input:focus{
background-color:yellow;
}
DesignMode 让整个网站都是你的 textarea。 今天要介绍的 API 非常简单明了,...
今天要来介绍类别实作介面, 介面型别我觉得很大的一个优势是可以重复使用, 因此我们就来说说这个吧。 ...
今天来把剩下的阵列说完 最後说到的阵列就是二维阵列跟多维阵列 二维阵列其实很简单,就只是多一维阵列一...
承上一篇,我打算在 App 的 didFinishLaunch 就发动拉取全台股上市日成交资料,并在...
Vue-cli 专案基本架构 favicon.ico:仅用於 index.html index.ht...