css选择器

css两大重点

1. 属性
   通过属性的复杂叠加才能做出漂亮的网页

• css选择器
  通过选择器找到对应的标签设置样式

• 标签选择器

<div>div1</div>
<div>div2</div>

div{
  color: red;
}

• 类选择器

<p class="high">第一段文件</p>

.high {
  color: red;
}

• id选择器

<p id="first">ssssssss</p>

#first{
  color：red;
}

• 并列选择器(逻辑或)

<div class="high">sssssss</div>

div , .high {
  color: red;
}

• 复合选择器(逻辑与)

<div class="high">sdasdfasf</div>
<div id="first">asdfasdf</div>

div.high {
  color: red;
}
div#first{
  color: red;
}

• 后代选择器

<div>
      <p>div里面的p</p>
      <span>
         <p>div里面的span里面的p</p>
      </span>
</div>

div p {
    color：red；
}

• 直接后代选择器

<div>
      <p>div里面的p</p>
      <span>
         <p>div里面的span里面的p</p>
      </span>
</div>

div > p {
  color: red;
}

• 相邻兄弟选择器

<div>sssssss</div>
<p>与div相邻的p</p>

div + p {
  color：red;
}

• 属性选择器
  单属性

<div name="jack">1111111</div>

div[name] {
  color: red;
}

多属性

<div name="jack" age="20">22222</div>

div[name][age] {
  color: red;
}

属性+属性值

div[name="jack"] {
  color: red;
}

• 伪类

<style>
    div:hover {
        background-color: green;
    }
</style>

<style>
      input:focus{
        outline: none;
        width: 500px;
        height: 180px;
        border: 10px double yellow;
      }
</style>

• 伪元素

  
  无标题.png