* 所有标签 标签名称 所有同名的标签
#id 指定此id的标签
.className 含有此className的元素
A B 后代选择器
A>B 子代选择器
:nth-child(n) 第n个标签 支持 2n+1 3n+2 等公式 支持负值?
:nth-of-type(n) 第n个同类标签 冒号前需加上标签名
:nth-last-child(n)
:nth-last-of-type(n)
:first-letter 首字选择器
:last-child 最后一个子标签
:only-child 只有一个子标签
:only-of-type 类型只有一个
~ 后面所有的同级标签
+ 相邻选择器 后面一个
, 同时定义多个样式
选择某个标签前面的技巧
:not(selector) 选择器匹配非指定元素/选择器的每个元素
:nth-of-type(-n+4)
:nth-child(-n+3)
筛选器：
html：
<body>
<header>
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
<section>5</section>
<section>6</section>
<section>7</section>
<section>8</section>
<section>9</section>
页头
<!--<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>-->
</header>
<p>ppp</p>
<p>cccc</p>
<section>section</section>
</body>css：
body{
background-color: #333;
color: white;
}
/* *页面上的所有元素*/
/*header>*:nth-child(2n+1){
color: yellow;
}*/
/*section:nth-child(2n+1){
color: red;
}
section:last-child{
color: yellow;
}*/
header~p{
color: blue;
}
/*header>section:nth-child(-n+2){
color: salmon;
}*/
section:not(:nth-last-of-type(3)){
color: rebeccapurple;
}空标签选择器：
html：
<body>
<span>古人云</span>
<span></span>
<span>gurenyun</span>
<div></div>
<div>古人云</div>
</body>css：
:empty:before{
content: '可以放上任意文字' ',在加一些文字';
}
span>:empty:before{
content: '完了'；
}
span>:empty:after{
content: '继续文字'url(Refresh.png);
}
/*使用 :empty 可以选择空标签*/属性选择器：
html：
<body>
<a href="https://www.baidu.com" target="_blank" title="社交，新闻">百度</a>
<a href="https://www.qq.com" title="社交，即时聊天，新闻">QQ</a>
<a href="https://www.sina.com.cn" zhiyou100=“996699”>新浪</a>
<a href="https://www.taobao.com" title="购物，分享">淘宝</a>
</body>css：
a{
text-decoration: none;
}
/*属性指定值*/
/*a[title='购物，分享']{
text-decoration: underline;
}*/
/*属性以指定的值开头*/
a[title^=购]{
text-decoration: underline;
}
/*属性以指定的值结尾*/
/*a[title$=闻]{
text-decoration: line-through;
}*/
/*属性包含指定的值*/
a[zhiyou100*='6']{
font-weight: bold;
font-style: italic;
}
/*a[title~='新闻']{
font-weight: bold;
font-style: italic;
}*/
a[target]:visited,a[target]:link{
color: red;
}演示：
筛选器
空标签选择器
属性选择器