1.4.2.1简单选择器
选择器
h1{color: red;}
.m-nav{height: 70px;font-size: 14px;}
- 简单选择器
- 伪元素选择器
- 组合选择器
标签选择器
段落一
段落二
段落三
p{color: blue;}
.specisl{color: red;}
.stress{font-size: bold;}
类选择器
.classname
-.
-字母，数字，-，_
-className必须以字母开头
-区分大小写
-出现多次
id选择器
content
div{color: gray;}
#banner{color: black;}
- ＃id
-#
-字母，数字，-，_
-id必须以字母开头
-区分大小写
-只出现一次
通配符选择器
*{color:blue;}
属性选择器-[att]
form action="">
[disabled]{bsdkground-color:#ee;}
灰色背景运用上去
属性选择器-[att=val]
[type=button]{color:blue;}
属性选择器-[att~=val]
内容…
[class~=sports]{color:blue;}
属性选择器-[att|=val]
hello!
Greetings!
G'day!
Bonjour!
Jrooana!
[ang|=en]{color:red;}
属性选择器-[att^=val]
[href^="#"]{color:red}注意包含符号时用引号引起来
属性选择器-[att$=val]
word文档.doc
pdf文件.pdf
[href$=pdf]{color:red;}以什么结尾
属性选择器-[att*=val]
女星奥斯卡…
范玮琪产后…
曝李楠有望…
皇马1亿…
[href*="lady.163.com"]{color:pink;}href里包含……
伪类选择器
网易首页
a:link{color:gray;}
以冒号开头，link表示连接，选中页面中所有的连接，使字体颜色变灰色。
href里有值的a标签
a:visited{color:red;}
访问过以后变红
a:hover{color:green}
鼠标以上去显示绿色
a:active{color:orange}
用户鼠标点击上去的表示
link visited只用于连接属性，剩下两个都可以
定义四种状态的属性，书写方式如上，link visited hover active
伪类选择器
- :enabled
-input:enabled{color:#ccc}
元素可用的状态 - :disabled
-input:disabled{color:#ddd}
元素不可用状态 - :checdked
-input:checked{#red}
伪类选择器
- 一
- 二
- 三
- 四
- 五
- 六
li:frist-child{color:red}第一行变红
li:last-child{color:red}最后一行变红
li:nth-chid(even){color:red}偶数项变红
li:nth-chid(3n+1){color:red}第一行，第四行变红
li:nth-last-chid(3n+1){color:red}第三行，第六行变红
- 一
- 一
- 二
两个列表，第一个有一个元素，，第二个有两个元素
假设选中只有一个元素的第一个列表
:only-child{color:red;}
- 作者：
- Dave Shea
- Molly E.Holzschlag
- 出版社：
- 人民邮电出版社
使第一个dd标签的内容变为红色
dd:first-of-type{color:red}
使最后一个dt标签内容变为红色
dt:last-of-type{color:red}
第偶数个dd元素为红色
dd:nth-of-type(even){color:red}
倒数偶数项dt
dt:nth-last-of-type(2n){color:red}
CSS和HTML是页面制作的基础。
CSS主要是用于定义HTML内容在浏览器内的显示样式
选中只用某一种类型的元素，选中第二段里的CSS元素，改变他的样式
span:only-of-type{color:red;}
不能用 only-of-child因为span元素不是p唯一的属性，它还有em属性
不常用的选择器
- :empty
选中页面中没有子元素的元素 - :root
选中html根标签 - :not()
- :target
- :lang()
简单选择器
- tag{} 标签选择器
- .className{} 类选择器
- ＃id{} id选择器
- *{} 通配符选择器
- [att]{} 属性选择器
- :link{} 伪类选择器
简单选择器可以组合
img[src$=jpg]{}
也是简单选择器，img标签src值是以jpg结尾的
banner:hover{}
选中id为banner元素的hover状态
1.4.2.2其他选择器
伪元素选择器
- 段落第一个字母变红
::first-letter{color:red;}
-两个冒号，区别于伪类选择器 - 选中第一行变为红色
::first-line{color:red;} - 给内容的前面和后面加一些辅助的内容
::before{content:"before"}
::after{content:"after;}
与content属性一起用。 - 选中被用户选中内容的样式
::selection{
color:red;
background-color:#ccc;
}
当我们选中文字时，字体变为红色，背景变为灰色
组合选择器
- 后代选择器
- 子选择器
- 兄弟选择器
标题一
标题二
段落一
.main h2{color:red;}
两个h2都为红色
子选择器
.main>h2{color:red;}
将中间的空格替换为大于号，第一个h2标题变红
标题
段落一
段落二
兄弟选择器
h2+p{color:red;}
p标签直接的前面是h2，这样选中的是段落一，不会选中段落二
h2~p{color:red;}
选中的是两个p标签，即段落一与二，表示p标签前面有一个h2不用近邻
选择器分组
h1{color: gray;font-family: sans-serif;}
h2{color: gray;font-family: sans-serif;}
h3{color: gray;font-family: sans-serif;}
以上可以简化为
h1,h2,h3,{color: gray;font-family: sans-serif;}
之间用逗号隔开，将统一的样式写下
1.4.2.3继承，优先级，层叠
使页面中所有的字体为微软雅黑？
…
页面头部
标题
内容
…
页面尾部
…
body{font-family:"Microsoft Yahei";}
继承
- -color
- -font
- -text-align
- -list-style
- …
标题一
段落一
div{color:red;}
div 里所有属性变为红色
非继承属性
- -background
- -border
- -position
- …
同样上例中，给div一个border属性，border属性不会被自动继承
div{border:1px solid #ccc;}
文档上描述属性详情的时候，有inherited表示属性是否可以继承。
CSS优先级
- 计算方法
-a 行内样式
-b ID选择器的数量
-c 类，伪类和属性选择器的数量
-d 标签选择器和伪元素选择器的数量
权重
value=a1000+b100+c*10+d
h1=1
p>em=2
style:""=1000
.comment p=11
div#content=101
a:link=11
优先级高的样式，覆盖优先级低的样式
CSS层叠
- 相同的属性会覆盖
-优先级高覆盖低
-后面覆盖前面 - 不同的属性会合并
css层叠…
p{
color: blue;
text-align: left ;
font-weight: bold;
}
p.special{
color: red;
text-align: right;
}
p:first-child{color:green;}
最后字体为：绿色，有对齐，加粗
CSS改变优先级
- 改变先后顺序
- 提升选择器优先级
- ! important
改变先后顺序
改变位置，上下选择器互换位置
提升选择器的优先级
例如加一个标签选择器
! important
.tip{
color: blue !important;
}
p.special{
color: red;
}
!important是在前面两种方法都不可行的情况下使用的。