1、元素选择器
<style type="text/css">
html{color:black;}
h1{color:blue}
</style>
2、选择器分组
<style type="text/css">
h2,p{color:gray;}
</style>
3、类选择器
<style type="text/css">
.important{ color:red;} /*选择所有class=’important’的元素*/
p.important{ color: red;} /*中间没有空格;匹配class=”important”的所有p元素*/
div .important{ color:blue;} /*有空格;匹配div标签的子元素中class=”important”*/
</style>
<body>
<div class="important">
<p></p>
<p class="important"></p>
<div class="one"></div>
</div>
</body>
4、ID选择器
<style type="text/css">
#intro{ font-weight:800;} /*选择id=”intro”的元素;类名可以重复有多个;id只能有唯一的一个;二者都区分大小写;*/
</style>
<body>
<div id="intro"></div>
</body>
5、属性选择器
a[href] {color:red; } /*只对有和href属性的锚(a元素)应用样式*/
a[href][title] {color:red;} /*匹配同时有href和title属性的HTML超链接a*/
a[href=”http://my.csdn.net/”]{ color:red; } /*匹配具体属性值*/
p[class~=”important”] { color: blue;} /*属性值中包含某个值,要用”~”*/
[abc^=”def”] /*选择abc属性以”def”开头的所有元素,不一定是完整单词*/
[abc$=”def”] /*选择abc属性值以”def”结尾的所有元素*/
[abc*=”def”] /*选择abc属性值中包含子串”def”的所有元素*/
[abc|=”hello”] /*选择abc属性等于hello或者hello- 开头的所有元素;class=”hello box”都不行,空格不行;只能是整个单词hello或者hello-box;*/
6、后代选择器(包含选择器)
div ul{ width:300px; } /*选择div的子元素中的所有ul元素,不论嵌套多深*/
7、子选择器
h1 > p {color:red;} /*选择只作为h1元素子元素的p元素;父子关系,不是子孙关系;*/
8、相邻兄弟选择器
h1 + p {margin-top:50px;} /*选择紧接在h1后面的p元素,而且两个有相同父元素;*/
eg:
<h1>aa</h1>
<p>bb</p>
<p>cc</p> /*h1+p选择紧跟在h1后面的p(bb);*/
9、伪类
a:link {color: #ff0000;} /* 未访问的链接*/
a:visited {color:red;} /* 已访问的链接 */
a:hover {color:blue;} /* 鼠标移动到链接上 */
a:active {color:green;} /*选定的链接;被激活的元素*/
input:focus{color:white;} /*向拥有键盘输入焦点的元素添加样式*/
li:hover a{color:orange;} /*鼠标移动到li上面,a元素改变样式*/
p:first-child /*选择该元素的父级元素中p标签元素,如果父级元素下的第一个子元素不是p标签,则不选择*/
eg:
<ul>
<p>aaaaaa</p>
<li>
<p>bbbbb</p>
<p>cccccc</p>
</li>
<ul>
p:first-child{color:red;} //先看p标签的父元素,再看父元素下第一个元素是不是p标签,不是p就匹配失败;
li:first-child{color:green;} //li的父元素ul下第一个子元素不是li,所以匹配失败
eg:
<p><q lang=”no”>段落中的引用的文字</q></p>
q:lang(no){color:red;} //lang类为属性值为no的q元素添加样式;
css3选择器:
n可以是数值,也可以是表达式算法,如3n选择第3个,第6个....
:nth-child(n) //选择器匹配属于其父元素的第n个元素;匹配类型
:nth-of-type(n) //匹配属于父元素的特定类型的第n个子元素的每个元素
eg:
p:nth-child(2); /*先找出p的父元素中的第2个元素,是p标签则选中,不是则不选中;nth-last-child(n) 同上,从最后一个元素算起 */
p:nth-of-type(2); /* 选择属于其父元素的第二个<p>元素的每个<p>元素*/
p:empty /*选择没有子元素的每个p元素*/
p:last-child /* 选择属于其父元素最后一个子元素每个p元素*/
input:enabled /*选择每个启用的input元素*/
input:disabled /*选择每个禁用的input元素*/
input:checked /* 选择每个被选中的input元素*/
:not(p) /*选择非p元素的每个元素*/
::selection /*选择被用户选取的元素部分*/
10、伪元素
:first-letter //向文本的第一个字母添加特殊样式
:first-line //向文本的首行添加样式
:before //在元素之前添加内容
:after //在元素之后添加内容
eg: css: h1:before {content:url(img/login.jpg); }
html: <body>
<h1>this is a heading</h1>
<p>this is a</p>
</body>