CSS入门之选择器

CSS入门——选择器

什么是CSS，有什么作用，？

CSS(Cascading Style Sheets) 是用来为网页添加样式的代码。网页的内容是由HTML组成，它是基本的结构，为了呈现更好视觉效果，需要添加样式对其进行美化，这就需要用到CSS。

想要通过CSS为网页添加样式，首先需要对HTML中的元素进行选择，这就需要用到CSS选择器，然后进行布局和样式设置，从而实现网页设计稿的效果。

CSS选择器常见的有几种？

答：基础选择器、组合选择器、属性选择器、伪类选择器、伪元素选择器

• 通用选择器

通过*号，可以选择页面所有的元素。

* {
    box-sizing: border-box;
  }

• 元素选择器
  通过元素名，如div,p,ul等，进行选择页面中相应的元素。

html {
       color:black;
     }

• 类选择器
  通过类名选择相应的元素。

<div class="box1">盒子1</div>

.box1 {
        font-weight: bold;
      }

• ID 选择器

<h1 id="notification">通知</h1>

#notification {
                font-size: 24px;
                }

• 属性选择器

---

01 [attr]

[attr] 选择包含 attr 属性的所有元素，不论 attr 的值为何。

[disabled] {
  cursor: not-allowed;
}

02 [attr=val]

[attr=val] 仅选择 attr 属性被赋值为 val 的所有元素。

[data-color="gray"] {
  color: #ccc;
}

03 [attr~=val]

[attr~=val] 仅选择 attr 属性的值（以空格间隔出多个值）中有包含 val 值的所有元素，比如位于被空格分隔的多个类（class）中的一个类。

04 [attr*=val]

[attr*=val] 选择 attr 属性的值中包含字符串 val 的元素。

[title*="fuck"] {
  display: none;
}

05 [attr^=val]

[attr^=val] 选择 attr 属性的值以 val 开头（包括val）的元素。

[href^="http://"] {
  background-color: #f0ad4e;
}

06 [attr$=val]

[attr$=val] 选择 attr 属性的值以 val 结尾（包括val）的元素。

[src$="gif"]{
  border: 1px solid #ccc;
}

07 [attr|=val]

[attr|=val] 选择 attr 属性的值以 val（包括val）或 val-开头的元素（-用来处理语言编码）。

[lang|="zh"] {
  font-family: '微软雅黑';
}

• 伪类

a:link { ... }
a:visited { ... }
a:hover { ... }
a:active { ... }
li:first-child { ... }
li:last-child { ... }
body :not(p) { ... }
p:not(.warning) { ... }

• 伪元素

---

01 ::after

.clearfix::after {
  content: '';
  clear: both;
  display: block;
}

02 ::before

.happy::before {
  content: '
标签：匹配,attr,val,元素,选择器,CSS,入门	

来源： https://www.cnblogs.com/ajimide8760/p/16584606.html