html 02 css控制之css选择器及其优先级
来源:互联网 发布:办公软件word视频教程 编辑:程序博客网 时间:2024/05/29 16:31
一、css选择器的分类
1、派生选择器
如何理解“派生”,比如说“中国的广东,你的学生”等这种关系称之为派生,网页类似
li strong {
font-style
:
italic
;
font-weight
:
normal
;
}
2、id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。一个页面内不能出现相同的ID
id 选择器以 "#" 来定义。
格式:
#id名 { 属性名:属性值; }
3、类选择器(class选择器)
将 class 指定为一个适当的值
格式:
.class名 { 属性名:属性值; }
4、属性选择器
可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。
①属性选择器
[title]
{color:red;}
②属性和值选择器[title=W3School]
{border:5px solid blue;}
③设置表单的样式属性选择器在为不带有 class 或 id 的表单设置样式时特别有用:
input[type="text"]{ width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial;}input[type="button"]{ width:120px; margin-left:35px; display:block; font-family: Verdana, Arial;}
二、css选择器优先级
一般而言,选择器越特殊,它的优先级越高。也就是选择器指向的越准确,它的优先级就越高。通常我们用1表示标签名选择器的优先级,用10表示类选择 器的优先级,用100标示ID选择器的优先级。比如上例当中 .polaris span {color:red;}的选择器优先级是 10 + 1 也就是11;而 .polaris 的优先级是10;浏览器自然会显示红色的字。理解了这个道理之后下面的优先级计算自是易如反掌:
- div.test1 .span var 优先级 1+10 +10 +1
- span#xxx .songs li 优先级1+100 + 10 + 1
- #xxx li 优先级 100 +1
0 0
- html 02 css控制之css选择器及其优先级
- CSS选择器及其优先级
- HTML与CSS基础之选择器优先级(十)
- Html+Css详解Css选择器,优先级与匹配原理
- html之css属性选择器,伪类,继承,选择器优先级,float
- css之html选择器---shinepans
- CSS选择器的优先级
- CSS选择器笔记-优先级
- css选择器优先级
- CSS 选择器优先级
- CSS选择器优先级问题
- css选择器优先级
- CSS选择器及优先级
- css选择器优先级
- CSS选择器及优先级
- css选择器优先级判定
- CSS选择器优先级
- css选择器优先级
- BaseAdapter 的使用
- OpenStack设计与实现5——RESTful API和WSGI
- 设计模式随笔-工厂模式
- 学习笔记 C++ 封装(下)
- python3爬虫(1)--百度百科的页面爬取
- html 02 css控制之css选择器及其优先级
- Python 爬虫
- 2016CCPC东北-B.Mr. Frog’s Problem
- 14. Longest Common Prefix
- hibrenate @ManyToOne(fetch = FetchType.EAGER) 和 lazy 区别
- Android 自定义图形实例
- MATLAB图形用户界面设计GUI
- 我终于连接access到jsp中啦!
- java.lang.NoSuchMethodException异常解决