CSS选择器

 

一般的选择器

1. 标签选择器

以html标签的名称作为标示符如

p {color:red;}

<p>这是一段文字</p>

显示结果段落文字显示为红色

1. ID、类 选择器

使用html标签的class值

p {color:red;}
p.blue{color:blue;}

 <p>这是一段红色文字</p>
 <p class="blue">这是一段蓝色文字</p>

1. 属性选择器

[attr^=val] ： 以val开头

[attr$=val] ： 以val结尾

[attr*=val] ： 包含val

/*data-role以h开始的div*/
div[data-role^=h]{color:red;}
/*data-role以content结尾的div*/
div[data-role$=content]{color:blue;}
/*data-role包含foot的div*/
div[data-role^=header]{color:yellow;}

<div data-role="h-header">header</div>
<div data-role="c-content">content</div>
<div data-role="f-footer">header</div>

 

 

 

伪类、伪元素选择器

以‘:’、’::’ 作为开始

:first-child - 选择子元素的第一项 ；

:last-child - 选择子元素的最后项；

:nth-child(n) – 选择第n个子元素

/*选中子元素只有一个的ul子元素*/
ul.test_only :only-child {background-color: red;}

/*第一个子元素*/
li:first-child {color: red;}
/*最后一个子元素*/
li:last-child {color: orange;}
/*偶数项子元素*/
li:nth-child(2n){background-color: #ccc;}
/*奇数项子元素*/
li:nth-child(2n+1){background-color: yellow;}
<ul class="test_only">
        <li>only li</li>
    </ul>
    <ul class="test_only">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>

:first-of-type - 选择子元素为某类型的的第一个子元素，p:first-of-type 选择子元素为p的第一个元素

:last-of-type – 选择子元素为某类型的的最后一个子元素

:nth-of-type(n) - 选择子元素为某类型的第n子元素

/*类型为dt的第一个子元素*/
dt:first-of-type {background-color: #ccc;}
/*类型为dt的最后一个子元素*/
dt:last-of-type {background-color: red;}
/*类型为dd的第三个子元素*/
dd:nth-of-type(3) {background-color: orange;}
/*类型为dd的倒数第三个子元素*/
dd:nth-last-of-type(3) {background-color: yellow;}


<dl>
    <dt>作者</dt>
    <dd>Leon</dd>
    <dt>出版社</dt>
    <dd>人民出版社</dd>
    <dt>出版时间</dt>
    <dd>2014-01-02</dd>
</dl>

伪元素选择器:

/**
      * 伪元素选择器
      * ::first-letter 选择第一个字;
      * ::first-line 选择第一行;
      * ::before{content:"";} 在选择元素前面加入content内容
      * ::after{content:"";}; 在选择元素后面加入content内容
      * ::selection 被选中的内容，如鼠标选择的内容
      */
/*第一个字变大*/
div.oth-class p::first-letter{font-size:25px;font-weight:bold;}
div.oth-class p::first-line{color:red;}
/*前面加上before，after和before添加的内容无法被鼠标选中*/
div.oth-class p::before{content:"before";}
div.oth-class p::after{content:"after";}
/*被鼠标选择内容*/
div.oth-class p::selection{background-color: #ccc;color:orange;}



<div class="other">
     <p></p>
     <p>我是段落</p>

     <div><span>我是div，我有一个span</span></div>
     <div>我是div，没有span</div>

 </div>

 <div class="oth-class" style="border:1px solid red;">
     <p>这是一段文字，<br>这段文字有两行.</p>
 </div>

 

 

 

 

3. 选择器的优先级

CSS对选择器的优先级有一个计算方法

a=行内样式

b=ID选择器的数量

c=类、伪类和属性选择器的数量

d=标签选择器和伪元素选择器的数量

a,b,c,c的权重依次为1000,100,10,1

最终的权重值value=a*1000+b*100+c*10+d ,

CSS层叠：

相同属性 -  优先级高覆盖优先级低，优先级相同后面覆盖签名的。

不同属性 -   叠加在一起。

明确指定的属性有限与父元素继承来的属性。