CSS学习笔记_CSS复合选择器

本文内容：
CSS复合选择器：1. 什么是复合选择器2. 后代选择器3. 子代选择器4. 并集选择器5. 伪类选择器5.1 链接伪类选择器5.2 :focus选择器6. 复合选择器总结

1、什么是复合选择器

在CSS中,可以根据选择器的类型把选择點分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。

复合选择器可以更准确、更高效的选择目标元素(标签)
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的
常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

2、后代选择器

又称为包含选择器，可以选择父元素里面的子元素

如：

    <ul><li>我是li</li></ul><ol><li>我也是li</li><li><a href="#"></a></li></ol>

如何修改ul中li的样式呢？使用后代选择器代码如下：

ul li {color: red;
}

修改 ol 中 li 中 a 标签的样式：

ol li a {color: black;
}

注意：

元素与元素之间要用空格隔开

3、子代选择器

子元素选择器只能选择元素的最近一级子元素

语法：

元素1>元素2 {}

例如：

<style>.nav a {        /* 这么写的话是后代选择器，两个a标签样式都会变*/color: black;}.nav>a {     /* 这么写就只会改变第一个a标签中的样式*/color: black;}
</style><body><div><a href="#">这是儿子</a><p><a href="#">这是孙子</a></p></div>
</body>

4、并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式，任何形式的选择器都可以作为并集选择器的一部分。

语法：

元素1,元素2 {    /* 用英文逗号隔开*/}

5、伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第一个，第n个元素。

其最大的书写特点是用冒号表示。

5.1 链接伪类选择器

写法	意义
`a:link`	选择所有未被访问的链接
`a:visited`	选择所有已被访问过的链接
`a:hover`	选择鼠标放在其上的链接
`a:active`	选择活动链接（鼠标按下未松开的链接）

例如：

<style>a:link {color: black;text-decoration: none;}a:visited {color: red;}
</style>
/*以上代码可以实现: 当鼠标点击过链接时，链接会变成红色*/<body><a href="http://www.baidu.com" target="_blank">百度一下</a>
</body>

又如：

<style>a:hover {color: blue;}
</style>
/*以上代码可以实现: 当鼠标放在链接上时，链接会变成蓝色*/<body><a href="http://www.baidu.com" target="_blank">百度一下</a>
</body>

5.1.1 链接伪类选择器使用注意事项

为了确保生效，代码务必按照 link visited hover active的顺序书写。
因为 a 链接在浏览器中都有默认样式，所以在实际工作中都会给链接单独指定样式。

5.1.2 链接伪类在实际工作中的一般写法

a {color: gray;text-decoration: none;
}
a:hover {color: blue;text-decoration: underline;
}

5.2 `:focus`伪类选择器

:focus伪类选择器用于选择获得焦点的表单元素。

焦点就是光标，一般情况<input>类表单元素才能获取，所以这个选择器也一般是针对表单元素。

input:focus {}

6、复合选择器总结

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择后代元素	可以是子孙后代（多级）	较多	空格隔开
子代选择器	用来选择最近一级元素	只能选择最近一级	较少	大于号连接
并集选择器	选择某些可以使用相同样式的元素	可以用于集体声明	较多	英文逗号连接
链接伪类选择器	选择不同状态的链接	跟链接相关	较多	重点记住`a{}` `a:hover`在实际开发中的写法
`:focus`选择器	选择获得光标的表单	跟表单相关	较少	`input:focus`记住这个写法

返回目录：笔记首页

CSS学习笔记 | CSS复合选择器相关推荐

前端小白的css学习笔记——简介、选择器、字体属性和文本属性（最后有思维导图哦）
简介 css是层叠样式表的(Casading Style Sheets)的简称.有时会成为css样式表或级联样式表.用来美化HTML,让网页更漂亮,布局更简单.使结构(HTML)和样式(css)相 ...
CSS学习笔记--CSS语法与选择器
导语 Css用于控制网页的样式和布局,指层叠样式表(Cascading Style Sheets),定义如何显示HTML的元素,这个样式通常存储在样式表中.在工作中通常使用的外部样式表,外部样式表 ...
CSS 学习笔记——CSS Selector
CSS1 中定义的选择器类型选择器用于选择指定类型的元素(其实他就是 html 标签选择器),常见用法如下: body {/*对 body 元素定义样式*/ }body,div {/*同时选择多种 ...
CSS学习笔记｜MDN-CSS选择器
记录在MDN学习CSS中的一些个人笔记. 选择器种类通配选择器或叫全局选择器.选中所有元素. * {} 标签.类.ID选择器标签选择器.选择所有的 h1 元素 h1 { } 类选择器.选择类名有 ...
CSS学习笔记3：选择器及优先级
CSS选择器的类型: 标签选择器类选择器 ID选择器全局选择器群组选择器后代选择器 1.标签选择器: 以HTML的标签作为选择器,凡是选择了一个标签,那么所有这个标签的内容都是用了css样式 ...
CSS学习笔记 | CSS背景
CSS背景本文内容: CSS背景:1. 背景颜色2. 背景图片3. 背景平铺4. 背景图片位置5. 背景图片固定(背景附着)6. 背景复合写法7. 背景色半透明8. 背景总结通过CSS背景属性,可 ...
2016/8/2 CSS学习笔记 css 字间距、CSS字体间距、css 字符间距
1.text-indent设置抬头距离css缩进即对,对应div设置css样式text-indent : 20px; 缩进了20px 2.letter-spacing来设置字与字间距_字符间距离,字 ...
CSS学习笔记（详细，不定期更新）
CSS 学习笔记 CSS书写规范顺序布局位置属性(position, top, right, z-index, display, float等) 自身大小盒子模型(width, height, p ...
css中怎么加入立体模型,CSS学习笔记二：css 画立体图形
继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: ...
HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...

CSS学习笔记 | CSS复合选择器

CSS学习笔记_CSS复合选择器

1、什么是复合选择器

2、后代选择器

3、子代选择器

4、并集选择器

5、伪类选择器

5.1 链接伪类选择器

5.1.1 链接伪类选择器使用注意事项

5.1.2 链接伪类在实际工作中的一般写法

5.2 `:focus`伪类选择器

6、复合选择器总结

返回目录：笔记首页

CSS学习笔记 | CSS复合选择器相关推荐

最新文章

热门文章

CSS学习笔记 | CSS复合选择器

CSS学习笔记_CSS复合选择器

1、什么是复合选择器

2、后代选择器

3、子代选择器

4、并集选择器

5、伪类选择器

5.1 链接伪类选择器

5.1.1 链接伪类选择器使用注意事项

5.1.2 链接伪类在实际工作中的一般写法

5.2 :focus伪类选择器

6、复合选择器总结

返回目录： 笔记首页

CSS学习笔记 | CSS复合选择器相关推荐

最新文章

热门文章

5.2 `:focus`伪类选择器

返回目录：笔记首页