CSS选择器
来源:互联网 发布:淘宝客在哪里参加 编辑:程序博客网 时间:2024/06/01 19:32
选择器:
描述后面的样式然后施加给一些目标。
根据选择依据的不同,产生了各种选择器。
元素选择器根据标签元素名进行选择,通常选择一般所有的相同元素都有的样式比如下面的例子就是所有的div背景色都是黑色
div{ background-color:#000;}
id选择器通过元素的id来选择样式,只能施加给一个,因为id只能有一个。比如下面的例子就是id为id1的标签字体大小为22px
#id1{ font-size:22px;}
类选择器选择元素的类名来选择样式,通常给所有的相同类的元素施加样式。比如下面的例子就是所有类名包括class1的元素的字体都为红色
.class1{ color:red;}
属性选择器根据元素属性来选择样式,其实他包含了id和类属性。
常用的书写格式为
(1)选择所有包含title属性的元素
[title]{ border:1px solid yellow;}
(2)选择title属性为tt的元素
[title="tt"]{ border:1px solid yellow;}
(3)选择title属性以tt开头的元素
[title^="tt"]
(4)选择title属性以tt结尾的元素
[title$="tt"]
(5)选择title属性包含完整的tt单词的元素
[title~="tt"]
(6)选择title属性包含tt的元素
[title*="tt"]
关系选择器
(1)后代选择器:选择所有该元素的后代,例如下面的例子中类名为div1的所有包含的div的背景颜色都为红色
.div1 div{ background-color:red;}
(2)父子选择器:只选择自己的孩子。例如下面的例子就只有div2能够选中
.div1>div{ background-color:red;}<body> <div class="div1"> <div class="div2"> <div class="div3"></div> </div> </div></body>
(3)相邻选择符,只选择自己旁边的元素下面的例子就只选中了div2
.div1 + div{ background-color:red;}<body> <div class="div1"> </div> <div class="div2"> </div> <div class="div3"></div></body>
(4)兄弟选择器,选择自己所有的兄弟例如下面的例子div2和div3都被选中
.div1 ~ div { background-color:red;}<body> <div class="div1"> </div> <div class="div2"> </div> <div class="div3"></div></body>
伪类其效果与增加一个类来实现效果等价,所以称之为伪类
常用的伪类有
图片来自w3cshcool
这个伪类属性的顺序是有规定的一般为 l h a v
a:link{ text-decoration: none;}a:hover{ color: red; text-decoration: dashed;}a:active{ color: yellow;}a:visited{ color: blue;}
伪元素其效果与增加一个元素来实现的效果等价,称之为伪元素
常见的伪元素有
图片来自w3cshcool
阅读全文
0 0
- CSS选择器,jQuery选择器
- jQuery选择器 CSS选择器
- css选择器-基本选择器
- css选择器-属性选择器
- CSS选择器选择器
- CSS选择器-属性选择器
- css选择器
- css选择器
- css选择器
- Css选择器!
- CSS选择器
- css选择器
- CSS选择器
- CSS选择器
- CSS选择器
- CSS选择器
- css选择器
- css选择器
- c++函数调用到底是如何编译的!
- js闭包
- AB1601 PWM模块
- Selenium环境搭建,谷歌浏览器遇到的问题
- 关于@transactional注解的用处与意义
- CSS选择器
- jdbcTemplate返回自定义Bean的列表
- WebView打不开或者显示异常可能原因
- 互为旋转词
- 两栈共享空间
- Java中System.arraycopy方法的使用
- Unicode(UTF-8, UTF-16)令人混淆的概念
- python geopy package(地名获取经纬度)
- redis和mysql的区别