1.4.2.1简单选择器

选择器

h1{color: red;}
.m-nav{height: 70px;font-size: 14px;}

• 简单选择器
• 伪元素选择器
• 组合选择器

标签选择器

<div>
    <p>段落一</p>
    <p class="special">段落二</p>
    <p class="special stress">段落三</p>
</div>

p{color: blue;}
.specisl{color: red;}
.stress{font-size: bold;}

类选择器

.classname
-.
-字母，数字，-，_
-className必须以字母开头
-区分大小写
-出现多次

id选择器

<div id="banner">
    banner
</div>
<div>
    content
</div>

div{color: gray;}
#banner{color: black;}

• ＃id
  -#
  -字母，数字，-，_
  -id必须以字母开头
  -区分大小写
  -只出现一次

通配符选择器

*{color:blue;}

属性选择器-[att]

form action="">
    <div>
        <input disabled type="text" value="张三">
    </div>
    <div>
        <inpt type="password" placeholder="密码">
    </div>
</form>

[disabled]{bsdkground-color:#ee;}
灰色背景运用上去

属性选择器-[att=val]

<form action="">
    <input type="text" value="文本框">
    <input type="button" value="按钮"
</form>

[type=button]{color:blue;}

属性选择器-[att~=val]

<h2 class="title sports"></h2>
<p class="sports">内容…</p>

[class~=sports]{color:blue;}

属性选择器-[att|=val]

<p lang="en">hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="enfr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

[ang|=en]{color:red;}

属性选择器-[att^=val]

<div>
    <a href="http:www.w3.org/">W3C</a>
    <a href="#html">HTML</a>
    <a href="#css">CSS</a>
</div>

[href^="#"]{color:red}注意包含符号时用引号引起来

属性选择器-[att$=val]

<a href="http://xxx.doc">word文档.doc</a>
<a href="http://xxx.pdf">pdf文件.pdf</a>

[href$=pdf]{color:red;}以什么结尾

属性选择器-[att*=val]

<a href="http://lady.163.com/15.html">女星奥斯卡…</a>
<a href="http://lady.163.com/10.html">范玮琪产后…</a>
<a href="http://sports.163.com/12.html">曝李楠有望…</a>
<a href="http://sports.163.com/09.html">皇马1亿…</a>

[href*="lady.163.com"]{color:pink;}href里包含……

伪类选择器

<a href="http://www.163.com">网易首页</a>

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}

伪类选择器

<ul>
    <li>一</li>
    <li>二</li>
    <li>三</li>
    <li>四</li>
    <li>五</li>
    <li>六</li>
</ul>

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}第三行，第六行变红

<ul>
    <li>一</li>
</ul>
<ul>
    <li>一</li>
    <li>二</li>
</ul>

两个列表，第一个有一个元素，，第二个有两个元素
假设选中只有一个元素的第一个列表
:only-child{color:red;}

<dl>
    <dt>作者：</dt>
    <dd>Dave Shea</dd>
    <dd>Molly E.Holzschlag</dd>
    <dt>出版社：</dt>
    <dd>人民邮电出版社</dd>
</dl>

使第一个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}

<p><span>CSS</span>和<span>HTML</span>是页面制作的基础。</p>
<p><span>CSS</span>主要是用于定义<em>HTML</em>内容在浏览器内的显示样式</p>

选中只用某一种类型的元素，选中第二段里的CSS元素，改变他的样式
span:only-of-type{color:red;}
不能用 only-of-child因为span元素不是p唯一的属性，它还有em属性

不常用的选择器

• :empty
  <p></p>选中页面中没有子元素的元素
• :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;
}

当我们选中文字时，字体变为红色，背景变为灰色

组合选择器

• 后代选择器
• 子选择器
• 兄弟选择器

<div class="main">
    <h2>标题一</h2>
    <div>
        <h2>标题二</h2>
        <p>段落一</p>
    </div>
</div>

.main h2{color:red;}
两个h2都为红色
子选择器
.main>h2{color:red;}
将中间的空格替换为大于号，第一个h2标题变红

<div>
    <h2>标题</h2> 
    <p>段落一</p>
    <p>段落二</p>
</div>

兄弟选择器
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>
    <div>页面头部</div>
        <div>
            <h2>标题</h2>
            <p>内容</p>
            …
        </div>
    <div>页面尾部</div>
</body>
…    

body{font-family:"Microsoft Yahei";}

继承

• -color
• -font
• -text-align
• -list-style
• …

<div>
    <h2>标题一</h2>
    <p>段落一</p>
</div>

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层叠

• 相同的属性会覆盖
  -优先级高覆盖低
  -后面覆盖前面
• 不同的属性会合并

<div>
    <p class="special">css层叠…</p>
</div>

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是在前面两种方法都不可行的情况下使用的。