css 第三天

11. 属性选择器:属性选择器可以根据元素的属性及属性值来选择元素
    [属性名]：包含于指定属性名称的元素
    [属性名~=值]:属性名的值 包含 指定值的元素
    [属性名^=值]:属性名的值 以指定值为开头 的元素
    [属性名$=值]:属性名的值 以指定值为结尾 的元素
    ps: 属性如果是数组，可以以空格隔开

// style
div.content[title] {
  font-weight:bold;
}
input[name=user] {
  boackground-color:#999;
}
div[class~=1] {
  background-color:#5aff29;
}
// body
<div class="content box1" title="title">content1</div>
<div class="content box2">content2</div>
<form action=">
  <input type="text" name="account">
  <input type="text" name="user">

</form>

12. 关系选择器

      
      
        
    
          子元素1 兄弟孙元素
    
          不相邻兄弟元素 孙元素
    
          跟第一个比，不是相邻兄弟元素 孙元素
        
      

    后代选择器：可以选择作为某元素后代的元素
    ps：需要用空格把两个属性隔开

    父子关系选择器：只能选择为某一元素子元素的元素
    ps：用>表示只选择儿子。孙子等是不选择的

    兄弟关系选择器：相邻兄弟选择器，可以选择紧接在另一个元素后的元素，且二者有相同父元素
    ps:用+表示兄弟选择

13. css 伪类选择器

    伪类允许出现在选择器的任何位置，而伪元素只能跟在选择器的最后一个简单选择器后面
    :before/:after/:first-letter/:first-line 可以单冒号，单尽量双冒号。
    ::selection/::placehoder/::backdrop

<!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>Document</title>
    </head>
    <style>
        /* 后代选择器 */
        /* h1 strong {
            color: blue;
        } */
        /* 父子选择器 */
        /* h1 > strong {
            color: blue;
            background-color: black;
        } */
        /* 兄弟选择器 */
        strong + span {
            color: red;
            background-color: blueviolet;
        }
    </style>
    <body>
        <h1>
            <strong>子元素1 </strong><span>兄弟<strong>孙元素</strong></span
            ><br />
            <strong
                >不相邻兄弟元素 <span><strong>孙元素</strong></span></strong
            ><br />
            <strong
                >跟第一个比，不是相邻兄弟元素 <strong></strong><span>孙元素</span></strong></strong
            >
        </h1>

    <style>
      p:first-letter {
        font:30px 黑体;
        color:blueviolet;
        text-indent:2em;
      }
      p:before {
        content:'&lg;'
      }
      p::after {
        content:'.....'
      }
    </style>

    <p>大是大非阿<br>蒂芬双方都</p>
    </body>
</html>