属性选择器
在CSS2中引入了一些属性选择器，而CSS3在CSS2的基础上对属性选择器进行了扩展，新增了三个属性选择器，使得属性选择器有了通配符的概念。
1550816925984.jpg
代码示例如下：
HTML代码
<a href="xxx.pdf">我链接的是PDF文件</a>
<a href="#" class="icon">我类名是icon</a>
<a href="#" title="我的title是more">我的title是more</a>
CSS代码
/* 以icon开头的 */
a[class^=icon]{
background: green;
color:#fff;
}
/* 以pdf结尾的 */
a[href$=pdf]{
background: orange;
color: #fff;
}
/* 以包含more的 */
a[title*=more]{
background: blue;
color: #fff;
}
结构性伪类选择器
-
root
：root选择器，即根选择器，匹配到的始终是<html> -
not
即否定选择器，选择除某个元素之外的所有元素
/* 比如给表单中除submit按钮之外的input元素添加红色边框 */
input:not([type="submit"]){
border:1px solid red;
}
- empty
用来选择没有一点内容的元素。
/* 比如将没有任何内容的段落隐藏掉 */
p:empty {
display: none;
}
- target
用来匹配页面的URL的某个标识符的目标元素。
示例代码如下:点击Brand，将p标签背景色置为橙色，且字体颜色为白色
<body>
<div class="menuSection" id="brand">
<h2><a href="#brand">Brand</a></h2>
<p>content for Brand</p>
</div>
</body>
#brand:target p {
background: orange;
color: #fff;
}
- first-child
选择父元素的第一个子元素，子元素！！！
/* 选择ol下的第一个子li元素 置为红色 */
ol > li:first-child{
color: red;
}
- last-child
与 first-child正好相反 - nth-child(n)
定位父元素的一个或者多个特定子元素，n可以是整数，也可以是表达式，但是n的起始值始终是1，如果传0，则选择不到任何元素。 - nth-last-child(n)
与 nth-child(n)正好相反
CSS3选择器（想不到具体的名字！！）
- first-of-type
用来定位一个父元素下的某个类型的第一个子元素
/* 选择wrapper下的第一个子p元素 */
.wrapper > p:first-of-type {
background: orange;
}
- nth-of-type(n)
用来定位一个父元素下的某个类型的n个子元素 - last-of-type
选择父元素下的某个类型的最后一个子元素。 - nth-last-of-type(n)
选择父元素下的某个类型的最后几个子元素。 - only-child
选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。
/* p元素的父元素只有一个子元素，且这个子元素是p */
.post p:only-child {
background: orange;
}
- only-of-type
表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。
/* p元素的父元素只有一个子元素，且这个子元素是p */
.post p:only-child {
background: orange;
}
网友评论