CSS选择器 及其样式链接方式

最新推荐文章于 2023-03-06 10:41:53 发布
最新推荐文章于 2023-03-06 10:41:53 发布
阅读量251 收藏
点赞数
分类专栏： CSS 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cfw19990927/article/details/117372800
版权

目录

 

１．基本选择器

   1.1 选择器内容

   1.2 代码展示

２．包含选择器（复合选择器）

   2.1 选择器内容

   2.2 代码展示

      2.2.1 后代选择器

2.2.2 子代选择器

2.2.3 分组选择器

2.2.4 相邻兄弟选择器

2.2.5 通用兄弟选择器

３．属性选择器

3.1选择器内容

3.2代码展示

3.2.1 [attribute=value]

3.2.2 [attribute^=value]

3.2.3 [attribute$=value]

3.2.4 [attribute*=value]

3.2.5 [attribute~=value]

3.2.6 [attribute|=value]

4.伪元素选择器

       4.1选择器内容

5.伪类选择器

6.样式链接的方式

6.1 行内样式

6.2 内嵌样式

6.3 外链样式

6.4 导入样式

 

１．基本选择器

   1.1 选择器内容

  • id选择器 ( #id )

  • 元素选择器 ( element )

  • class选择器 ( .class )

  • 通配符 ( * )

   1.2 代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
        p{
            color:red;
        }
        #name{
            color: blue;
        }
        .xingming{
            color:green;
        }
    </style>
</head>
  <body>
       <p id='name'>hello chen</p>
       <p class='xingming'>hello chen</p>
       <p>hello chen</p>
       <p>hello chen</p>
  </body>
</html>

结果展示:

     hello chen

     hello chen

     hello chen

补充：

     当基本选择器都在一个元素标签上时：

     class选择器>id选择器>标签选择器        （*通配符的优先级最低） 

２．包含选择器（复合选择器）

   2.1 选择器内容

  • 后代选择器                         element element
  • 子代选择器                         element>element
  • 分组选择器（并集选择器）element,element
  • 相邻兄弟选择器                  element+element
  • 通用兄弟选择器                  element~element

   2.2 代码展示

      2.2.1 后代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
      ul li{
        color:cornflowerblue;
      } 
   </style>
</head>
<body>
     <ul>
         <li>苹果</li>
         <li>香蕉</li>
         <li>西瓜</li>
     </ul>
     
</body>
</html>

 结果展示:

 

 

 

 

2.2.2 子代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
      div p{
        color:teal;
      } 
   </style>
</head>
<body>
     <div>
        <p>hello world</p>
        <p>hello world</p>
     </div>
       <p>hello world</p>
</body>
</html>

 结果展示:

       hello world

       hello world

       hello world

2.2.3 分组选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
       div,p{
        color:red;
    }
   </style>
</head>
<body>
     <div>nihao chen</div>
     <p>nihao chen</p>
</body>
</html>

 结果展示:

      nihao

      nihao

2.2.4 相邻兄弟选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
     div+p{
         color:cornflowerblue;
     }
   </style>
</head>
<body>
     <div>nihao chen</div>
     <p>nihao chen</p>
</body>
</html>

 结果展示:

      nihao

      nihao

2.2.5 通用兄弟选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
     div~p{
         color:cornflowerblue;
     }
   </style>
</head>
<body>
     <div>nihao chen</div>
     <p>nihao chen</p>
     <p>nihaoya</p>
     <p>nihaoya</p>
</body>
</html>

结果展示:

     nihao

     nihao

     nihaoya

     nihaoya

３．属性选择器

3.1选择器内容

 

              类型      用法 、格式 
  [attribute=value]匹配带有指定值属性的元素
  [attribute^=value]匹配属性值中且以value开头的元素
  [attribute$=value]匹配属性值中且以value结尾的元素。
  [attribute*=value]匹配属性值包含指定值的每个元素。
  [attribute~=value]匹配属性值中包含指定单词的元素。
  [attribute|=value]匹配带有以指定值开头的属性值的元素。（该值必须是整个单词  ,  比如 id="div"，或者后面跟着连字符，比如 id="div-tt"。
)

3.2代码展示

3.2.1 [attribute=value]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
          margin: 0;
        }
        div{
          width: 100px;
          height: 100px;
          background-color: brown;
        }
       [title=one]{
                background-color: black;
       }
          </style>
</head>
<body>
    <div title='one'></div>
    <div></div>
</body>
</html>

结果展示：

3.2.2 [attribute^=value]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
          margin: 0;
        }
        div{
          width: 100px;
          height: 100px;
          margin-bottom: 5px;
          background-color: cadetblue;
        }
       [title^=hello]{
        background-color: brown;
       }
          </style>
</head>
<body>
    <div title='hello'></div>
    <div title='helloworld'></div>
    <div title='heiworld'></div>
</body>
</html>

结果展示：

3.2.3 [attribute$=value]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
          margin: 0;
        }
        div{
          width: 100px;
          height: 100px;
          margin-bottom: 5px;
          background-color: rgb(69, 112, 79);
        }
       [title$=world]{
        background-color: rgb(79, 161, 185);
       }
          </style>
</head>
<body>
    <div title='hello'></div>
    <div title='helloworld'></div>
    <div title='heiworld'></div>
</body>
</html>

结果展示：

3.2.4 [attribute*=value]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
          margin: 0;
        }
        div{
          width: 100px;
          height: 100px;
          margin-bottom: 5px;
          background-color: rgb(179, 104, 126);
        }
       [title*=well]{
        background-color: rgb(149, 170, 177);
       }
          </style>
</head>
<body>
    <div title='well'></div>
    <div title='welcome'></div>
    <div title='wel'></div>
</body>
</html>

结果展示：

 

3.2.5 [attribute~=value]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
          margin: 0;
        }
        div{
          width: 100px;
          height: 100px;
          margin-bottom: 5px;
          background-color: rgb(83, 49, 60);
        }
       [title~=wel]{
        background-color: rgb(51, 94, 60);
       }
          </style>
</head>
<body>
    <div title='well'></div>
    <div title='welcome'></div>
    <div title='wel come'></div>
</body>
</html>

结果展示：

 

3.2.6 [attribute|=value]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
          margin: 0;
        }
        div{
          width: 100px;
          height: 100px;
          margin-bottom: 5px;
          background-color: rgb(71, 87, 175);
        }
       [title|=say]{
        background-color: rgb(66, 38, 57);
       }
          </style>
</head>
<body>
    <div title='say hi'></div>
    <div title='say-hello'></div>
    <div title='saybye'></div>
    <div title='say'></div>
</body>
</html>

结果展示：

4.伪元素选择器

       4.1选择器内容

  选择器标签作用
::before 元素前的一个元素
:before元素前的一个元素（没有content:" "）
::after元素后的一个元素
:after元素后的一个元素（没有content:" "）
::selection选择用户选择的元素部

5.伪类选择器

               

选择器标签作用
:link选取未被访问的链接
:visited选取已被访问的链接
:hover选取鼠标指针浮动在上面的元素
:active选择已被激活的链接
:focus选取获得焦点的元素
:root文档的根元素

6.样式链接的方式

   

行内样式
内嵌样式
外链样式
导入样式

6.1 行内样式

<div style="color:red"></div>

6.2 内嵌样式

<style>
div{
      color:green;
}
</style>

6.3 外链样式

<link rel="stylesheet" href='1.css'>

6.4 导入样式

<style type='text/css'>
@import url("1.css");
</style>

 

cfw19990927
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
XML实用大全(web开发必备手册)
12-05
4.4.1 与样式单连接... 73 4.4.2 为根元素指定样式规则... 74 4.4.3 为标题指定样式规则... 75 4.4.4 为球员和统计元素指定样式规则... 79 4.4.5 本节小结... 80 4.5 本章小结... 85 第5章 属性、空标记和XSL....
CSS选择器有哪些
mingtian_mt的博客
08-15 332
1.标签选择器 以标签名开头，选择所有div元素 div { margin:0; padding:0; } 2、类选择器 给标签取class名，以点（.）加class名开头，选择所有该class名的元素 <div class="aa"></div> .aa { width: 100px; height: 100px; background-color: red; } 3、id选择器 给标签取id名，以#加i
【CSS】CSS 复合选择器 ④ ( 链接伪类选择器 | a:link 默认样式 | a:visited 已访问样式 | a:hover 鼠标移动样式 | a:active 选定链接样式 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-06 2910
一、链接伪类选择器 1、语法说明 2、常用方式 3、代码示例
CSS复合选择器之链接伪类选择器及总结
qq_45739910的博客
09-29 922
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊的效果，或者选择第1个，第n个元素. 同时将复合选择器进行了总结
CSS样式连接与选择器
weixin_42358766的博客
12-22 285
(1)CSS样式的连接 样式：修饰页面/标签 样式的效果为就近原则：当内联样式，内部样式块对象，外部样式表同时作用于同一个标签时，谁离标签近就显示谁的效果 内联样式：内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性 示例代码： &amp;amp;amp;amp;lt;p style=&amp;amp;amp;quot;color:#f00&amp;amp;amp;quot;&amp;amp;amp;amp;gt;这一行的字体颜色将显示
CSS复合选择器之后代、子代、并集、链接和focus选择器
qq_52763599的博客
01-15 920
CSS复合选择器之后代选择器、子代选择器、并集选择器、链接伪类选择器以及focus伪类选择器
最新Python3.5零基础+高级+完整项目（28周全）培训视频学习资料
06-13
css选择器 css的存在形式及优先级 css边框以及其他常用样式 css之float样式 css之float实现作业实例 css之display样式 css之内外边距 本周作业以及思路 第15周 上节内容答疑 上节内容回顾 CSS内容补充之position ...
IBM WebSphere Portal门户开发笔记01
03-11
3、授权地点及其方式 42 4、传播与继承 42 5、用户与组管理 43 四、域名 44 1、portal服务器域名 44 2、本机域名映射 44 五、WCM几个页面路径及其名称 44 1、登录页面 44 2、主题及主页页面 45 3、皮肤外观页面路径 ...
FoosunCMS网站内容管理系统 V4.0 SP5 build 0802
03-26
会员系统集成web2.0元素，满足国内企业级主流市场建站对新兴流行建站功能的需求，模版支持CSS+DIV自由设计，便于客户简单快捷的打造符合自己产品特色企业级门户站点，FoosunCMS包含13个子系统，分别是：新闻系统、...
CSS中的选择器分类、连接方法、权重256进制、权重进制实际测试和权重计算问题等详细总结（CSS选择器每一位的权重都是无限大的，不是256进制，可以理解为单独的5位数字）
AIWWY的博客
05-28 1627
目录 选择器知识类型详细介绍 CSS选择器权重知识 CSS选择器连接方法 各选择器的权重（括号中代表权重） 伪元素选择器（>infinity） ！important（infinity） 行间样式选择器（1000） id选择器（100） class（类）选择器（10） 属性选择器（10） 伪类选择器（10） 其它伪类选择器具体介绍 标签选择器（1） 伪元素选择器 （1）（权重不为1，大于！impotant） 其它伪元素选择器介绍 通配符选择器（0） CSS权重进位制测.
前端学习笔记002：CSS3
Copcin的小站
08-16 1024
​ CSS（Cascading Style Sheets，层叠样式表），是开发前端应用必不可少的一个工具。打个比方，HTML5 是身体，那 CSS3 就是穿在身体上的衣服，他让一整个 HTML5 网页变得更美观。下文我们就来整理 CSS~ 1. CSS 简介 话说在很久以前（比如民国时期），HTML 是单独存在的，跟 CSS 一点关系也没有。但是由于网络的逐渐发展，人们想要用 HTML 写出更多的东西，并且更加美观，于是，HTML2 诞生了（额……）。但是 HTML 添加了很多处理样式的东西之后，变得更加
CSS中类选择器的连接用法
Star_CSU的博客
07-11 847
例如： .important.warning{  }  这个指包含important和warning关键词的会起到作用。 如果是 .important  .warning{  }类型的类选择器则是指后代选择器，important类选择器中的子代warning类才会匹配到该样式。
CSS的选择器有哪些 分别怎么写,列举CSS有哪些种类的选择器并书写范例
weixin_31445167的博客
08-04 1688
分为：1.基础选择器：标签选择器、id选择器、类选择器、通配符选择器。2.高级选择器：后代选择器、交集选择器、并集选择器。1.1 标签选择器：通过标签的名字来进行选择。方法：标签名 。选择范围：选中的是整个的HTML文件中的所有同名标签 例：p{color: red;}h2{color: green;}注意：标签选择器的效果只与标签名相关，与它的嵌套多少层无关，嵌套再深也可以用标签选择器选中。优...
链接伪类选择器详解
daimatong的博客
05-09 1806
　链接伪类选择器： 　　为了和我们之前学的选择器相区别 　　类选择器用一个点，比如.suv{} 　　伪类用两个点的冒号,比如:link() 　　伪类选择器作用： 　　用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，比如可以选择第1个 ...第n个元素。伪类选择器很多种，本文先讲链接伪类选择器。 　　a:link //未访问的链接 /*未访问过的链接*/ a:link { color:#333; text-decoration:none; } 　　a:visited .
CSS样式表中的基本选择器
qq_43453160的博客
02-23 917
样式表中的选择器 作用：用于选则控件，设置样式 常用的样式选择器： 一、基础样式选择器 1、id选择器 用#来选择 ps：id是唯一的不允许重复 #id的名称{ 样式：值 } -------给id为指定名称的控件，设置样式 css代码如下： <style type="text/css"> #box1{ /* 宽度为200px */ width: 200px; /* 高度为200px */ heigh
在html中选项卡怎么做,纯css3制作选项卡
weixin_39636079的博客
06-03 321
继上一篇文章后，突发奇想利用纯粹的css3和radio的特性来打造一个选项卡切换的效果普通的选项卡效果一般分为html+css+js来制作步骤如下：html做布局css做样式js添加切换效果纯css3怎么解决呢？html利用radio放到label中，将其隐藏(display：none)，然后用input:checked~[label里的所要修饰的标签]css修饰相关样式，利用radio特性写样式...
CSS中选择器的用法（含视频链接）
zonxxx的博客
08-11 236
1.ID选择器 css: #elem{...} html: id="elem" 注： 1.ID是唯一值，在一个页面中只能出现一次 2.命名规范，第一个字符不能为数字 2.CLASS选择器 css: .elem{...} html: class="elem" 注： 1.class选择器可以复用 2.可以添加多个class样式 .box{background:red} .content{font-size:20px} &lt...
html选项卡怎么做css,纯CSS3制作Tabs选项卡
weixin_29091105的博客
06-03 595
Tabs选项卡对于Web前端攻城师来说并不陌生，也制作了不少，我们在《CSS3+jQuery制作切角的Tabs》也介绍了一个使用CSS3配合jQuery制作Tabs的实例。我想大家在制作Tabs选项卡大多数都是使用jQuery或者javaScript来实现的。而单独使用纯CSS来制作Tabs来说还是比较少见。随着CSS3和CSS技术不断的更新,我们放弃使用jQuery或javaScrip来制作Ta...
纯Css制作tab选项卡
weixin_55753367的博客
03-04 2876
Css本身的功能就很强大的，尤其是Css3出来之后，大部分特效只用Css3就能完成了，无需再费心思去研究js、jQuery该怎么怎么去写，代码简洁方便。下面这个是用纯Css制作的tab选项卡效果： 用Css实现这个选项卡效果，需要用到label标签，label标签不会呈现任何效果，当点击label时，浏览器会自动将焦点转到和标签相关的的表单控件上。 这个用Css实现tab效果的主要思路是：使用表单的单选按钮来实现这个tab显示和隐藏，首先tab里的内容默认隐藏，如果单选按钮为选中状态（checked）就显
css选择器及其优先级
最新发布
04-23
CSS选择器是一种用于选择HTML或XML文档中的特定元素的方式。常见的CSS选择器包括元素选择器、ID选择器、类选择器、后代选择器、伪类选择器等。 优先级是指在多个CSS规则同时应用到同一个元素时，浏览器如何决定...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

cfw19990927

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值