CSS3 选择器

最新推荐文章于 2024-06-19 18:22:09 发布

dingshige8508

最新推荐文章于 2024-06-19 18:22:09 发布

阅读量85

点赞数

文章标签： ui

原文链接：http://www.cnblogs.com/CccZss/p/8529211.html

版权

CSS3 选择器

一、css hack

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

* : ie6, ie7
*+ : ie7
- : ie6
\0 : ie8
\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的元素

注意

转载、引用，但请标明作者和原文地址

转载于:https://www.cnblogs.com/CccZss/p/8529211.html

dingshige8508

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 选择器

CSS3 选择器一、css hack让指定的浏览器识别该 css 规则，其他浏览器将忽略改规则* : ie6, ie7*+ : ie7- : ie6\0 : ie8\9 : ie6~ie9二、选择器1. 基本选择器选择器含义*****通用元素选择器，匹配任何元素E标签选择器，匹配所有使用E标签的元素.infoclass选择器，...
复制链接

扫一扫