CSS基本语法（二）

CSS基本语法（二）

八、CSS复合选择器

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

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

1、后代选择器**

后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内存标签写在后面，中间用空格分离。但标签发生嵌套时，内层标签就成为外层标签的后代。

元素一 元素二{样式声明}

ol li {
   color: red;}  /* 选择li标签 */

元素一和元素二中间用空格隔开

元素一是父级，元素二是子集，最终选择的是元素二

元素二可以是子级，也可以是孙子级等，只要是元素一的后代即可

ol li p {
    color: pink}  /* 选择p标签 */

元素一和元素二可以是任意的标签选择器

2、子选择器

子元素选择器（子选择器）只能作为某元素的最近一级子元素。简单理解就是选亲儿子元素

元素一 > 元素二{样式声明}

表示选择元素一里面的所有直接后代（子元素）元素二

div > p {
   text-decoration: none;}  /* 选择p标签 */

元素一和元素二中间用大于号隔开

元素一是父级，元素二是子级，最终选择的是元素二

元素二必须是亲儿子，其孙子、重孙之类都不归它管

3、并集选择器**

并集选择器可以选择多组标签，同时为他们定义相同的样式。通常被用于集体声明

并集选择器是各选择器通过逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分

元素一, 元素二 { 样式声明 }

表示选择元素一和元素二

ul, div {
   font-size: 20px;} /* 选择ul和div标签 */ 

元素一和元素二中间用逗号隔开

逗号可以理解为和的意思

并集选择器同常用于集体声明

4、伪类选择器

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

伪类选择器书写最大的特点是用冒号（:）表示，比如：:hover, :first

链接伪类选择器

a:link  /* 选择所有未被访问的链接*/
a:visited  /* 选择所有已被访问的链接 */
a:hover  /* 选择鼠标指针位于其上的链接 */
a:active  /* 选择活动的链接（鼠标按下未弹起的链接） */

为了确保生效，要按照上面顺序书写

因为a链接在浏览器具有默认样式，所以我们实际工作中都需要给链接单独指定样式

/* a是标签选择器 */
a {
   
    color: gray;
}
/* :hover是链接伪类选择器，鼠标经过是变色 */
a: hover {
   
    color: red;
}

:focus伪类选择器

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

焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对与表单元素来说

input:focus {
   
    background-color: yellow;
}

总结

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

九、CSS的元素显示样式

1、概念

作用：网页得标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的页面

元素的显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，一行可以有多个<span>

HTML元素一般分为块元素和行内元素两种类型

2、块元素

常见的块元素有<h1>-<h6>/<p>/<div>/<ul>/<ol>/<li>等，其中<div>标签是最典型的块元素

块级元素的特点

1. 比较霸道，自己独占一行
2. 高度、宽度、外边距以及内边距都可以控制
3. 宽度默认是容器（父级宽度）的100%
4. 是一个容器及盒子，里面可以放行内或者块元素

文字类的元素不能使用块级元素

<p>标签主要用于存放文字，因此<p>标签里面不能放块级元素，特别是不能放<div>

同理<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

3、行内元素

常见的行内元素有<a>/<strong>/<b>/<em>/<i>/<del>等，其中<span>标签是最典型的行内元素，有的地方也将行内元素称为内联元素

行内元素的特点

1. 相邻行内元素在一行上，一行可以显示多个
2. 高、宽直接设置是无效的
3. 默认宽度就是它本身的宽度
4. 行内元素只能容纳文本或其他行内元素

链接里面不能再放链接

特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块极模式最安全

4、行内块元素

在行内元素中有几个特殊标签——<img>/<input>/<td>，它们可以具有块元素和行内元素的特点

行内块元素的特点

1. 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）
2. 默认宽度就是它本身内容的宽度
3. 高度、行高、外边距以及内边距都可以控制（块级元素特点）

5、元素显示模式的转换

特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另外一种模式的特性比如想要增加链接<a>的触发范围

• 转换为块元素

  display: block;

  a {