选择器

属性选择器-[att]

<from action="">
    <div>
        <input disabled type="text" value="张三" />
    </div>
    <div>
        <input type="password" placeholser="请输入密码" />
    </div>
</from>
<!--from是block元素，input是inline-block元素，div:block-->
<!--block:可设置宽高，占父宽100%，换行-->

<style type="text/css">
    [disabled]{background:#f8f8f8;}//属性为disabled的标签背景色被修改为#f8f8f8.此例子中为<input>元素
</style>

---

-[att=val]

[att-val]表示选中元素某个属性att并且值为val的元素

可以通过属性选择器将按钮文本框更改样式，代码如下

<form atcive=" ">
    <input type="text" placeholder="文本框"/>
    <input type="buttom" value="按钮" />
</form>

<style tpye="text/css">
    [type=buttom]{color:blue;}//选中type="button"的元素
</style>

注意：其实id选择器是属性选择器的一个特殊例子，可以用一下方式

#nav{} == [id=nav]{}//id属性值为nav的元素被选中

---

-[att~=val]

<h2 class="title sports">标题</h2>
<p class="sports">内容...</p>

[class~=sports]{color:blue;}
//之前所使用的类选择器也是这类选择器的一个特例
.sports{} == [class~=sports]{}//选中了包含sports的元素

---

-[att|=val]

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">Gdog!</p>
<p lang="enfr">Bonjour</p>
<p lang="cy-en"></p>

选择方式：
[lang|=en]{color:red;}//选择lang属性值为en或者包含en-的元素
所以将会选择到lang="en" lang="en-us" lang="en-au" 
经验：这个选择方式用得不多，一般也就在lang属性上使用

---

-[att^=val]

选中某个属性以特定字符开头的属性值

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

a[href^="#"]{color:red}//这里会选中href属性值中以#字符的开头的元素，**之前的属性选择里属性值没有引号，这里属性值有加引号。**

---

-[att$=val]

选中att属性值末尾为val的元素

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

a[href$=pdf]{color:red;}

---

-[aat*=val]

利用通配符，选择属性aat中包含val值的元素

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

选择方式:
a[href*="sport"]{}//将选择运动频道

---

伪类选择器

:enabled//元素可用状态时选中
----input:enabled{color:#ccc;}
:disabled//元素不可用时选中
----input:disabled{color:#ddd;}
:checked//元素被选中时
-----input:checked{color:#ddd;}

nth-child(n){color:red;}//从0开始
<ul>
    <li>一</li>
    <li>二</li>
    <li>三</li>
    <li>四</li>
    <li>五</li>
</ul>

li:nth-child(0){color:red;}//"一"字符将为红色
li:nth-last-child(3n+1){color:red;}

tr:nth-child(even){}//将会选择表格中的偶数行

only-child{color:red;}//只会选中只有一个子元素的项
<ul>
    <li>一</li>
</ul>
<ul>
    <li>上/li>
    <li>二</li>
</ul>

ul:only-child{color:red;}//选中"一"

---

span:only-of-type{}

伪元素选择器

选中第一个字符

::first-letter{color:red}//选择第一个字符设置为红色
<p>
   Css伪元素选择器是....
</p>

执行样式之后C将为红色

---

选中第一行字符

::first-line{color:red;}
<p>伪元素选择器可以为第一行文字设置特殊样式</p>

p::first-line{color:red;}

在元素的前面或者后面插入内容

<p>
    在摸个元素之前插入一些内容
    在某个元素之后插入一些内荣
</p>

p::before{content:"before";}
p::after{content:"after";}

brfore在摸个元素之前插入一些内容

::selection伪元素

用于被用户选中的内容更改

<p>
    ::select伪元素选择前往应用于被用户选中的内容
</p>

::selection{
    color:red;
    background:#ccc;
}

组合选择器