CSS——级联样式单与CSS选择器

以你之姓@ 2023-06-30 04:20 4阅读 0赞

# 级联样式单与CSS选择器 #

CSS（Cascading Style Sheet）为级联样式单，也称为层叠样式单，主要用于网页风格设计，包括字体大小、颜色、以及元素的精准定位等。一般推荐把页面外观交给CSS去控制，而HTML标签则负责标签和语义部分。对应于前端程序员来说，必须同时掌握HTML5和CSS的相关知识。

## 一.CSS样式单的基本使用 ##

一共有四种使用样式单的方法：链接外部样式文件、导入外部样式文件、使用内部样式定义、使用行内样式。

#### 1.链接外部样式文件： ####

在元素中添加 以下代码。

xxx.css是CSS样式单文件的地址，可以是相对地址，也可以是绝对地址.

#### 2.导入外部样式文件： ####

需要在<style…/>元素中使用@import来导入。有如下两种：@import "xxx.css"或者@import url(“xxx.css”)。除了在html文件中有用到之外，也可以在css中导入。一般用于在css文件导入居多。

#### 3.使用内部样式定义： ####

好处是可以实现css样式仅对某一个页面有效，而不会影响整个站点。

#### 4.使用行内样式 ####

可以在每一个元素后面添加一个style通用属性。

## 二.CSS选择器 ##

定义CSS样式的语法格式如下。分为两个部分：Selector选择器和\{…\}属性的定义

Selector{
        property1:value1;
        property2:value2;
        ....
    }

#### 1.常用的一些选择器 ####

*  元素选择器 E\{…\}
 *  属性选择器

div[id*=xx]{
                background-color:red;
                }
    div[id^=xx]{
                background-color: #555;
                color: #fff;
            }
    div[id~=xx]{
       		   color: #fff;
            }

*  ID选择器 \#E\{…\}
 *  class选择器 .E\{…\}  
    包含选择器 Selector1 +空格 +Selector2\{…\} (只要是中间加空格的选择器都是包含选择器，不考虑有多少后代。即使是孙子元素也可以) 只要包含就行，不用体现具体的关系
 *  子选择器 Selector1>Selector2\{…\} 要求目标选择器必须是外部选择器对应的元素的直接子元素。
 *  新增的兄弟选择器 Selector1~Selector2\{…\} 兄弟选择器匹配与Selector1对应的元素后面、能匹配 Selector2的兄弟节点。只往下找。
 *  选择器组合 Selector1,Selector2,Selector3…\{…\} 中间用逗号隔开

补充：p+空格+.lst和p+.lst表示不同的含义。前者为包含选择器，指的是p标签下，后代中class为lst的元素。后者指的是p标签中，class为lst的元素。

#### 2.伪元素选择器 ####

:first-letter：针对对象的第一个字符  
:first-line：针对对象的第一个行  
以上两种只针对块级元素起作用，对行内元素span等使用之前必须设置行宽或position：absolute或display:block;  
:before；:after 都是对原有内容基础上插入内容。选择器后面为\{content:xxxx;url:xxx;\}

#### 3.新增的伪类选择器： ####

结构性伪类选择器：  
Selector：first-child()  
Selector:last-child  
Selector:nth-child(n)  
Selector:nth-last-child(n) 倒数第n个子节点的元素  
Selector:only-child 必须是其父元素的唯一子节点的元素  
Selector:nth-of-type(n) 要求是与选择器同类型、同级的兄弟元素中的第n个元素

UI元素状态伪类选择器：  
Selector:visited 匹配选择器且未被访问前的元素  
Selector:visited 匹配选择器且已被访问过的元素  
Selector:active 匹配选择器且处于被用户激活的元素的状态（在鼠标点击和释放之间的状态）  
Selector:hover 匹配选择器且处于鼠标悬停状态的元素  
Selector:focus 匹配选择器且已得到焦点的元素  
Selector:enabled 匹配选择器且处于可用状态的元素  
Selector:disabled 匹配选择器且处于不可用状态的元素  
Selector:checked 匹配选择器且处于选中状态的元素  
Selector:defaul 匹配选择器且页面打开时处于选中状态的元素

其他伪类选择器：  
Selector：target 匹配选择器且必须时命名锚点目标的元素  
Selector1:not(Selector2) 匹配Selector1选择器但不符合Selector2的元素。相当于Selector1减去Selector2，可以连着写几个not选择器。

## 三.在脚本中修改显示样式 ##

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="text/html">
        <title>随机改变背景色</title>
        <script type="text/javascript">
            function changeBg(){
               //将背景色定义成空字符串
               var bgColor="";//定义变量
               for(var i=0;i<6;i++){
                   bgColor +="" +Math.round(Math.random()*9);//round四舍五入，random随机数为0到1
               } //将随机生成的背景色赋给页面的背景色
               document.body.style.backgroundColor="#" +bgColor;
            }//同document.getElementById("xxx")....
            document.onclick=changeBg;//函数调用，不用括号，有括号表示值赋给onclick 
        </script>
    </head>
    <body>
    </body>
    </html>

以上代码为随机改变页面背景色的示例代码