CSS3中的选择器
2018-06-24 02:23:54来源:未知 阅读 ()
这里总结一共有11种选择器,分别为:
通配符选择器、类选择器、id选择器、元素选择器(又叫标签选择器)、属性选择器、
伪类选择器、伪元素选择器、后代选择器(又叫包含选择器)、子元素选择器、兄弟选择器(相邻兄弟选择器+、通用兄弟选择器~)、群组选择器(几个共用一个,用逗号隔开)
(优先级:!important>行间样式>id>class=属性=伪类选择器>元素=伪元素选择器>通配符)
1、通配符选择器
语法:* {属性名:属性值;属性名:属性值; ........} 为页面上的所有元素设置样式,优先级最低
*{ margin:0; padding:0; }
2、类选择器
语法:.类名{属性名:属性值;属性名:属性值; .......} 为含有相同类名的元素设置样式
<style> .s1{ color:red; } </style> <body> <p class='s1'>aa</p> <p class='s2'>bb</p>
<p class='s1 s2'>cc</p>
<!----aa和cc的字体颜色为红色----> </body>
3、id选择器
语法:#id名{属性名:属性值;属性名:属性值; .......} 为id属性值为指定id名的元素设置样式
<style> #d1{ color:red; } </style> <body> <p id='d1'>aa</p> <p id='d2'>bb</p> <!----aa的字体颜色为红色----> </body>
注意:在一个html文档中,一个id名只能使用一次;且不能使用id词列表
<p id='d1'>aa</p> <p id='d1'>bb</p> <!----错误,一个id名只能使用一次----> <p id='d2 d3'>cc</p> <!-----错误,不能使用id列表-------->
4、元素选择器
又叫标签选择器,根据元素名(标签名)来设置样式
语法:元素名{属性名:属性值;属性名:属性值; .......} 为所有指定的元素设置样式
<style> p{
color:red; } </style> <body> <p>aa</p> <div> <p>bb</p> </div> <p >cc</p> <!----aa、bb和cc的字体颜色均为红色----> </body>
5、属性选择器
具体分为三种:
①简单属性选择器:选择具有某个属性名的元素
语法:[元素属性名]{属性名:属性值;属性名:属性值; .......} 选择有指定属性名的元素,而不管元素的该属性的属性值是什么
<style> [href]{ color:red; } </style> <body> <a href='taobao'>taobao</a> <div> <a href='baidu'>baidu</a> </div> <a href='tencent' >tencent</p> <!----taobao baiidu和tencent的字体颜色均为红色----> </body>
②具体属性值选择器:选择具有指定属性键值对(属性名和属性值都要匹配)的元素
语法:[元素属性="属性值"]{属性名:属性值;属性名:属性值; .......} 属性名和属性值要完全匹配
<style> [href='taobao']{ color:red; } </style> <body> <a href='taobao'>taobao</a> <div> <a href='baidu'>baidu</a> </div> <a href='tencent' >tencent</p> <!----taobao的字体颜色均为红色----> </body>
③子串匹配属性选择器:可以规定属性值包含什么字符串(*)或以什么字符串开头(^)/结尾($)
语法:[元素属性^="def"]{属性名:属性值;属性名:属性值; .......} 相应的属性值以def开头的元素
[元素属性$="def"]{属性名:属性值;属性名:属性值; .......} 相应的属性值以def结尾的元素
[元素属性*="def"]{属性名:属性值;属性名:属性值; .......} 相应的属性值包含def的元素
<style> [href^='t']{ color:red; } [href$='u']{ color:yellow; } [href*='b']{ font-size:30px; } </style> <body> <a href='taobao'>taobao</a> <div> <a href='baidu'>baidu</a> </div> <a href='tencent' >tencent</p> <!----taobao和tencent的字体颜色为红色;baidu的字体颜色为黄色;taobao和baidu的字体大小为30px----> </body>
6、后代选择器(又叫包含选择器)
语法:祖先元素 后代元素 {属性名:属性值;属性名:属性值; .......} 为具有指定祖先元素的所有后代元素设置样式 ,这两个元素之间的层次间隔可以是无限的
<style> .s1 p{ color:red; } </style> <body> <p>aa</p> <div class='s1'> <p>bb</p> <div> <p>cc</p> </div> <p>dd</p> </div> <p >ee</p> <!----bb、cc和dd的字体颜色为红色----> </body>
7、子元素选择器
语法:父元素>子元素 {属性名:属性值;属性名:属性值; .......} 为具有指定父元素的所有子元素设置样式,其中子元素为父元素的直接子元素(注意和后代子元素的区别)
<style> .s1>p{ color:red; } </style> <body> <p>aa</p> <div class='s1'> <p>bb</p> <div> <p>cc</p> </div> <p>dd</p> </div> <p >ee</p> <!----bb和dd的字体颜色为红色----> </body>
8、兄弟选择器(相邻兄弟选择器+、通用兄弟选择器~)
分为两种:相邻兄弟选择器(+)和通用兄弟选择器(~)
①相邻兄弟选择器
语法:元素E+元素F {属性名:属性值;属性名:属性值; .......} 为紧接着E元素后的F元素设置样式,且E元素和F元素具有相同的父元素(两者为兄弟元素)
<style> .s1+p{ color:red; } </style> <body> <div> <p>aa</p> <p class='s1'>bb</p> <p>cc</p> </div> <p >dd</p> <!----cc的字体颜色为红色----> </body>
②通用兄弟选择器
语法:E~F {属性名:属性值;属性名:属性值; .......} 为E后面的所有能够匹配F的其兄弟元素F设置样式
<style> .s1~p{ color:red; } </style> <body> <div> <p>aa</p> <p class='s1'>bb</p> <div> <p>cc</p> </div> <p>dd</p> <p>ee</p> </div> <p >ff</p> <!----dd和ee的字体颜色为红色----> </body>
9、伪元素选择器
语法:selector: pseudo-element/:: pseudo-element{property:value;........} 通过添加一些实际的元素来向匹配selector选择器的元素添加一些效果
有以下五种:
①:first-line/::first-line伪元素 用于向文本的首行设置特殊样式
②:first-letter/::first-letter伪元素 用于向文本的首字母设置样式
③:before/::before 在元素之前添加内容
④:after /::after 在元素之后添加内容
⑤::selection 设置元素在被选择时的样式。
说明:CSS3之前,伪元素只有1~4四种(::selection为新增),且均为单冒号(:),为了和伪类选择器进行区分,CSS3中规定,伪元素一律使用双冒号(::),但单冒号依然可以使用,且兼容性更好
<style> div{float:left;margin:20px;} h1{font-size:16px;} p{width:200px;padding:5px 10px;border:1px solid #ddd;font:14px/1.5 simsun,serif,sans-serif;} .s1 p:first-letter {float:left;font-size:40px;font-weight:bold;line-height:1;} .s1 p::first-letter {float:left;font-size:40px;font-weight:bold;line-height:1;} .s2 p:first-line {color:#090;} .s2 p::first-line {color:#090;} .s3 p::before{content:"haha--";color:red;} .s4 p::after{content:"--haha";color:red;} .s5 p::selection{background:#000;color:#f00;} </style> <body> <div class="s1"> <h1>杂志常用的首字下沉效果(first-letter)</h1> <p> 今天,阳光明媚,晴空万里,非常适合户外活动,如踏青、远足之类的。长期 坐在办公室的同学们要多注意运动。 </p> </div> <div class="s2"> <h1>杂志常用的首字下沉效果(first-line)</h1> <p> 今天,阳光明媚,晴空万里,非常适合户外活动,如踏青、远足之类的。长期 坐在办公室的同学们要多注意运动。 </p> </div> <div class="s3"> <h1>在元素前添加内容(after)</h1> <p>this is a test</p> </div> <div class="s4"> <h1>在元素后添加内容(after)</h1> <p>this is a test</p> </div> <div class="s5"> <h1>选中下面的文字,看看它的颜色(selection)</h1> <p>你选中这段文字后,看看它们的文本颜色和背景色,就能明白::selection的作用。</p> </div> </body>
效果图为:
附加一个after和before的应用实例
10、伪类选择器
语法:selector: pseudo-classes-selector{property:value;........} 向匹配selector选择器的元素添加一些效果
伪类较多,在此只罗列,不举例
E:link | CSS1 | 设置超链接a在未被访问前的样式。 |
E:visited | CSS1 | 设置超链接a在其链接地址已被访问过时的样式。 |
E:hover | CSS1/2 | 设置元素在其鼠标悬停时的样式。 |
E:active | CSS1/2 | 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。 |
E:focus | CSS1/2 | 设置元素在成为输入焦点(该元素的onfocus事件发生)时的样式。 |
E:lang(fr) | CSS2 | 匹配使用特殊语言的E元素。 |
E:not(s) | CSS3 | 匹配不含有s选择符的元素E。 |
E:root | CSS3 | 匹配E元素在文档的根元素。 |
E:first-child | CSS2 | 匹配父元素的第一个子元素E。 |
E:last-child | CSS3 | 匹配父元素的最后一个子元素E。 |
E:only-child | CSS3 | 匹配父元素仅有的一个子元素E。 |
E:nth-child(n) | CSS3 | 匹配父元素的第n个子元素E。 |
E:nth-last-child(n) | CSS3 | 匹配父元素的倒数第n个子元素E。 |
E:first-of-type | CSS3 | 匹配同类型中的第一个同级兄弟元素E。 |
E:last-of-type | CSS3 | 匹配同类型中的最后一个同级兄弟元素E。 |
E:only-of-type | CSS3 | 匹配同类型中的唯一的一个同级兄弟元素E。 |
E:nth-of-type(n) | CSS3 | 匹配同类型中的第n个同级兄弟元素E。 |
E:nth-last-of-type(n) | CSS3 | 匹配同类型中的倒数第n个同级兄弟元素E。 |
E:empty | CSS3 | 匹配没有任何子元素(包括text节点)的元素E。 |
E:checked | CSS3 | 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时) |
E:enabled | CSS3 | 匹配用户界面上处于可用状态的元素E。 |
E:disabled | CSS3 | 匹配用户界面上处于禁用状态的元素E。 |
E:target | CSS3 | 匹配相关URL指向的E元素。 |
关于伪类和伪元素的区别,推荐一篇博文,感觉写的很好
11、群组选择器
语法:selector1,selector2,selector3,....{property:value;........} 几种选择器共用一种样式,选择器之间用逗号隔开
<style> .s1,p{ color:red; } </style> <body> <p>aa</p> <span class='s1'>bb</span> <a>cc</a> <!----aa和bb的字体颜色为红色----> </body>
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- ie8下透明度处理 2020-06-11
- CSS3 2020-06-05
- css:css3(圆角边框、盒子阴影、文字阴影) 2020-06-05
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash