<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用选择器</title>
<style>
input:focus{
background: aliceblue;
}
p::selection{
background: cadetblue;
}
p:before[title=p]{
content:"选自P大的《山河表里》";
color:lightblue;
}
P[title=hello]{
background-color: #ADD8E6;
}
</style>
</head>
<body>
<!--
元素选择器
选中指定元素,设置样式
元素名称{}
id选择器(id全页面唯一)
通过元素id属性值选择唯一元素
#id属性值{}
类选择器
class属性
和id属性类似,
可重复,
相同class属性值为一组,
一个元素可有多个class属性值,多个值之间用空格隔开
语法为:
.class属性值{}
选择器分组/并集选择器(同时选中多个选择器对应元素)
语法:
选择器1,选择器2.选择器3,选择器N{}
通配选择器(页面所有元素)
语法:
*{}
复合选择器/交际选择器(同时满足多个选择器的元素)
语法:
选择器1选择器2选择器N{}
后代元素选择器(选中指定元素的指定后代元素)
元素关系
父元素
子元素
祖先元素:直接或间接包含后代元素的元素,父元素也是祖先元素
后代元素:直接或间接被祖先元素包含的元素,父元素也是祖先元素
兄弟元素:共同父元素
语法:
祖先元素 后代元素{}
子元素选择器(指定父元素的子元素)(IE6以后不支持)
语法:
父元素>子元素
ps:兼容性,开发者工具,测试兼容性软件,IEtester
选择器游戏联系(餐厅盘子)
伪类选择器(表示元素特殊状态)
a:link{} 普通连接
a:visited{} 访问过
ps:通过历史记录确定用户是否访问,涉及隐私只能设置颜色
:hover{} 鼠标移入(IE6不支持对a以外设置hover和active)
a,p,
:active{} 被激活(长按)
a,p,
:focus{} 获取焦点
::selection{} 为p标签中选中文字设置样式
ps:火狐浏览器专属为::-moz-selection
伪元素选择器(表示元素中特殊位置)
:first-letter{} 第一个字符
:first-line{} 第一行
:before{} 元素最前方(标签开始)
ps:结合content,通过content可以向before或after的位置添加一些内容
:after{} 元素最后边
属性选择器
作用:根据元素中的属性或属性值来选取指定元素
语法:
[属性名]选取含有指定属性的元素
[属性名="属性"] 选取含有指定属性值的元素
[属性值^="属性值"] 选取属性值以指定内容开头的元素
[属性值$="属性值"] 选取属性值以指定内容结尾的元素
[属性值*="属性值"] 选取属性值以指定内容包含的元素
[属性值~="属性值"]
[属性值|="属性值"]
title属性(任何标签可用指定):鼠标移入时,值作为文字提示显示
子元素选择器(伪类)
:first-child 第一个子元素(所有子元素中)
:last-child 最后一个子元素
:nth-child(参数) 任意位置子元素
even(偶数)
odd(奇数) 隔行变色
:first-of-type 当前类型子元素中第一个
:last-of-type 当前类型子元素中最后个
:nth-of-type 当前类型子元素中任意一个
兄弟元素选择器
一个元素后 紧挨着 的指定元素
前一个 + 后一个
训中元素后边的所有兄弟元素
前一个 ~ 后一个
否定伪类(从已选定元素去除某种元素)
:not()
-->
<!--
继承,在CSS样式中,祖先元素样式会被后代元素继承,可设置基本样式。
不会继承:
背景相关样式
边框相关样式
定位相关样式
-->
<!--
-->
<p title="p">
褚桓就是无法说服自己相信:这一切都是真的,不是他自己的臆想,也不是什么东西强加给他的幻觉。
连续数日,褚桓整宿整宿的都是在装睡,夜深人静的时候看着南山,他会忍不住偷偷伸手碰一下,不过碰完他又觉得多此一举。
如果他看见的、听见的都是假的,那按照这个逻辑,碰到的也未必就是真实的。
他无数次努力试图说服自己,他是脚踏实地的活在真实世界里的,但是找不到证据。
世界上再也没有任何东西能够取信于他,他的神智仿佛始终还陷在孤独无尽的黑暗里,在世界尽头的那一颗种子前,身处人群也好,闹市也好,都是孤身一人。
就像是个失重的人,双脚无论如何也踩不到实地。
褚桓忽然意识到,只要他活着一天,就无法确定自己是活在真实里,还是活在虚幻里,这样看来,似乎只有一了百了地吹灯拔蜡,才算殊途同归。
这念头一闪,褚桓微微有些空洞的眼神就仿佛清明了一点,他决定不再这样半死不活地耗下去了。
</p>
<p title="汪曾祺">他乡的咸鸭蛋,我实在瞧不上</p>
<p title="hello">他乡的咸鸭蛋,我实在瞧不上</p>
<p title="helhh">他乡的咸鸭蛋,我实在瞧不上</p>
<p title="奈斯">他乡的咸鸭蛋,我实在瞧不上</p>
<p title="GOOD">他乡的咸鸭蛋,我实在瞧不上</p>
<input type="text" name="" id="" value="" />
</body>
</html>