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

CSS基础-选择器

2024-09-16 17:28:11   218人阅读

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基础-选择器


联系
我们