1.css选择器
1.引入外部样式表的格式:
<link rel=”stylesheet” type=”text/css” href=”../css/style1.css”>
2.样式表第一行应注明编码类型:
@charset “utf-8”;
3.css语法:
①一个元素中多个属性用分号隔开,多个元素之间用逗号隔开;
②元素中属性的值一般不加引号,但是当值是若干个单词,就要给值加引号;
③注释:/*```*/ (快捷键是ctr+?);
④优先级:内联样式>内部样式>外部样式;但是!important是强制优先的作用;
4.css选择器:行内样式优先级>id选择器优先级>类选择器优先级>元素选择器优先级
①常用选择器:
②属性选择器:
⑴选择具有value和style属性的input元素:
⑵选择具有value属性且属性值等于vip的input元素:
⑶选择具有value属性且属性值有多个且其中一个的值等于vip的input元素:
⑷选择具有lang属性且属性值以en开头且用’-’分隔的p元素:
⑸选择具有value属性且属性值以vip开头的input元素:
⑹选择具有value属性且属性值以vip结尾的input元素:
⑺选择具有value属性且属性值包含vip的input元素:
③关系选择器:
⑴后代选择器(包含选择器):
⑵子元素选择器:与后代选择器相比,只能选择作为某元素子元素的元素,缩小了选择范围。
⑶相邻选择符:选择紧贴在**元素之后的元素。
⑷兄弟选择器:选择**元素之后的所有兄弟元素。
④伪元素选择器:
⑴E:first-letter/e::first-letter:设置e元素内第一个字符的样式。
⑵E:first-line/e::first-line:设置e元素内第一行样式。
⑶E:before/e::before:在每个e元素之前插入内容。用来和content属性一起使用。
⑷E:after/e::after:在每个e元素之后插入内容。用来和content属性一起使用。
⑸E:selection/e::selection:设置对象被选择时的颜色。
⑤伪类选择器:
E:first-child:选择父元素的第一个子元素e。
:root:选择文档的根元素。
E:last-child:最后一个子元素e。
E:only-child:仅有的一个子元素e。
E:only-of--type:只有一种类型的子元素。
E:nth-child(n):匹配父元素的第n个子元素e。
E: nth-last-child(n):匹配父元素的倒数第n个子元素e。
E: first-of--type:匹配同类型中第一个同级兄弟元素e。
E: last-of--type:匹配同类型中最后一个同级兄弟元素e。
E: nth-of-type(n):匹配同类型中第n个同级兄弟元素e。
E: nth-last-of-type(n):匹配同类型中倒数第n个同级兄弟元素e。
E:empty:匹配没有任何子元素的元素。
⑥UI伪类选择器:
E:active:向被激活的元素添加样式(点击的时候)。
E:hover:当鼠标悬浮在元素上方时,向元素添加样式。
E:link:当未被访问的链接添加样式。
E:visited:向已被访问的链接添加样式。
⑦其他选择器:
E:focus:向拥有键盘焦点的元素添加样式。
E:lang(en):向带有指定lang属性的元素添加样式。
#E:target:选择当前活动的锚点元素。
:not(E):选择e元素之外的每个元素。
Input:checked:选择每个被选中的input元素。
Input:disabled:选择每个被禁用的input元素。
Input:enabled:选择每个被启用的input元素。
1.css选择器的更多相关文章
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- css选择器
常用css选择器,希望对大家有所帮助,不喜勿喷. 1.*:通用选择器 * { margin: 0; padding: 0; } 选择页面上的全部元素,通常用于清除浏览器默认样式,不推荐使用. 2.#i ...
- dynamic-css 动态 CSS 库,使得你可以借助 MVVM 模式动态生成和更新 css,从 js 事件和 css 选择器的苦海中脱离出来
dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...
- CSS选择器的权重与优先规则?
我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用 ...
- css选择器的使用详解
-.css选择器的分类: 二.常用选择器详解: 1.标签选择器: 语法: 标签名 { 属性:属性值; } 代码示例: h1 { color: #ccc; font-size: 28px; } 2.类选 ...
- js,jq,css选择器
js获取节点: var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; / ...
- CSS系列:CSS选择器
选择器(selector)是CSS中很重要的概念,所有HTML语言中的标记样式都是通过不同的CSS选择器来控制的.用户只需要通过选择对不同的HTML标签进行选择,并赋予各种样式声明,即可实现各种效果. ...
- 细说CSS选择器
众所周知,CSS的一个核心特征就是能向文档中的一组元素类型应用某些规则.每个规则都有两个基本部分:选择器(selector)和声明块(declaration block).下图显示了规则的各个部分. ...
- CSS选择器 转
来自于:http://www.cnblogs.com/webblog/archive/2009/08/07/1541005.html 最近在研究jQuery的选择器,大家知道jQuery的选择器和cs ...
- HTML5 -入门 (---css样式-------------(css基础与css选择器)---------------------—)
---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...
随机推荐
- Python将函数放入模块
函数可以将通用的代码封装起来,便于其他程序或者方法调用.将函数存放在文件中,这个文件被称为模块.将函数存储在独立的模块中,可与其他程序员共享这些文件而不是整个程序. fun.py def say_hi ...
- 解释HTTP中Get和Post。它们有什么区别,哪个使用时更加安全?
Get和Post都是浏览器向网页服务器提交数据的方法. Get把要提交的数据编码在url中,比如/workinfo.jsp/mianshiti?key1=value1&key2=value2中 ...
- 在已开启Chrome窗口上调试
代码 @Test void testNow() { /* First: Add the chrome.exe to the PATH. * Then: open the cmd and input t ...
- [Ajax三级联动 无刷新]
三级联动 的效果图 html页面: <body> <label class="fl">区域:</label> <select class= ...
- LC 358. Rearrange String k Distance Apart
Given a non-empty string s and an integer k, rearrange the string such that the same characters are ...
- 软件-效率:Microsoft To Do
ylbtech-软件-效率:Microsoft To Do Microsoft To Do To Do 让你从工作到娱乐都保持专注. 1.返回顶部 1. 智能每日计划 使用“我的一天”,用智能个性化建 ...
- 运维之思科篇——NAT基础配置
一. NAT(网络地址转换) 1. 作用:通过将内部网络的私有IP地址翻译成全球唯一的公网IP地址,使内部网络可以连接到互联网等外部网络上. 2. 优点: 节省公有合法IP地址 处理地址重叠 增强灵活 ...
- HAproxy负载均衡-ACL篇(转) blog.csdn.net/tantexian
ACL定制法则: 开放策略:拒绝所有,只开放已知 拒绝策略:允许所有,只拒绝某些 事实上实现安全策略,无非也就是以上两种方法 redirect 参考:http://cbonte.github.io/h ...
- 小D课堂 - 零基础入门SpringBoot2.X到实战_第14节 高级篇幅之SpringBoot多环境配置_59、SpringBoot多环境配置介绍和项目实战
笔记 1.SpringBoot多环境配置介绍和项目实战(核心知识) 简介:SpringBoot介绍多环境配置和使用场景 1.不同环境使用不同配置 例如数据库配置,在开发的时候, ...
- Linux 服务器基本优化
一:修改ulimit数 vi /etc/security/limits.conf 添加如下行: * soft noproc 65535 * hard noproc 65535 * soft nofil ...