CSS前端入门(第二天)选择器

后代选择器

元素1 元素2 {样式说明}

子选择器

子选择器(子元素选择器)只能选作为某元素的最近一级子元素,简单理解就是选亲儿子元素
元素1>元素2 {样式说明}

  • 元素1和元素2中间用大于号
  • 元素1是父级,元素2是子级,最终选择是元素2
  • 元素2必须是亲儿子
DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子元素选择器title>
    <style>
        .nav>a {
            color: red;
        }
    style>
head>

<body>
    <div class="nav">
        <a href="#">我是儿子a>
        <p>
            <a href="#">我是孙子a>
        p>
    div>
body>

html>

CSS前端入门(第二天)选择器_第1张图片

并集选择器

并集选择器可以选择多组标签,同时为他们定义相同的样式。通常用于集体声明。
并集选择器是各选择器通过英文逗号(,)连接而成,任何形式的选择器都看作为并集选择器的一部分
元素1 ,元素2 {样式说明}
上述语法表示元素1和元素2

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>并集选择器title>
    <style>
        /* 要求1:把熊大熊二改为粉色 */
        /* div,
        p {
            color: pink;
        } */
        /* 要求2:请把熊大和熊二改为粉色,还有小猪佩奇一家也改为粉色 */
        
        div,
        p,
        .pig li {
            color: pink;
        }
    style>
head>

<body>
    <div>熊大div>
    <p>熊二p>
    <span>光头强span>
    <ul class="pig">
        <li>小猪佩奇li>
        <li>猪爸爸li>
        <li>猪妈妈li>
    ul>
body>

html>
要求1效果

CSS前端入门(第二天)选择器_第2张图片

要求2效果

CSS前端入门(第二天)选择器_第3张图片

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素
伪类选择器书写最大的特点是用冒号(:)表示,比如:hover、:first-child。

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

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复合选择器之链接伪类选择器title>
    <style>
        /* 1.未访问的链接 a:link  把没有点击过的(访问过的)链接选出来*/
        
        a:link {
            color: #333;
            text-decoration: none;
        }
        /* 2. a:visited 把点击过的(访问过的)链接选出来*/
        
        a:visited {
            color: orange;
        }
        /* 3. a:hover选择鼠标经过的那个链接 */
        
        a:hover {
            color: skyblue;
        }
        /* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接*/
        
        a:active {
            color: green;
        }
    style>
head>

<body>
    <a href="#">小猪佩奇a>
body>
html>
链接伪类选择器注意事项

1.为了确保生效,请按照LVHA的顺序声明:link-:visited-:hover-:active
2. 因为a链接在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式

focus伪类选择器

focus伪类选择器用于选取获得焦点的表单元素
焦点就是光标,一般情况类表单元素才能获取,因此这个选择器也主要针对表单元素来说。

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>focus伪类选择器title>
    <style>
        /* 把获得光标的input表单元素选取出来 */
        
        input:focus {
            background-color: pink;
        }
    style>
head>

<body>
    <input type="text">
    <input type="text">
    <input type="text">
body>

html>

在这里插入图片描述

显示模式

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

元素显示模式就是元素(标签)以什么方式进行显示,比如

自己独占一行,比如一行可以放多个
HTML元素一般分为块元素和行内元素两种类型。

块元素

块级元素的特点:

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

注意

  1. 文字类的元素内不能使用块级元素
  2. 标签主要用于存放文字,因此

    里面不能方块级元素,特别是不能放

  3. 同理,

    ~

    等都是文字类块级标签,里面也不能放其他块级元素

行内元素(内联元素)

行内元素的特点:

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

行内块元素

,他们同时具有块元素和行内元素的特点
行内块元素的特点:

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

元素显示模式转换

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

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素显示模式转换title>
    <style>
        /*转换为块元素*/
        
        a {
            width: 150px;
            height: 50px;
            background-color: pink;
            display: block;
        }
        /* 转换为行内元素 */
        
        div {
            /* 转换后宽高不起作用 */
            width: 300px;
            height: 100px;
            background-color: purple;
            display: inline;
        }
        /* 转换为行内块元素 */
        
        span {
            width: 300px;
            height: 30px;
            background-color: skyblue;
            display: inline-block;
        }
    style>
head>

<body>
    <a href="#">链接1a>
    <a href="#">链接2a>
    <div>块级元素1div>
    <div>块级元素2div>
    <span>行内元素转换为行内块元素span>
    <span>行内元素转换为行内块元素span>
body>

html>

CSS前端入门(第二天)选择器_第4张图片

小米左侧导航栏仿写

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米左侧导航栏仿写title>
    <style>
        /*1. a链接转换为块元素*/
        
        a {
            width: 230px;
            height: 40px;
            background-color: #55585a;
            display: block;
            font-size: 14px;
            color: #fff;
            text-decoration: none;
            text-indent: 2em;
            line-height: 40px;
        }
        /* 2. 鼠标经过链接变换背景色 */
        
        a:hover {
            background-color: #ff6700;
        }
    style>
head>

<body>
    <a href="#">手机 电话卡a>
    <a href="#">电视 盒子a>
    <a href="#">笔记本 平板a>
    <a href="#">出行穿戴a>
    <a href="#">智能 路由器a>
    <a href="#">健康 儿童a>
    <a href="#">耳机 音响a>
body>

html>

CSS前端入门(第二天)选择器_第5张图片

单行文字垂直居中

解决方案:
让文字的行高等于盒子的高度,就可以让文字在当前盒子内垂直居中

你可能感兴趣的:(css,html,前端,前端,css,html)