Day 06 CSS <复合选择器>

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标签)
*/

备注 :

  • 也可加class 使用.div il li a选择器

2. 子选择器

子元素选择器只会选择最近一级子元素

元素1 > 元素2{
}
div >p { 样式
}
/* 选择div里面最近一级p元素*/

备注:

  • 元素1和元素2中间用>隔开
  • 元素1是父级 元素2是子级 最终选择的是元素2
  • 元素2必须是亲儿子其他的都不归此选择器管

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;
}

<<:  Day1 30天计画总览

>>:  Day 1:为什麽工程师要建立自己的技术部落格?

那些被忽略但很好用的 Web API / DesignMode

DesignMode 让整个网站都是你的 textarea。 今天要介绍的 API 非常简单明了,...

Day16-TypeScript(TS)在类别(Class)实作介面(Interface)

今天要来介绍类别实作介面, 介面型别我觉得很大的一个优势是可以重复使用, 因此我们就来说说这个吧。 ...

[iT铁人赛Day9]JAVA阵列(下篇)

今天来把剩下的阵列说完 最後说到的阵列就是二维阵列跟多维阵列 二维阵列其实很简单,就只是多一维阵列一...

D32 - 用 Swift 和公开资讯,打造投资理财的 Apps { 台股申购功能扩充,算出价差.3 }

承上一篇,我打算在 App 的 didFinishLaunch 就发动拉取全台股上市日成交资料,并在...

[30天 Vue学好学满 DAY4] Vue-cli 基本架构

Vue-cli 专案基本架构 favicon.ico:仅用於 index.html index.ht...