CSS3--选择器
子元素选择器:
div>p{background:yellow;}
相邻的后兄弟选择器(必须相邻)
h1+p{padding-top:20px;}
后兄弟选择器(同级的当前元素后面的元素)
div~p{color:red;}
属性选择器:(属性可以自己定义,例如:class=abc)
[abc=value] 属性值为value的元素
[abc~="value1"]属性值包含value1的元素(多个值之间用空格区分)
[abc*="val"]模糊匹配 属性值中包含val的元素
[abc^="val"]匹配属性值以val开头
[abc$="val"]匹配属性值以val结尾
[abc=val]属性值为val的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3选择器 | 属性选择器</title>
<style type="text/css">
/*li { border: 1px solid red; }*/
/*li.active { border: 1px solid red; }*/
/*li[class] { border: 1px solid red; }*/
/*li[class='active'] { border: 1px solid red; }*/
/*li[class='active clear'] { border: 1px solid red; }*/
/*li[class~='active'] { border: 1px solid red; }*/
/*li[abc] { border: 1px solid red; }*/
/*li[abc~='d'] { border: 1px solid red; }*/
li[class*='c'] { border: 1px solid red; }
/*li[class^='act'] { border: 1px solid red; }*/
/*li[class$='ve'] { border: 1px solid red; }*/
/* li[class|='act'] { border: 1px solid red; }*/
</style>
</head>
<body>
<ul class="list">
<li>
<h2>第一级菜单</h2>
<ul>
<li>
<h2>第二级菜单</h2>
</li>
<li class="act">
<h2>第二级菜单</h2>
</li>
<li>
<h2>第二级菜单</h2>
</li>
<li class="act focus">
<h2>第二级菜单</h2>
</li>
<li>
<h2>第二级菜单</h2>
</li>
</ul>
</li>
<li abc="d f"><h2>第一级菜单</h2></li>
<li class="clear active"><h2>第一级菜单</h2></li>
<li><h2>第一级菜单</h2></li>
<li class="abc"><h2>第一级菜单</h2></li>
</ul>
</body>
</html>
伪类选择器:
input:disabled
a:hover/:active/a:visited/a:link
:before/:after
:nth-child(n)第n个元素(p:nth-child,限制标签名)
:nth-last-child(n)倒数第n个元素(p:nth-last-child)
:nth-of-type(n)所有符合选择器要求的第n个元素
:nth-last-of-type()同上,倒序
:first-child/:last-child第一个/最后一个子元素
p:first-child第一个子元素并且标签名必须为p
p:last-child最后一个子元素,并且标签名必须为p
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style type="text/css">
/*body { background: pink; }*/
/*:nth-child(2) {
border: 1px solid #333;
}
div :nth-child(3){
color: green;
}*/
/*div:nth-child(3){
color: green;
}*/
/*div p:nth-child(2){
div 的第二个子标签,并且标签类型为 p标签的元素
color: green;
}*/
/*:first-child {
font-size: 20px;
}*/
/*p:first-child {
font-size: 20px;
}*/
/*div :first-child {
font-size: 30px; color: red;
}*/
/* :nth-child(3) {
color: red; font-size: 20px;
}*/
/*:nth-of-type(3) {
color: red; font-size: 20px;
}*/
.div1 :nth-child(odd) {
color: red;
}
/*#div1 .div2*/
/*
伪类选择器:
*/
</style>
</head>
<body>
<div class="div1">
<h2>fdsafafafaf</h2>
<p>123131231</p>
<div>fdsf123131313</div>
<h2>fdsafafafaf</h2>
<p>123131231</p>
<div>
<span>fdsf123131313</span>
<p>fsafaffafaf</p>
<div>123131313</div>
</div>
<h2>fdsafafafaf</h2>
<p>123131231</p>
<div>fdsf123131313</div>
</div>
<div class="div2">
<h2>fdsafafafaf</h2>
<p>123131231</p>
<div>fdsf123131313</div>
<h2>fdsafafafaf</h2>
<p>123131231</p>
<div>
<span>fdsf123131313</span>
<p>fsafaffafaf</p>
<div>123131313</div>
</div>
<h2>fdsafafafaf</h2>
<p>123131231</p>
<div>fdsf123131313</div>
</div>
</body>
</html>
CSS3--选择器的更多相关文章
- 总结30个CSS3选择器
或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 ;; ...
- 总结30个CSS3选择器(转载)
或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...
- CSS3 选择器——属性选择器
上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...
- css3 选择器(三)
接css3选择器(一) 接css3 选择器(二) 这篇和前两篇内容相关性不大,主要是涉及到一些css3的状态选择器,所以标题从一开始. 一.[:enabled]选择器 一看这个属性就知道是专为表单元素 ...
- CSS3选择器介绍
1.css3属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- CSS3 选择器——基本选择器
CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运用的灵活到位,我想对很多朋友还是一定的难度,特别是CSS3中的:nth选择器.那么从现在开始我们先丢开他们版本的区别, ...
- CSS3选择器的研究,案例
在上一篇CSS3选择器的研究中列出了几乎所有的CSS3选择器,和伪类选择器,当是并没有做案例的研究,本想在那篇文章里面写,但想想如果把案例都写在那篇文章里面,对于查找来说就不是很方便,所有另开一篇来讲 ...
- css3选择器(一)
直接开始正文. 一.css3同级元素通用选择器[update20161228] 选择器:E~F 匹配任何在E元素之后的同级F元素 Note:E~F选择器选中的是E元素后面同级元素中的全部F元素. 例: ...
- css3 选择器(二)
接css3选择器(一) 八.结构性伪类选择器[:nth-child(n)] :nth-child(n)选择器用来匹配某个父元素的一个或多个特定的子元素,和jquery中一样. 其中"n&qu ...
- [css3]CSS3选择器:nth-child和:nth-of-type之间的差异
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1709 一.深呼吸,直 ...
随机推荐
- Centreon 监控报警
1.系统更新:yum update 2.安装组件:yum install -y httpd php-pear php php-mysql php-gd php-ldap php-xml php-mbs ...
- knockout 第一个实例visible
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- mysql高效分页方案及原理
很久以前的一次面试中,被面试官问到这个问题,由于平时用到的分页方法不多,只从索引.分表.使用子查询精准定位偏移以外,没有使用到其它方法. 后来在看其它博客看到了一些不同的方案,也一直没有整理.今天有时 ...
- DELPHI高性能大容量SOCKET并发(九):稳定性问题解决
http://blog.csdn.net/sqldebug_fan/article/details/9043699
- eclipse中如何关闭运行时自动保存?
Eclipse没有提供自动保存的功能,只能自己写脚本每隔多久保存一次,或监听修改即保存.设置方法:1.打开:preferences>run/debug>launching2.选择save ...
- [CF #288-C] Anya and Ghosts (贪心)
题目链接:http://codeforces.com/contest/508/problem/C 题目大意:给你三个数,m,t,r,代表晚上有m个幽灵,我有无限支蜡烛,每支蜡烛能够亮t秒,房间需要r支 ...
- 52. Sort Colors && Combinations
Sort Colors Given an array with n objects colored red, white or blue, sort them so that objects of t ...
- archlinux 传统方法编译内核linux kernel 3.3.7
From: http://hi.baidu.com/flashgive/item/eaef6326b5eb73d3a417b662 archlinux中传统方法编译内核 1)下载内核以及补丁并解压: ...
- cocos2dx 2.0 CCScrollView的用法以及滑动的原理
#ifndef __HELLOWORLD_SCENE_H__ #define __HELLOWORLD_SCENE_H__ #include "cocos2d.h" USING_N ...
- Range-Based for Loops
for ( decl : coll ) { statement } where decl is the declaration of each element of the passed collec ...