[2016-01-12]CSS3选择器

最新推荐文章于 2024-07-24 21:48:20 发布

Helen嗨

最新推荐文章于 2024-07-24 21:48:20 发布

阅读量464

点赞数 1

分类专栏：前端技术 HTML/CSS 文章标签： css3 属性选择器

本文链接：https://blog.csdn.net/Cathy731946/article/details/50502524

版权

前端技术同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

HTML/CSS

4 篇文章 0 订阅

订阅专栏

（IT小白菜一棵，初学IT知识~望各位大神不吝赐教，谢谢）

最近刚开始学习有关css3的内容（注：整理自慕课-十天精通CSS3）

属性选择器
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>属性选择器</title>
<style>
    a[class^=column]{
        background:red;
        color:#fff;
    }
    a[href$=doc]{
        background:green;
        color:#fff;
    }
    a[title*=box]{
        background:blue;
        color:#fff;
    }
</style>
</head> 
<body>
<a href="##" class="columnNews">我的背景想变成红色</a>
<a href="##" class="columnVideo">我的背景想变成红色</a>
<a href="##" class="columnAboutUs">我的背景想变成红色</a><br/>
<a href="1.doc">我的背景想变成绿色</a>
<a href="2.doc">我的背景想变成绿色</a><br/>
<a href="##" title="this is a box">我的背景想变成蓝色</a>
<a href="##" title="box1">我的背景想变成蓝色</a>
<a href="##" title="there is two boxs">我的背景想变成蓝色</a>
</body>
</html>
结构性伪选择器

1. :root 选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是 <html> 。

2. :not 选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。就拿form元素来说，比如说你想给表单中除submit按钮之外的input元素添加红色边框，CSS代码可以写成：
form {
  width: 200px;
  margin: 20px auto;
}
div {
  margin-bottom: 20px;
}
input:not([type="submit"]){
  border:1px solid red;
}
3. :empty 选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。
HTML代码
div {
  min-height: 30px;
}

div:empty{
  border: 1px dashed green;
}
CSS代码
div {
  min-height: 30px;
}

div:empty{
  border: 1px dashed green;
}

Helen嗨

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[2016-01-12]CSS3选择器

（IT小白菜一棵，初学IT知识~望各位大神不吝赐教，谢谢）最近刚开始学习有关css3的内容（注：整理自慕课-十天精通CSS3）属性选择器属性选择器 a[class^=column]{ background:red; color:#fff; } a[href$=doc]{ background:green
复制链接

扫一扫

专栏目录