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="样式表的地址"/>
    

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="#" 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> ③

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

时间: 2024-10-15 16:38:20

CSS基础-选择器的相关文章

Css3之基础-2 Css 基础选择器

一.Css 基础选择器 通用选择器 通用选择器 - 通用选择器,显示为一个星号(*) - 可以与任何元素匹配 - 常用于设置一些默认样式,比如设置整个文档的文本的默认字体和大小 元素选择器 - html文档的元素就是选择器 - 比如<p>.<h1>等 类选择器 - 语法为: .className {color:read;} - 类名称不能以数字开头 - 所有能够附带class属性的元素都可以使用此样式声明 - 将元素的class属性的值设置为样式类名 - 可以将多个类选择器应用于同

CSS入门(css简介与样式汇总、CSS的使用方式、CSS样式表的特征、CSS基础选择器和复杂选择器、边框阴影)

一.CSS的作用 1.以统一的方式实现样式的定义 2.提高页面样式的可重用性和可维护性 3.实现了内容(HTML)和表示(CSS)的分离 HTML和CSS之间有什么关系? HTML:构建网页的结构 CSS :构建HTML元素的样式 样式汇总: color:red 字体颜色 font-size:字体大小 font-family:字体样式 background-color 背景颜色 width:宽度 height:高度 字体使用实例(样式) font-family:字体的种类 font-size:字

0009 CSS基础选择器( 标签、类、id、通配符)

typora-copy-images-to: media 第01阶段.前端基础.CSS基础选择器 CSS选择器(重点) 学习目标: 理解 能说出选择器的作用 id选择器和类选择器的区别 应用 能够使用基础选择器给页面元素添加样式 1. CSS选择器作用(重点) 如上图所以,要把里面的小黄人分为2组,最快的方法怎办? 很多, 比如 一只眼睛的一组,剩下的一组 选择器的作用 ? 找到特定的HTML页面元素 一句话说出他们: ※※※※ CSS选择器干啥的? 选择标签用的, 把我们想要的标签选择出来 必

CSS基础——选择器

CSS CSS的基础 CSS定义 ? CSS全称为Cascading Style Sheet,中文翻译为"层叠样式表". CSS的作用 ? 简单地来讲,CSS 能对你制作的网页进行布局.颜色.背景.宽度.高度.字体进行控制,让网页按您的美工设计布局的更加美观漂亮. 样式是用来控制页面外观.设置元素对象属性的工具,使用样式可使页面产生各种特殊的效果. CSS的语法 基本格式: <head> <meta charset="UTF-8"> <

CSS【03】:CSS 基础选择器与三种引入方式

基础选择器 选择器:css 选择 html 标签的一个工具,是将 css 与 html 建立起联系,那么 css 就可以控制 html 样式 选择器其实就是给 html 标签起名字 标签选择器 作用:根据指定的标签名称,在当前界面中找到所有该名称的标签,然后设置属性 格式: 标签名称 { 属性: 值; } 注意点: 标签选择器选中的是当前界面中所有的标签,而不能单独选中某一个标签 标签选择器无论标签藏得多深都能选中 id选择器 作用:根据指定的 id 名称找到对应的标签,然后设置属性 格式: #

CSS基础选择器

1.html负责结构,css负责样式,js负责行为. css是写在head标签里面,容器style标签里面, <style type="text/css"> body{ background-color:pink; } </style> 2.标签选择器:就是使用html中的标签对来当做选择器 (1)所有的标签都能当做选择器,比如说body,h1,ul,span等等. (2)不管当前的标签藏得多深,都能被选上. (3)选择的是所有,而不是某个. 3.类选择器 写法

CSS 基础-选择器-边框和背景-文本样式

CSS3 选择器 本文内容部分来自于https://developer.mozilla.org/zh-CN/docs/Learn/CSS 选择器可以被分为以下类别: 简单选择器(Simple selectors):通过元素类型.class 或 id 匹配一个或多个元素. 属性选择器(Attribute selectors):通过 属性 / 属性值 匹配一个或多个元素. 伪类(Pseudo-classes):匹配处于确定状态的一个或多个元素,比如被鼠标指针悬停的元素,或当前被选中或未选中的复选框,

css基础 选择器-通配符* 给所有的标记设置属性(兼容性不好)

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

css基础 选择器 id 设置样式 简单示例

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"