CSS和CSS3选择器

这一篇是对精通CSS:高级Web标准解决方案第二章的学习总结.
将会有以下内容:
(1).常用的选择器.
(2).高级选择器
(3).新的CSS3选择器

最常用的选择器类型是类型选择器和后代选择器.类型选择器用来寻找特定类型的元素,比如段落或者标题元素.有时候也被称为元素选择器或简单选择器.

p{color:black}
h1{font-weight:bold}

后代选择器可用了来寻找特定元素或元素组的后代.另外还有ID选择器和类选择器.ID选择器用#替代,类选择器用.替代.

#id{}
<p><span id="id">Harry Knowles</span></p>
.class{}
<p><span class="class">Harry Knowles</span></p>

通用选择器

可能是所有选择器中最强大却最少使用的.作用就像通配符,它匹配所有的元素.用型号代替.最常用的操作就是去除浏览器的padding和margin

*{margin: 0px;padding: 0px;
}

子选择器

后代选择器可以选择一个元素的所有后代,而子选择器只选择元素的直接后代,即子元素.

<div id="mu"><p>Harry Knowles</p><div><p>Harry Knowles</p></div>
</div>//对于以上的代码,写成子选择器则最终背景颜色变化的只有第一个p标签.
#mu>p{margin-top: 10px;background-color: #cccc00;
}
//但是写成这样,也就是后代选择器,两个都有效
#mu p{margin-top: 10px;background-color: #cccc00;
}

相邻同胞选择器 可以定位同一个父元素下某个元素之后的元素

直接看代码理解

<h2>这是一个标题</h2><p>Harry Knowles</p>
<p>Harry Knowles</p>对于以上的代码如何用相邻同胞选择器让第一个p标签变色呢.h2 + p{margin-top: 10px;background-color: #cccc00;
}

属性选择器

根据某个属性是否存在或者属性的值来寻找元素.如果属性有多个值,用空格分开

<h2 title="标题">这是一个标题</h2>//使用属性选择器改变h2的背景颜色
h2[title]{background-color: #cccc00;
}

—————————————————–华丽的分割线—————————————————————–

第二章能看的东西就这么多.我觉得内容太少了就把我看视频的笔记拿出来给大家看看

下面给出属性选择器另外一些写法.
*= 包含XXX
^= 首字母为xxx
$= 结束字符xxx

一个示例

<h2 title="a">这是一个标题</h2>
<h2 title="bba">这是一个标题</h2>
<h2 title="ab">这是一个标题</h2>//比如这个会使第一个h2的标签背景变色,其他不变,另外两个可以试一下
h2[title~="a"]{background-color: #cccc00;
}

结构性伪类选择器

first-line 某个元素的第一行
first-letter:某个元素首个字母

<p>这是第一行的内容<br/>这是第二行</p>

//这里p元素的第一个标签背景会改变,第二个不变
p:first-line{background-color: #cccc00;
}

//这里第一个p元素的第一个字符会变成红色
p:first-letter{color: #dc143c;
}

x:before{ //在某元素之前添加
content:
}

<ul><li>列表1</li><li>列表2</li><li>列表3</li></ul>//这里将会在ul列表的上方添加一个"加的内容"的文字
ul:before{content: "加的内容";
}

其他一些选择器

root:绑定到页面的根元素中如果设置了root,那么body的作用域就只有内容区域,反之body沾满全屏()
not:如果想对某个结构元素使用样式,但想排除这个结构下面的子结构元素
empty:指定当前元素中内容为空白时使用的样式

x代表元素名称
x:first-child{}
x:last-child{}
x:nth-child(position){} 从上往下数包括父级和子级 position可以是数字也可以是奇偶数等等可以表示位置的词语奇数(odd) 偶数(even)
x:nth-of-type(){}
x:nth-last-child(position){}从下往上数
nth-last-of-type 同上类似

这里写出root,not,x中的第三个,第四个示例.其他的一看便知.

root:

//以下的代码将会看到整个屏幕背景是黄色,body所设置的图片背景只会作用在<div>所占的空间
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>:root{background-color: fuchsia;}</style>
</head>
<body background="1.jpg"><div>哈喽,root</div>
</body>
</html>

not

    <div><p>哈喽,root</p></div><div><h1>哈喽,root</h1></div><div><h2>哈喽,root</h2></div>//以下代码将会使除了p标签之外的其他标签变色
div *:not(p){color: fuchsia;}

x:nth-child(position){}

 <ul><li>1</li><li>2</li><li>3</li></ul>//以下代码将会使第二个li标签也就是2的文字变色.
//PS:一开始我以为X的部分要写ul,并且position从0开始.这里并不是,锁着这里是有先决条件的.必须是同一个父元素下.
li:nth-child(2){color: fuchsia;}

x:nth-of-type(){}

       <ul><li>1</li><li>2</li><li>3</li></ul>
//以下代码将会使li标签中奇数li标签字体变色.偶数为even.这里括号的条件并不局限于奇数和偶数
li:nth-of-type(odd){color: fuchsia;}

选择器的内容大概就这些.

CSS和CSS3选择器相关推荐

CSS、CSS3选择器
1.css基础选择器 (1)标签选择器: (2)类选择器: (3)id选择器: 只能调用一次(一般和js搭配使用). (4)通配符选择器: 2.复合选择器 (1)后代选择器(包含选择器): (2)子选 ...
CSS 伪类选择器：如何使用 CSS3 伪类
CSS 伪类选择器:如何使用 CSS3 伪类 CSS3 是个好东西,但也很容易被她的变形(transform)和动画(其中许多特性因浏览器厂商而异)特性所迷惑,因而忘了那些已经被添加到标准规范中的最为 ...
CSS 选择器 CSS3选择器
1.CSS 选择器 1.1 .CSS基础选择器标签选择器:所有标签名都可以当做选择器,比如body.h1.dl.ul.span等等 id选择器: 同一个页面内id不能重复(一般是JS中用ID选择器) ...
CSS 选择器 CSS3选择器
1.CSS 选择器 1.1 .CSS基础选择器 **标签选择器:**所有标签名都可以当做选择器,比如body.h1.dl.ul.span等等 id选择器: 同一个页面内id不能重复(一般是JS中用ID ...
css怎么设置表格斑马纹效果,利用CSS3选择器实现表格的斑马纹
要用到的Css3选择器 element:nth-child(number){ } 选择器匹配属于其父元素的第 number 个子元素参数 Numberodd 奇数 even 偶数完整demo: 测 ...
CSS3选择器 :read-only选择器 CSS3选择器 :read-write选择器
CSS3选择器 :read-only选择器 ":read-only"伪类选择器用来指定处于只读状态元素的样式.简单点理解就是,元素中设置了"readonly='reado ...
CSS3 选择器(转)
http://www.w3school.com.cn/cssref/css_selectors.asp css的选择器,做个记录,在爬虫选择元素里很多要用到. CSS3 选择器在 CSS 中,选择器 ...
css3常用方法以及css3选择器
最重要的 CSS3 模块包括: 选择器框模型背景和边框文本效果 2D/3D 转换动画多列布局用户界面 CSS3 边框 CSS3 边框通过 CSS3,您能够创建圆角边框,向矩形添加阴影,使 ...
CSS3选择器:nth-child和:nth-of-type之间的差异的那些事儿
一.深呼吸,直接内容 :nth-child和:nth-of-type都是CSS3中的伪类选择器,其作用近似却又不完全一样,对于不熟悉的人对其可能不是很区分,本文就将介绍两者的不同,以便于大家正确灵活使 ...

CSS和CSS3选择器

CSS和CSS3选择器相关推荐

最新文章

热门文章