40.CSS基础与选择器

【一】css基础

1)概念

  • 就是给HTML标签添加样式的

2)注释语法

/*注释*/

3)语法结构

选择符 {
    样式属性: 样式属性值;
    样式属性: 样式属性值;
    样式属性: 样式属性值, 样式属性值, 样式属性值;
}

4)三种引入

1.styble标签内部直接使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--方式一-->
    <style>
        #x {color: goldenrod}
    </style>
</head>
<body>
    <h1 id="x">一级标签</h1>
</body>
</html>

2.直接在标签定义一个style标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--方式二-->
    <h1 style="color: goldenrod">一级标签</h1>
</body>
</html>

3.通过link标签引入css文件

/*CSS*/
x{color:goldenrod}
<!--html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--方式三-->
    <link rel="stylesheet" href="css文件名">
</head>
<body>
    <h1 style="color: goldenrod">一级标签</h1>
</body>
</html>

【二】CSS的选择器

1)基本选择器

1.id选择器

  • 通过元素的id属性进行选择
  • 每个页面的id都是唯一的,最好在CSS中不要重复使用

# + id属性值 + {css属性名:css属性值}

<h1 id="x">Hello, World!</h1>
#x{color: firebrick;}

2.类选择器

  • 通过元素的class属性进行选择
  • 多个元素可共享一个class,其为应用样式的最佳方式

. + 类属性值 + {css属性名:css属性值}

<h1 class="title">Hello, World!</h1>
.title {color: fuchsia}

3.元素/标签选择器

  • 通过元素的标签名进行选取

标签名 + {css属性名:css属性值}

<span>元素/标签选择器</span>
span {color: darkgrey}

4.通用选择器

  • *表示所有元素

* + {css属性名:css属性值}

<h6 >通用选择器1</h6>
<h6 >通用选择器2</h6>
*{color: cyan}

2)关系选择器

选择器 名称 版本 描述
E F 包含选择器 CSS1 选择所有低于E级别的F
E>F 子选择器 CSS2 只选择属于E下一级别的F
E+F 相邻选择器 CSS2 只选择一个与E同级别,在E之后且相邻的F
E~F 兄弟选择器 CSS3 选择与E同级别的所有F
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*div下的所有span标签*/
        div span {color: fuchsia}
        /*仅div下一级的span*/
        div > span {color: aqua}
        /*div同级的邻近的span*/
        div + span {color: darkcyan}
        /*div同级的所有span*/
        div ~ span {color: darkgreen}
    </style>
</head>
<body>
<div>div标签
    <p>div下的第一个p标签</p>
    <p>div下的第二个p标签
        <span>diva下p内的span标签</span>
    </p>
    <span>div下的第一个span标签</span>
    <span>div下的第二个span标签</span>
</div>
<span>第一个span标签</span>
<span>第二个span标签</span>

</body>
</html>

3)属性选择器

选择器 版本 描述
E[att] CSS2 选择具有att属性的E元素。
E[att="val"] CSS2 选择具有att属性且属性值等于val的E元素。
E[att~="val"] CSS2 选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素。
E[att^="val"] CSS3 选择具有att属性且属性值为以val开头的字符串的E元素。
E[att$="val"] CSS3 选择具有att属性且属性值为以val结尾的字符串的E元素。
E[att*="val"] CSS3 选择具有att属性且属性值为包含val的字符串的E元素。
E[att|="val"] CSS2 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素,如果属性值仅为val,也将被选择。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*所有带有XXX属性的元素*/
        [XXX] {color: blue}
        /*所有带有XXX且值为'ST1'属性的元素*/
        [XXX='ST1'] {color: cornflowerblue }
        /*所有带有XXX且值为'ST1'属性的p元素*/
        p[XXX='ST1'] {color: darkviolet}
    </style>
</head>
<body>

<input type="text" XXX>
<input type="text" XXX="ST1">
<input type="text" XXX="ST2">
<p XXX="ST1">p标签 ST1</p>
<div XXX="ST1">div标签 ST1</div>

</body>
</html>

4)伪类选择器

选择符 版本 描述
E:link CSS1 设置超链接a在未被访问前的样式。
E:visited CSS1 设置超链接a在其链接地址已被访问过时的样式。
E:hover CSS1/2 设置元素在其鼠标悬停时的样式。
E:active CSS1/2 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。
E:focus CSS1/2 设置元素在成为输入焦点(该元素的onfocus事件发生)时的样式。
E:lang(fr) CSS2 匹配使用特殊语言的E元素。
E:not(s) CSS3 匹配不含有s选择符的元素E。
E:root CSS3 匹配E元素在文档的根元素。
E:first-child CSS2 匹配父元素的第一个子元素E。
E:last-child CSS3 匹配父元素的最后一个子元素E。
E:only-child CSS3 匹配父元素仅有的一个子元素E。
E:nth-child(n) CSS3 匹配父元素的第n个子元素E。
E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。
E:first-of-type CSS3 匹配父元素下第一个类型为E的子元素。
E:last-of-type CSS3 匹配父元素下的所有E子元素中的倒数第一个。
E:only-of-type CSS3 匹配父元素的所有子元素中唯一的那个子元素E。
E:nth-of-type(n) CSS3 匹配父元素的第n个子元素E。
E:nth-last-of-type(n) CSS3 匹配父元素的倒数第n个子元素E。
E:empty CSS3 匹配没有任何子元素(包括text节点)的元素E。
E:checked CSS3 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
E:enabled CSS3 匹配用户界面上处于可用状态的元素E。
E:disabled CSS3 匹配用户界面上处于禁用状态的元素E。
E:target CSS3 匹配相关URL指向的E元素。
@page:first CSS2 设置页面容器第一页使用的样式。仅用于@page规则
@page:left CSS2 设置页面容器位于装订线左边的所有页面使用的样式。仅用于@page规则
@page:right CSS2 设置页面容器位于装订线右边的所有页面使用的样式。仅用于@page规则
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*输入框被选中时变色*/
        input:focus{background-color: lightslategrey}
        /*常态*/
        a:link{color: mistyrose}
        /*访问之后修改颜色*/
        a:visited {color: springgreen}
        p:visited {color: springgreen}
        /*鼠标悬停在上方时变色*/
        a:hover{color: darkorange}
        p:hover{color: darkorange}
        /*鼠标点击时改颜色*/
        a:active{color: darkturquoise}
        p:active{color: darkturquoise}
    </style>
</head>
<body>

<p><a href="https://www.xxx.com/" target="_blank">不存在的网页</a></p>
<p>text <input type="text"></p>
<p>p标签</p>
</body>
</html>

5)伪元素选择器

选择符 版本 描述
E:first-letter/E::first-letter CSS1/3 设置对象内的第一个字符的样式。
E:first-line/E::first-line CSS1/3 设置对象内的第一行的样式。
E:before/E::before CSS2/3 设置在对象前(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用
E:after/E::after CSS2/3 设置在对象后(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用
E::placeholder CSS3 设置对象文字占位符的样式。
E::selection CSS3 设置对象被选择时的颜色。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /*开头第一个文件加效果*/
    p:first-letter{color: deepskyblue}
    /*文本开头添加内容*/
    p:before{content: '开头';color: darkgoldenrod }
    /*文本结尾添加内容*/
    p:after{content: '结尾';color: greenyellow }

  </style>
</head>
<body>

<p>p标签</p>

</body>
</html>

6)分组与嵌套

1.分组

div,p{color:red}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
		div,p{color:red}
    </style>
</head>
<body>

<div>第一个div标签</div>
<div id='i1'>第二个div标签</div>
<div class='c1'>第二个div标签</div>
<p>第一个a标签</p>
<span>第一个span标签</span>

</body>
</html>

2.嵌套

#i1,.c1{color:red}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
		#i1,p.c1{color:red}
    </style>
</head>
<body>

<div id='i1'>第二个div标签</div>
<div class='c1'>第二个div标签</div>
<p class='c1'>第一个p标签</p>
<span class='c1'>第一个span标签</span>

</body>
</html>

7)选择器优先级(从高到低)

  • !important
  • style 行内标签样式
  • id 选择器
  • class 选择器
  • 标签选择器
  • 通用选择器
posted on 2024-06-12 19:58  晓雾-Mist  阅读(22)  评论(0)    收藏  举报