zoukankan      html  css  js  c++  java

  • CSS3 选择器

    CSS3 选择器

    一、css hack

    让指定的浏览器识别该 css 规则，其他浏览器将忽略改规则

    1. * : ie6, ie7
    2. *+ : ie7
    3. - : ie6
    4. : ie8
    5. 9 : ie6~ie9

    二、选择器

    1. 基本选择器

    选择器 含义
    ***** 通用元素选择器，匹配任何元素
    E 标签选择器，匹配所有使用E标签的元素
    .info class选择器，匹配所有class属性中包含info的元
    #footer id选择器，匹配所有id属性等于footer的元素
    $('div, span, p.myClass') 并列选择器

    2. 层次选择器

    选择器 含义
    E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔
    E > F (IE7+) 子元素选择器，匹配所有E元素的子元素F
    E + F (IE7+) 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F
    $("prev ~ siblings") (IE7+) prev元素之后的所有 siblings 元素

    3. 伪类选择器

    1）动态伪类选择器

    选择器 功能描述
    E:link （链接伪类） 未被访问
    E:visited （链接伪类） 已被访问
    E:active （行为伪类） (IE8+)
    E:hover （行为伪类）
    E:focus （行为伪类） (IE8+)

    2）目标伪类选择器

    选择器 (ie9+) 功能描述
    :target 用来指定那些包含片段标识符的 URI 的目标元素样式。 
    <style>
li:target {
	color: red;
}
</style>

<ul>
	<li id="1">1</li>
	<li id="2">2</li>
	<li id="3">3</li>
	<li id="4">4</li>
</ul>

// 当 url 以 #3 结尾时 id 为 3 的元素的字体颜色将变成红色

    3）语言伪类选择器

    选择器 (IE8+) 功能描述
    E:lang(language) 用于多语言版本的网站

    可使用 E[foo|="en"] 实现相同的效果 (IE7)

    <html lang="en">  
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
li:lang(en) {
	color: red;
}
li:lang(zh-cmn-Hans) {
	color: green;
}
</style>
</head>
<body>
<ul>
	<li id="1">1</li>          
	<li id="2">2</li>             
	<li id="3" lang="zh-cmn-Hans">3</li>
	<li id="4">4</li>
</ul>
</body>
</html>

    ​

    4）UI元素状态伪类选择器

    选择器 （IE9+） 功能描述
    E:checked 选中
    E:enabled 启用
    E:disabled 不可用 
    input:disabled,{
cursor: not-allowed;
background-color: #eee;
border-color: #ddd;
}
input:checked {
display: none;
}
input:enabled {
background-color: blue;
}

<form action="">
<input type="text" disabled>
<input type="password">
	<input type="radio" disabled>aaaa
	<input type="radio" enabled>bbbb
	<input type="radio">cccc    <!-- enabled -->
</form>

    ​

    5）结构伪类选择器

    demo : Lea Verou

    选择器 (IE9+) 功能描述
    E:first-child 该元素为 E 元素，并且它是其父元素的第一个子元素
    E:last-child 该元素为 E 元素，并且它是其父元素的最后一个子元素
    :root 匹配文档的根元素，对于HTML文档，就是HTML元素
    E:nth-child(n) 该元素是 E，并且它是其父元素的第n个元素或奇偶元素，n的值为“数字 | odd | even”
    E:nth-last-child(n) 该元素是 E，并且它是其父元素的倒数第n个子元素，第一个编号为1
    E:nth-of-type(n) 该元素是 E , 并且它是其父元素的子元素中第 n 个 E 元素，（与E: nth-child(n) 的区别是需要是第 n 个 E 元素而不是第 n 个子元素）
    E:nth-last-of-type(n) 该元素是 E , 并且它是其父元素的子元素中倒数第 n 个 E 元素
    E:first-of-type 该元素是 E , 并且它是其父元素的子元素中第 1 个 E 元素，等同于:nth-of-type(1)
    E:last-of-type 该元素是 E , 并且它是其父元素的子元素中倒数第1 个 E 元素，等同于:nth-last-of-type(1)
    E:only-child 该元素是E，并且它是其父元素唯一的子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
    E:only-of-type 该元素是E，并且它是其父元素的子元素中唯一使用 E 标签的元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
    E:empty 该元素是 E 元素，并且其不包含子元素。注意，文本节点也被看作子元素 
    <style>
dl > * {
	counter-increment: child;   /* 这里用的很新颖 */
	border: 1px solid #bbb;
	padding: 10px;
	margin: 3px 0;
}
dl dt:before {
	content: "dt (" counter(child) ")";
}
dl dd:before {
	content: "dd (" counter(child) ")";
}
dl dt {
	background: #ffd;
}
dl dd {
	background: #efd;
}

/* 是 dd 元素，并且它是其父元素的第一个子元素 */
dd:first-child {         
	/*border: 3px solid red;*/
} 
/* 是 dt 元素，并且它是其父元素的第一个子元素 */
dt:last-child {           
	/*border: 3px solid yellow;*/
} 

/*该元素是 dt，并且它是其父元素的第 2n 个元素*/
dt:nth-child(2n) {
	/*border: 3px solid red;*/
}
dd:nth-last-child(2n) {
	/*border: 3px solid yellow;*/
}

/*该元素是 dt, 并且它是其父元素的子元素中第 3 个 dt 元素*/
dt:nth-of-type(3) {
	/*border: 3px solid red;*/
}
dt:nth-last-of-type(3) {
	/*border: 3px solid yellow;*/
}

dt:first-of-type {
	border: 3px solid red;
}
dt:last-of-type {
	border: 3px solid yellow;
}

</style>

<body>
<dl>
	<dd></dd>
	<dt></dt>
	<dt></dt>
	<dd></dd>
	<dt></dt>
	<dd></dd>
	<dt></dt>
	<dd></dd>
	<dd></dd>
	<dd></dd>
	<dd></dd>
	<dd></dd>
	<dt></dt>
	<dd></dd>
	<dt></dt>
</dl>
</body>

    6）否定伪类选择器

    选择器 功能描述
    E:not ( select ) 匹配不符合当前选择器的任何元素

    4. 伪元素

    选择器 含义
    E::first-line 匹配E元素的第一行
    E::first-letter 匹配E元素的第一个字母
    E::before 在E元素之前插入生成的内容
    E::after 在E元素之后插入生成的内容
    E::selection 匹配突出显示的文本

    5. 属性选择器

    选择器 （IE7+） 含义
    E[att] 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如"[cheacked]"。以下同。）
    E[att=val] 匹配所有att属性等于"val"的E元素
    E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于"val"的E元素
    E[att|=val] 匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以"val"开头的E元素，主要用于lang属性，比如"en"、"en-us"、"en-gb"等等
    [attribute^=value] 选取属性的值以value开始的元素
    [attribute$=value] 选取属性的值以value结束的元素
    [attribute*=value] 选取属性的值含有value的元素

    注意

    转载、引用，但请标明作者和原文地址
  • 相关阅读:
    大数据技术（1-5题）
    如何使用不同的编程语言来造一匹马
    Redis 数据类型及应用场景
    Swoole中内置Http服务器
    redis 数据库主从不一致问题解决方案
    easyswoole对接支付宝,微信支付
    PHP+Swoole 作为网络通信框架
    基于swoole实现多人聊天室
    swoole与php协程实现异步非阻塞IO开发
    swoole中使用task进程异步的处理耗时任务
  • 原文地址：https://www.cnblogs.com/CccZss/p/8529211.html
Copyright © 2011-2022 走看看