首页 > Web开发 > 详细

CSS的选择器

时间：2016-09-12 18:41:53 阅读：156 评论：0 收藏：0 [点我收藏+]

标签：

基本选择器

　　1.标签选择器

　　　　使用标签名作为选择器的名称

　　　　div {

　　　　　　color: white;

　　　　}

　　2.类选择器

　　　　在标签内使用class属性定义类名

　　　　<div class="hello"></div>

　　　　　　.hello / div.hello {

　　　　　　color: white;

　　　　}

　　3.id选择器

　　　　在标签内使用id属性定义类名

　　　　<div id="hello"></div>

　　　　#hello 或 div#hello {

　　　　　　color: white;

　　　　}

　　　　id选择器在整个HTML文档中是唯一的，同一个id只能定义一次

优先级

　　行内样式 > id选择器 > class选择器 > 标签选择器

扩展选择器

　　1.关联选择器

　　　　<div><p>~~~~~~</p></div>

　　　　设置div里p的样式

　　　　div p {

　　　　　　color: white;

　　　　}

　　2.组合选择器

　　　　<div>1111</div>

　　　　<p>2222</p>

　　　　把div和p设置成相同的样式

　　　　div,p {

　　　　　　color: white;

　　　　}

　　3.伪元素选择器

　　　　伪类

　　　　　　:link 元素未访问前，比如超链接未点击前

　　　　　　:hover 鼠标指针悬浮在元素上

　　　　　　:active 点击元素鼠标未释放时

　　　　　　:visited 元素访问后，比如超链接点击后

　　　　　　:focus 元素获得焦点时，按Tab键切换焦点

　　　　　　:first-child 对象的第一个子对象

　　　　　　:first 页面容器第一页

　　　　　　:left 页面容器位于装订线左边的所有页面

　　　　　　:right 页面容器位于装订线右边的所有页面

　　　　　　:lang 对象使用特殊语言的内容

　　　　伪对象

　　　　　　:first-letter 对象内第一个字符

　　　　　　:first_line 对象内第一行

　　　　　　:before 和content属性一起使用，设置在对象前发生的内容

　　　　　　:after 和content属性一起使用，设置在对象后发生的内容

CSS的选择器

标签：

原文地址：http://www.cnblogs.com/linyisme/p/5865416.html

踩

(0)

赞

(0)

举报

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

更多

友情链接

兰亭集智国之画百度统计站长统计阿里云 chrome插件新版天听网

关于我们 - 联系我们 - 留言反馈

© 2014 mamicode.com 版权所有联系我们:gaon5@hotmail.com

迷上了代码！