CSS选择器

元素选择器

p {
  color: red;
}

类选择器

.my-class {
  font-size: 18px;
}

<p class="my-class">这是一个段落。</p>

 ID选择器

#my-id {
  background-color: blue;
}

<div id="my-id">这是一个 div。</div>

后代选择器

ul li {
  color: green;
}

<ul>
  <li>列表项 1</li>
  <li>列表项 2</li>
</ul>

相邻兄弟选择器

h2 + p {
  font-size: 16px;
}

<h2>标题</h2>
<p>这是一个段落。</p>

通用选择器

* {
  margin: 0;
  padding: 0;
}

多种元素选择器

h1, h2, h3 {
  color: purple;
}

<h1>大标题</h1>
<h2>中标题</h2>
<h3>小标题</h3>

子元素选择器

div>p{ 
    background-color:yellow;
}

属性选择器

input[type="text"] {
  border: 1px solid gray;
}

css伪类

• :link伪类：选择所有未访问链接

a:link{ 
    background-color:yellow;
}

• :hover伪类：当鼠标悬停在元素上时，改变元素的样式

a:hover {
  color: red;
}

• :active伪类：当元素被激活（例如点击鼠标）时，改变元素的样式

button:active {
  background-color: green;
}

• :visited伪类：当链接已被访问时，改变链接的样式

a:visited {
  color: purple;
}

• :focus伪类：当元素获得焦点（例如点击或使用Tab键）时，改变元素的样式

input:focus {
  border: 2px solid blue;
}

• :not伪类：选择除了指定元素以外的所有元素，改变它们的样式

li:not(.special) {
  color: #333;
}

• :enabled，:disabled，:checked伪类：选择已启用/被禁用/被选中的表单元素，改变它们的样式

input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

• :nth-of-type伪类：选择作为父元素第n个相同类型子元素的元素，改变其样式

ul li:nth-of-type(odd) {
  background-color: #eee;
}

• :empty伪类：选择没有任何子元素的元素，改变其样式

div:empty {
  border: 2px solid red;
}

• :first-child伪类：选择作为其父元素的第一个子元素的元素，改变其样式

ul li:first-child {
  font-weight: bold;
}

• :last-child伪类：选择作为其父元素的最后一个子元素的元素，改变其样式

ul li:last-child {
  font-style: italic;
}

• :first-line伪类：选择每一个某个元素的第一行

p:first-line{ 
	background-color:yellow;
}

• :before，:after伪类：在每个某个元素之前/后插入内容

p:before{ 
	content:"Read this: ";
}

• :lang伪类：选择一个lang属性的起始值="it"的所有<p>元素

p:lang(it){ 
	background:yellow;
}

• ~，^=，$=，*=伪类：每一个/以xx开头/以xx结尾，包含xx
• :first-of-type，:last-of-type，:only-of-type伪类：选择每个p元素是其父级的第一个/最后/唯一p元素

p:first-of-type{
    background:#ff0000;
}

• :only-child(n)伪类：选择每个p元素是其父级的第n个子元素

p:only-child{
    background:#ff0000;
}

• :nth-of-type(n)伪类：选择每个p元素是其父级的第n个p元素

p:nth-of-type(2){
	background:#ff0000;
}

• :root：选择文档的根元素

:root{
    background:#ff0000;
}

• :target：选择当前活动的#news元素（包含该锚名称的点击的URL）

:target{
    border: 2px solid #D4D4D4;
    background-color: #e5eecc;
}

• :read-write，:read-only：用于匹配可读及可写/设置 "readonly"（只读） 属性的元素

input:read-write{ 
	background-color: yellow;
}

• :required：用于匹配设置了 "required" 属性的元素

input:required{ 
	background-color: yellow;
}

• :valid：用于匹配输入值为合法的元素

input:valid{
    background-color: yellow;
}

• :invalid：用于匹配输入值为非法的元素

input:invalid{ 
    border:2px solid red;
}