css3选择器
2018-06-27 09:06:47来源:未知 阅读 ()
通配符选择器
通配选择器的作用就是对页面上所有的元素都生效,
页面上的所有标签都会展示出通配符选择器设定的样式。
这样的弊端就是影响网页渲染的时间。所以不推荐直接使用通配符选择器
取代写法就是 把需要统一设置的元素放在一起,通过 [分组选择器]
一次性设置。
对于初学者,不用过于在于网页打开速度以及性能问题,对于什么时候使用
通配符选择器呢?在你需要的时候直接用就可以。其实也就下面这段代码。
如:code1
通配符的另一个用法就是给某个元素的后代设置相同的样式。如:code3
结合类选择器使用。
code1
{
margin: 0;
padding: 0;
}
-------------------
分组选择器(并集选择器)
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {
/*code2*/
margin:0;
padding:0;
}
--------------------
标签选择器
h1{
color: blue;
}
p{
font-family: 微软雅黑;
color: cadetblue;
}
--------------------
类选择器: 最常用的选择器
类选择器的单独使用
.desc{
border: dashed;
}
类选择器和其他形式组合使用
.desc p{
color: deeppink;
font-size: 20px;
}
.desc *{
/*code3*/
color: deeppink;
}
--------------------
ID选择器
需要注意的是,注意大小写.
不能使用词列表,参考区别2,错误代码如下:
#title name{
font-size: 30px;
}
可以和其他选择器结合使用
#title{
font-size: 30px;
}
#title .name{
color: #000;
}
--------------------
后代选择器(包含选择器)
.desc p{
color: deeppink;
font-size: 20px;
}
.descendant em{
font-weight: bold;
}
--------------------
子元素选择器
.child > p > em{
font-size: 30px;
}
--------------------
相邻选择器
可以结合其他选择器使用
需要注意的是:使用相邻选择器,必须是有共同的父元素
.Adjacent h5 + p {
margin-top:50px;
}
兄弟选择器
.Adjacent h5 ~ p{
font-size: 30px;
}
--------------------
属性选择器
页面上所有的超链接标签颜色都会变成红,也可以和其他选择器组合使用
根据一个属性去选择
.testA a[href] {
color:red;
}
a[href] {
color:red;
}
根据多个属性去选择
同样也可以和其他选择器组合使用
a[href][title] {
font-size: 25px;
}
根据具体的属性值去选择,案例如上
a[href='#'][title='test'] {color: deeppink;}
属性与属性值必须匹配
a[class='aaa bbb']{
color: chartreuse;
}
根据部分属性值选择,即只要该属性中存在指定值得元素都会被选择到
如果忽略了波浪号,则说明需要完成完全值匹配
p[class~='important']{
color: red;
}
子串匹配属性选择器 : 分三种
选择的属性中,属性值以指定的属性值开头
a[href ^= 'http://www.apple']{
color: deeppink;
}
选择的属性中,属性值以指定的属性值结尾
a[href $= 'microsoft.com']{
color: cadetblue;
}
选择的属性中,属性值存在指定的属性值
a[href*='www.w3school.com']{
color: red;
}
特定属性选择类型
属性选择器最常见的用途还是匹配语言值
p[lang|='en']{
color: red;
}
--------------------
伪类
伪类名对大小写不敏感;
:active 需要放在 :hover 后边才会生效;
:hover 需要放在 :link :visited 后边才会生效;
另外伪类也可以和其他选择器结合使用
a:link {color: #FF0000} 未访问的链接
a:visited {color: #00FF00} 已访问的链接
a:hover {color: #FF00FF} 鼠标移动到链接上
a:active {color: #0000FF} 选定的链接
:first-child 伪类来选择元素的第一个子元素
.wl p:first-child{
color: red;
} 容易被误解!读法:选用.wl这个类的元素下边第一个p标签,并不是p标签内的第一个元素,与下边样式对比
.wl p i:first-child{
font-size: 30px;
} 读法:.wl 类下所有p标签中的第一个 i 标签
.wl p:first-child i{
color: #FF00FF;
} 读法:.wl 下边的第一个 p 标签中所有 i 标签
.wl li:first-child{
font-family: monospace;
}
--------------------
伪元素 注:也可以和其他选择器结合使用
:first-line 伪元素:用于向文本的首行设置特殊样式
:first-line 只能用于块级元素,看页面样式
注:以下属性可以用于伪元素:first-line中
font
color
background
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
.wl p:first-line {
color:#ff0000;
font-variant:small-caps;
}
:first-letter: 处理首字母
:first-letter 只能用于块级元素,看页面样式
注:以下属性可以用于伪元素:first-letter中
font
color
background
margin
padding
border
text-decoration
vertical-align (仅当 float 为 none 时)
text-transform
line-height
float
clear
.wl p:first-letter{
color: chocolate;
}
以上两个就构成了多重伪元素
:before 伪元素 :可以在元素的内容前面插入新内容
.wl p:before{
content: url("");
}
.wl p:after{
content: url("");
}
********
关于选择的优先级的问题
id选择器优先级 > 类选择器优先级 > 标签选择器优先级
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:你如何理解HTML结构的语义化?
下一篇:BFC布局原理
- ie8下透明度处理 2020-06-11
- CSS3 2020-06-05
- css:css3(圆角边框、盒子阴影、文字阴影) 2020-06-05
- css:选择器(标签、类、ID、通配符) 2020-05-29
- CSS基础选择器总结 2020-05-27
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