CSS3选择器

2019-02-25 本文已影响3人夜之海澜

属性选择器

在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;
}

上一篇下一篇

猜你喜欢

热点阅读