CSS 选择器常见类型

来源：互联网发布：linux查看版本命令编辑：程序博客网时间：2024/04/30 11:28

E、F、G代表任意元素；attribute【简写成attr】代表任意元素的属性，value代表属性的属性值；

基本选择符：

基本选择器符号/其他标记语法名称说明范例版本 *（星号） * {property:value;} 通用选择器匹配所以元素 p *{color:#00FF00} CSS2 E E{property:value;} 类型选择器匹配指定标记的元素 p{color:#00FF00} CSS1 #（井号） #myid{property:value;}
E#myid{property:value;} ID选择器匹配唯一标识id属性为myid的E元素 #intor{text-align:center} CSS1 .（实点） .myclass{property:value;}
E.myclass{property:value;} 类选择器匹配class属性为myclassd的所有E元素 .important {color:red;}
p.important {color:red;}
.important.urgent {background:silver;} CSS1

浏览器测试： Chrome 60.0.3112.113、IE 11.0、Firefox 55

通用选择器：
在通用选择，写有“*”，匹配任意元素类型的名称。它匹配文档树中的任何单个元素。
如果通用选择器不是简单选择器的唯一组件，则可以省略“*”。例如：
- *[lang=fr] 并且[lang=fr]是相当的。
- *.warning并且.warning是相当的。
- *#myid并且#myid是相当的。

注意：
1、任意元素或选择器的前面放在 *；
2、* 和任意元素或选择器之间添加空格；

样例：
CSS 四种代码：

*{    font-family:"Microsoft YaHei"; /*关于微软雅黑字体呈现效果：使用"YaHei":Chrome、Firefox呈现效果，而IE无法显示；使用"Microsoft YaHei"：Chrome、Firefox、IE都能呈现效果。*/}* p{    color:#0000FF;    text-decration:underline;}* .container{    border: 1px solid #0000ff;}.container{    border:1px solid #0000ff;    width:220px;    *width:300px;}

HTML代码一：

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>test测试</title>    <style type="text/css">    * .container{        border: 1px solid #0000ff;    }    </style></head><body>    <p><span class="container">通用选择器</span>全体元素都受到影响</p>    <p>这个段落不受该样式的影响。</p>    <hr/>    <ul class="container">雪糕味道：        <li>芒果味</li>        <li><strong>茉莉</strong>味</li>        <li>草莓味</li>        <li>巧克力味</li>    </ul>    <p class="container">h1~h2 标题效果：</p>    <h1 class="container">一级标题</h1>    <h2>二级标题</h2></body></html>

运行结果：
这里写图片描述

Chrome、Firefox、IE呈现效果一样。

HTML代码二：

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>test测试</title>    <style type="text/css">    .container{        border:1px solid #0000ff;        width:220px;        *width:300px;    }    </style></head><body>    <p><span class="container">通用选择器</span>全体元素都受到影响</p>    <p>这个段落不受该样式的影响。</p>    <hr/>    <ul class="container">雪糕味道：        <li>芒果味</li>        <li><strong>茉莉</strong>味</li>        <li>草莓味</li>        <li>巧克力味</li>    </ul>    <p class="container">h1~h2 标题效果：</p>    <h1 class="container">一级标题</h1>    <h2>二级标题</h2></body></html>

运行结果：
这里写图片描述
Chrome、Firefox、IE呈现效果一样。

关于CSS hack问题：
由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。

类型选择器
样例：
CSS 代码：

p{    color:#0000FF;    text-decration:underline;}h1{    color:color:#01eecc;}li{    color:#07aa00;}

HTML代码：

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>test测试</title>    <style type="text/css">        p{            color:#0000FF;            text-decration:underline;        }        h1{            color:#01eecc;        }        li{            color:#07aa00;        }           </style></head><body>    <ul>雪糕味道：        <li>芒果味</li>        <li><strong>茉莉</strong>味</li>        <li>草莓味</li>        <li>巧克力味</li>    </ul>    <p>h1~h2 标题效果：</p>    <h1>一级标题</h1>    <h2>二级标题</h2></body></html>

运行结果：
这里写图片描述

Chrome、Firefox、IE呈现效果一样。

关系选择器：

关系选择器语法名称说明版本 , （逗号） E,F,G{property:value;} 选择器分组选择所有的E元素、F元素和G元素 CSS1 空格 E F{property:value;} 包含选择符/后代选择器选择所有被E元素包含或者后代的F元素 CSS1 >（大于） E>F{property:value;} 子元素选择器选择所有作为E元素的子元素F CSS2 +（加号） E+F{property:value;} 相邻选择器选择紧贴在E元素之后的F元素 CSS2 ~（波浪号） E~F{property:value;} 间接相邻选择器选择紧跟E元素之后相邻的全部元素F CSS3

属性选择器：

注意：E 代表任意元素。
这里写图片描述

简单属性选择：E[attr]
CSS 代码：

<style src="text/css">/*两个[]方括号之间不能有空格，否者无法呈现效果*/    *[title] {color:red;}    a[href][title]{color:#ff0000;}    img[alt]{border: 10px solid #32db18;}</style>

HTML 代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <title>test测试</title>    <style type="text/css">        a[href][title]{color:#ff0000;}        img[alt]{border: 10px solid #32db18;}    </style></head><body>    <p>被应用样式：</p>    <a href="http://new.baidu.com" title="百度新闻搜索——全球最大的中文新闻平台">百度新闻</a>    <a href="http://http://www.csdn.net" title="CSDN首页">CSDN官网</a>    <a href="http://http://image.baidu.com" title="百度图片-发现多彩世界">百度图片</a><br/><br/>    <img src="./time.png" align="baseline" alt="头像"/>    <p>无法应用样式：</p>    <a href="http://new.baidu.com/society" name="百度新闻">社会新闻</a>    <a href="http://http://www.csdn.net" >CSDN官网</a>    <a title="CSDN首页">CSDN官网</a></body></html>

运行结果：
这里写图片描述

根据具体属性值选择
CSS 代码：

<style src="text/css">    a[href="http://new.baidu.com"]{color: #e20600;}    /*两个[]方括号之间不能有空格，否者无法呈现效果*/    a[href="http://new.baidu.com"][title="百度新闻"]{color: #CC2582;}    /*结合class选择器使用*/    p[class="important warning"] {color:#24CC03;} </style>

HTML 代码1：

<!DOCTYPE html><html><head lang="en">    <meta charset="utf-8">    <title>test测试</title>    <head>    <meta charset="utf-8">    <title>test测试</title>    <style type="text/css">        a[href="http://new.baidu.com"]{color: #e20600;}    </style></head><body>    <p class="important warning">被应用样式：</p>    <a href="http://new.baidu.com" title="百度新闻">百度新闻</a>    <p class="important">无法应用样式：</p>    <a href="http://new.baidu.com/gounei" title="百度新闻">国内新闻</a>    <a href="http://new.baidu.com/gouji" title="百度新闻">国际新闻</a>    <a href="http://http://image.baidu.com" title="百度图片-发现多彩世界">百度图片</a>    <a href="http://http://www.csdn.net" title="CSDN首页">CSDN官网</a></body></html>

运行效果：
这里写图片描述

HTM 代码2：

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <title>test测试</title>    <style type="text/css">        a[href="http://new.baidu.com"][title="百度新闻"]{color: #CC2582;}        p[class="important warning"] {color:#24CC03;}    </style></head><body>    <p class="important warning">被应用样式：</p>    <a href="http://new.baidu.com" title="百度新闻">百度新闻</a>    <p class="important">无法应用样式：</p>    <a href="http://new.baidu.com/gounei" title="百度新闻">国内新闻</a>    <a href="http://http://image.baidu.com" title="百度图片-发现多彩世界">百度图片</a>    <a href="http://http://www.csdn.net" title="CSDN首页">CSDN官网</a></body></html>

运行结果：
这里写图片描述

根据部分属性值选择
CSS 代码：

<style src="text/css">    p[class~="important"]{color:#24CC03;}</style>

HTML 代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <title>test测试</title>    <style type="text/css">        p[class~="important"]{color:#24CC03;}    </style></head><body>    <p class="important warning">第一段落被应用样式</p>    <p class="important">第二段落被应用样式</p>    <p class="warning">第三段落无法应用样式：</p></body></html>

运行结果：
这里写图片描述

部分值属性选择器与点号类名记法的区别
CSS 代码：

<style src="text/css">    img[title~="Figure"]{border: 1px solid gray;}</style>

HTML 代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <title>test测试</title>    <style type="text/css">        img[title~="Figure"]        {            border: 10px solid gray;        }    </style></head><body>    <h2>可以应用样式：</h2>    <img title="Figure 1" src="松鼠.png" />    <img title="Figure 2" src="兔子.png" />    <hr />    <h1>无法应用样式：</h1>    <img src="松鼠.png" />    <img src="兔子.png" /></body></html>

运行结果：
这里写图片描述

子串匹配属性选择器
* E[attr*=”value”] 选择器
CSS 代码：

<style src="text/css">    a[href*="http://new.baidu.com"][title="百度新闻"]{color: #136c97;}</style>

E[attr^=”value”] 选择器**
CSS 代码：

<style src="text/css">    a[href^="http"]{color:#ff0000;}</style>

E[attr$=”value”] 选择器
CSS 代码：

<style src="text/css">    /*匹配属性值以指定值结尾的每个元素。如下两个CSS样式，效果不同*/    p[class$="test"]{background:#ffff00;}    [class$="test"]{background:#FF8329;} </style>

HTML 代码一：

<!DOCTYPE html><html><head lang="zh-HK">    <meta charset="utf-8">    <title>test测试</title>    <style type="text/css">        p[class$="test"]        {            background:#ffff00;        }    </style></head><body>    <p class="first_test">第一段落有应用样式。</p>    <p class="second">第二段落无法应用样式。</p>    <p class="test">第三段落有应用样式。</p>    <h2 class="test">标题无法应用样式。</h2></body></html>

HTML 代码二：

<!DOCTYPE html><html><head lang="zh-HK">    <meta charset="utf-8">    <title>test测试</title>    <style type="text/css">        [class$="test"]        {            background:#FF8329;        }    </style></head><body>    <p class="first_test">第一段落有应用样式。</p>    <p class="second">第二段落无法应用样式。</p>    <p class="test">第三段落有应用样式。</p>    <h2 class="test">标题无法应用样式。</h2></body></html>

E[attr|=”value”]选择器
CSS 代码：

<style src="text/css">[lang|=en]{background:yellow;}[class|=top]{background-color:yellow;}</style>

HTML 代码:

<!DOCTYPE html><html><head>    <style>        [class|=top]        {            background:yellow;        }    </style></head><body>    <h1 class="top-header">Welcome</h1>    <p class="top-text">Hello world!</p>    <p class="content">Are you learning CSS?</p>    <p><b>注释：</b>对于 IE8 及更早版本的浏览器中的 [attribute|=value]，必须声明 <!DOCTYPE>。</p></body></html>

结构伪类选择器：

注意：E 代表任意元素。

伪类选择器语法说明版本 :root E:root{property:value;} 选择匹配E 元素所有文档的根元素 CSS2 :not(s) E:not(s){property:value;} 选择匹配所有不匹配简单选择器s 的E 元素 CSS3 :empty E:empty{property:value;} 匹配没有任何子元素（包括text节点）的元素E CSS3 :target E:target{property:value;} 匹配当前链接地址指向的E 元素 CSS3 :first-child E:first-child{property:value;} 匹配父元素的第一个子元素E CSS3 :last-child E:last-child{property:value;} 匹配父元素的最后一个子元素E CSS2 :n-child(n) E:n-child(n){property:value;} 匹配父元素的第n 个子元素E CSS3 :n-last-child(n) E:n-last-child(n){property:value;} 匹配父元素的倒数第n 个子元素E CSS3 :only-child E:only-child{property:value;} 匹配父元素的仅有的一个子元素E CSS3 :first-of-type E:first-of-type{property:value;} 匹配同类型中的第一个同级兄弟元素E CSS3 :last-of-type E:last-of-type{property:value;} 匹配同类型中的最后一个同级兄弟元素E CSS3 :only-of-type E:only-of-type{property:value;} 匹配同类型中的唯一一个同级兄弟元素E CSS3 :nth-of-type(n) E:nth-of-type(n){property:value;} 匹配同类型中的第n 个同级兄弟元素E CSS3 :nth-last-of-type(n) E:nth-last-of-type(n){property:value;} 匹配同类型中的倒数第n 个同级兄弟元素E CSS3

其中，E:nth-child(n)中的参数n，可以是一个数字，可以是关键字odd或even，可以是公式2n或2n-1等，n的索引起始值为1。

状态伪类选择器：

伪类选择器语法说明版本 :link E:link{property:value;} 设置未访问的链接 CSS1 :visited E:visited{property:value;} 设置已访问的链接 CSS1 :hover E:hover{property:value;} 设置光标移动到链接上时 CSS1/CSS2 :active E:active{property:value;} 设置选定的链接 CSS1/CSS2 :focus E:focus{property:value;} 设置元素在成为焦点（onfocus事情发生）时的样式 CSS1/CSS2 :checked E:checked{property:value;} 匹配表单上处于选中状态的元素E (radio 和 checkbox) CSS3 :enabled E:enabled{property:value;} 匹配表单上处于可以状态的元素E CSS3 :disabled E:disabled{property:value;} 匹配表单上处于禁用状态的元素E CSS3

伪元素选择器：

伪类选择器语法说明版本 :first-letter/::first-letter E :first-letter{property:value;} 设置对象内的第一个字符的样式 CSS1/CSS3 :first-line/::first-line E :first-line{property:value;} 设置对象内的第一行的样式 CSS1/CSS3 :before/::before E :before{property:value;} 设置在对象前发生的内容，与content 属性一起用 CSS2/CSS3 :after/::after E :after{property:value;} 设置在对象前发生的内容，与content 属性一起用 CSS2/CSS3 ::selection E ::selection{property:value;} 设置在对象被选择时的颜色 CSS3

阅读全文

0 0