首页 > 代码库 > CSS基础-选择器

CSS基础-选择器

CSS

CCS是层叠样式表(Cascading Style Sheets)的缩写

2.1 CSS引入方式

  1. 内联样式表:卸载标签的开始标记中,其作用范围仅限当前元素

    <h1 style="color:red">红色标题</h1>
    

    2.内部样式表:写在网页的<head>标签内,,写在<title>标签后,用<style>标签包含,其作用范围仅限当前网页

    <style>
    h1{
        colo:red
    }
    </style>
    
  2. 外部样式表:写在网页的<head>标签内,,写在<title>标签后,使用<link>标记引入代码,引入的是一个外部样式表(新建一个Stylesheet.css文件,用于写样式)的文件链接

    <link rel="styelsheet" href="http://www.mamicode.com/样式表的地址"/>
    

2.2层叠

层叠次序:
1. 浏览器缺省设置(最低优先权)
2. 外部样式表
3. 内部样式表(2.3优先权相等,取决于两个的位置,后面的会覆盖前面的)
4. 内联样式 (最低优先权)

2.3 CSS基础语法规则

CSS规则由选择器和声明(一条或多条)两部分组成

    选择器{<br>
        声明1;<br>
        声明2;<br>
        ...<br>
        声明n;<br>
    }

例:

    p{
    color:red;
    }

注意:
①选择器:通常是需要改变样式的HTML元素
②每条声明有一个属性和一个属性值组成,每条声明由分号;结束

常用相对长度单位有:px,%,em,rem(em,rem多用于手机页面)

2.4 选择器

2.4.1 选择器分类

1.元素选择器

通常是某个HTML元素,比如p,h1,em,a甚至可以是html本身

2. 类选择器

在使用类选择器之前,需修改具体的文档标记,以便类选择器正常工作

    <p class="text">示例一</p>
    <h1 class="text">示例二</h1>
  1. 同一个class名可应用在多个HTML标签上

    .text{
    font-size:10px;  
    } 
    <p><h1>字体均变为10px
    
  2. 类选择器也可以结合元素选择器使用

    p.text{color:blue}(注意p与.与text间不能有空格)
    只将<p>颜色变为蓝色
    
  3. 一个元素可以有多个类选择器

    <p class="text text2"></p> (text与text2间用空格隔开)
    

3. ID选择器

    #into{color:red;}
    <p id="into">段落</p>

类似于类选择器,有一定区别:
①同一个名字的ID选择器在同一个HTML文档中,只能使用一次
②一个元素只能有一个ID选择器

4. 属性选择器

如果希望选择有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器

例:希望给包含title属性的所有元素添加宽度为1px的实线红色边框,可以写作:

    [title]{border:1px solid red}
    <a href="http://www.mamicode.com/#" title="a">点击</a>
    <img sre="" title="logo"/>

也可以只对包含title属性的a标签添加样式,写作

    a[title]{border:1px solid red}

5. 伪类选择器:

结构:选择器:伪类选择器{属性:值}
1. 锚伪类选择器:

a:link{color: }         未访问的链接
a:visited{color: }      已访问的链接
a:hover{color: }        鼠标移动到链接上
a:active{color: }       选中的链接(鼠标点中的时候)

注意:四个效果均实现需,a:hover必须在a:linka和a:visited之后,a:active必须在a:hover之后
2. :focus伪类选择器:在元素获得焦点时向元素添加样式

input:focus{
    background-color:yellow;
}
<input type="text">
效果:鼠标点击输入框时,输入框背景变为黄色

应用于有焦点的元素,除了输入框外,a标签也有焦点
3. :first-child伪类选择器:选择元素的第一个子元素

例:p:first-child{color:red;}

    <div>
        <p>第一个p元素</p>
        <p>第二个p元素</p>
    </div>
    "第一个p元素变红"

4.:last-child伪类选择器:选择元素的最后一个子元素
5. :nth-child(n)伪类选择器:选择元素的任意一个子元素,n为数字

6. 伪元素选择器

结构:选择器:伪元素{属性:值}
1. :firsr-line伪元素选择器:向文本的首行设置样式

p:first-line{color:red} 
效果:<p>第一行字符变为红色,且变红数量随窗口大小而改变

2.:first-letter伪元素选择器:向文本的第一个字符设置样式

注意::first-line和:first-letter只能用于块元素

3.:before伪元素选择器:在元素之前添加内容

    p:before{
        content:"";
    }

注意:content必须有
4.:after伪元素选择器:在元素之后添加内容

7. 选择器分组

  1. 让多个不同的元素拥有相同的属性

    例:h2,p{color:red;}
    

    每个元素间用逗号连接,不论什么选择器都可以

  2. 通配选择器(是一个*):把页面所有元素分在一组,对所有元素都有效,可以和任何元素匹配

    *{color:red;}
    

8. 包含选择器

也叫“后代选择器”,可以选择作为某元素后代的元素

例:div p{color:red;}
    <div>
    <p>这是一个p标签</p>
    </div>
效果:只有<div>里的<p>标签变为红色

注意:
①父元素和之元素之间用一个空格隔开
②两个元素间的层次建个可以使无限的,只要在父元素里均可以被选中

9. 子元素选择器

只能选中子元素

例:div>span{color:red;}
    <div>
        <p>
            <span>这是一个span标签</span>
        </p>
        <span>这也是一个span标签</span>
    </div>
效果:只有“这也是一个span标签”变红

注意:
①父元素和子元素之间用>隔开
②只会选中父元素之后的子元素,不会选中子元素之后的子元素

10. 兄弟选择器

div+p{background:red;}//后面相邻的一个<p>即②变红
div~p{background:red;}//后面的所有<p>,即②③变红

<div>我是第一个</div> ①
<div>我是第一个</div> ②
<div>我是第一个</div> ③

注意:
①两个兄弟元素间用加号+或波浪号~连接
②加号+只能选中后面相邻的一个元素,波浪号可以选中后面所有元素

CSS基础-选择器