web（八）CSS选择器

标签选择器

　　使用html标签筛选需要渲染的网页元素。

使用场景
- 修改标签的默认样式，例如ul li 有默认的内边距，开发时应去掉标签的默认样式。
- 设定全局字体样式。
- 根据分辨率设定html标签的默认字体。
```
div {/*直接用标签作为选择器*/

    background-color: yellow;

}
```

类选择器

　　为一组样式属性进行命名（类名），标签使用时需要声明，使用频率最多的选择器。

类选择器的特点

多个标签可以引用同一个样式类，提高程序的公用性。
通过语义化的类名定义增加了程序可读性。
标签可以通过class引入多个样式类名，用空格分开。

类名区分大小写。

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title></title>

         <style type="text/css"><!--使用style标签包裹-->

             .aClass{

                 background-color: #2E8B57;

             }

             .bClass{

                 color: red;

             }

         </style>

     </head>

     <body>

         <div class="aClass bClass">这是一个div容器</div>

     </body>

 </html>

ID选择器

　　　　根据标签的id属性筛选要被渲染的标签（很少使用）。

注意事项
- ID不能重复，因此每个元素都要编写一个id选择器，无法提炼公用样式。
- 文档内元素的ID是区分大小写的。
- id命名规则是由字母、数字和下划线组成。
- 但是数字不能开头。

程序示例

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style type="text/css"><!--使用style标签包裹-->

            #v_div{

                color: green;

            }

        </style>

    </head>

    <body>

        <div id="v_div">这是一个div容器</div>

    </body>

选择器分组

　　对一组选择器赋予同样的样式属性。

使用场景：对于一组公用标签的相同属性进行赋值。

基本语法

selector1,selector2…..{/*若干个选择器，用逗号分隔*/

    此处为css属性以及取值

}

程序示例

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style type="text/css"><!--使用style标签包裹-->

            #v_div,a,.v_p{

                border: solid 3px #800080;

            }

        </style>

    </head>

    <body>

        <div id="v_div">这是一个div容器</div>

        <p class="v_p">段落</p>

        <a href="#">超链接</a>

    </body>

派生选择器

　　　　又称为后代选择器，按照html标签的层级关系（全部后代子孙）筛选被渲染的标签。

基本语法

<!--父在前，子在后，并用空格隔开-->

selector1 selector2…..{

    此处为css属性以及取值

}

程序示例

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style type="text/css">

            .parent p {

                color: red;

            }

        </style>

    </head>

    <body>

        <div class = "parent">

                <div>

            <p>派生选择器</p>

                 </div>

        </div>

    </body>

后代选择器

　　又称为子元素选择器，按照html标签的层级关系（直接后代），筛选要被渲染的标签。

基本语法

selector1>selector2{

    此处为css属性以及取值

}

程序示例

     <head>

         <meta charset="utf-8" />

         <title></title>

         <style type="text/css"><!--使用style标签包裹-->

             .parent>div>p {

                 color: red;

             }

         </style>

     </head>

     <body>

         <div class = "parent">

                 <div>

                 <p>派生选择器</p>

                  </div>

         </div>

     </body>

属性选择器

　　　　根据元素的html属性或属性值筛选要被渲染的元素。

基本语法

selector[attr][attr=‘value’]{

    此处为css属性以及取值

}

程序示例

<style type="text/css">

    a[href] {

        color:yellow;

    }

    a[href][title] {

        color:red;

    }

    a[href='www.baidu.com'] {

        color:blue;

    }

</style>

伪类选择符

　　　　按照用户操作状态筛选需要渲染的元素，在css2中定义的伪类选择符一般用来操作超链接。

伪类选择符的状态

E:link:筛选未被访问的链接。
E:visited :筛选已经被被访问的链接。
E:hover:筛选当前鼠标悬停时的任何元素。

E:active:筛选被用户激活（鼠标点击）时的任何元素。

<style type="text/css"><!--使用style标签包裹-->

    .mydiv:link{

        color: blue;

    }

    .mydiv:visited{

        color: gray;

    }

    .mydiv:hover {

        color: purple;

    }

    .mydiv:active{

        color: red;

    }

</style>

<!--.mydiv为类选择器-->

伪对象选择符

　　　　在其他选择器筛选的结果中继续筛选需要渲染的标签

E::first-letter：设置符合E筛选条件的第一个字符的样式。
E::first-line：设置符合E筛选条件内的第一行的样式。
E::before：设置符合E筛选条件的前一个元素的样式。
E::after：设置符合E筛选条件的后一个元素的样式。

　　　　color: blue;

}

</style>

选择器的优先级别

当同一个元素被多个选择符筛选，并且继承父元素的样式时，优先级别如下：
- !important的优先级别最高。
- 继承的优先级别最低，私有css属性将覆盖继承的属性。
- 同一个元素被不同选择器筛选，又无!important修饰时优先级别计算公式
  - ID选择符个数*100+类选择符个数*10+标签选择符个数

web（八）CSS选择器的更多相关文章

web前端----css选择器样式
一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如二.c ...
简易数据分析 15 | Web Scraper 高级用法——CSS 选择器的使用
这是简易数据分析系列的第 15 篇文章. 年末事情比较忙,很久不更新了,后台一直有读者催更,我看了一些读者给我的私信,发现一些通用的问题,所以单独写篇文章,介绍一些 Web Scraper 的进阶用法 ...
第八十六节，html5+css3pc端固定布局,网站结构,CSS选择器,完成导航
html5+css3pc端固定布局,网站结构,CSS选择器,完成导航页面采用1280的最低宽度设计,去掉滚动条为1263像素. 项目是PC端的固定布局,会采用像素(px)单位. 网站结构语义在没有 ...
WEB学习-CSS基础选择器
基础选择器标签选择器就是标签的名字. • <h1>前端与移动开发<span>1期班</span>基础班</h1> css: • <style ...
PHP全栈开发（八）：CSS Ⅰ 选择器
直到目前为止,我们把从HTML中的数据是如何通过PHP到服务器端,然后又通过PHP到数据库,然后从数据库中出来,通过PHP到HTML的整个过程通过一个案例过了一遍. 可以说,这些才刚刚开始.下面我们开 ...
CSS选择器（二）
五.属性选择器. 属性选择器可以根据元素的属性及属性值来选择元素. 简单属性选择如果希望选择有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器. 例子 1 如果您希望把包含标题(title ...
CSS选择器、标签，div的位置。
今天是休假,布置了一个作业,是利用CSS制作斯坦福大学官网.虽然是一个并不复杂的制作,却让我第一次体会到了想摔鼠标的感觉. 遇到了很多问题,却找不出自己到底是哪里出了问题,简简单单的一个logo.足足 ...
CSS选择器、CSS hack及CSS执行效率
主要内容: 1.CSS选择器.优先级与匹配原理 2. CSS 引入的方式有哪些 ? link 和 @import 的区别是 ? 3.CSS hack 4.如何书高效CSS 一.CSS选择器.优先级与 ...
你真的精通 CSS 了？来挑战一下 CSS 选择器测验吧
CSS 选择器赋予 CSS 强大的 HTML 元素匹配功能.作为前端开发人员必须要掌握的一部分,可能基本的大家都知道.但是你真的精通 CSS 了吗?挑战一下 CSS 选择器测验就知道. 您可能感兴趣的 ...
HTML 学习笔记 CSS(选择器3)
CSS 属性选择器属性选择器可以根据元素的额属性以及属性值来选择元素例子1 如果你希望把包含title的所有元素变成红色 *[title] {color:red} 例子2 与上面类似可以只对有 ...

随机推荐

vs相同变量高亮显示
https://blog.csdn.net/sinat_33718563/article/details/79241129 在VS2010中调试工程中,常常需要观察相同变量名在不同代码处的位置,VS默 ...
markdown的css样式（自己写的）
markdown的css样式,这些是我自己配置的,感觉可以的话你可以添加下,不适合自己的话可以仿照第二种自己写个比较好的css样式. 第一种 /* RESET ==================== ...
关于decode("utf-8")出现编码错的提示
data = data.decode("utf-8") 出现错误时候可以加上第二个参数如下; data = data.decode("utf-8",&quo ...
Java 基础类加载器和双亲委派机制学习笔记
转自博客:https://blog.csdn.net/weixin_38118016/article/details/79579657 文章不是我写的,但是感觉写的挺通俗易懂的,然后防止以后丢失,就转 ...
在 mac iTerm2 中使用 cmd 终端
在 mac iTerm2 中使用 cmd 终端主要是因为要在 window 中做一些命令行上的工作, 但又不想切换到整个 window 系统里面去. 在程序和功能中开启 telnet 在服务中启用 ...
Vue：（四）Ajax（Vue-Resource）
Vue 要实现异步加载需要使用到 vue-resource 库.(挂载到vue实例上) (一)Vue-Resource引入 <script src="https://cdn.stati ...
please select android sdk（出现小红叉）
问题原因: 在项目中通过 git 协同开发,项目是 kotlin 与 Java 混合开发.在 build.gradle 中添加依赖之后就出现这个问题了,点击运行无法编译. 在网上找了各种解决办法都没能 ...
collection.Counter
a=['A','B','C','A','D','E','W','A','B'] b=collections.Counter(a) # 可以统计a中的各个元素出现的次数print(b)print(b[ ...
Django 修改视图文件（views.py）并加载Django模块 + 利用render_to_response()简化加载模块 +locals（）
修改视图代码,让它使用 Django 模板加载功能而不是对模板路径硬编码.返回 current_datetime 视图,进行如下修改: from django.template.loader impo ...
POJ-3233 Matrix Power Series 矩阵A^1+A^2+A^3...求和转化
S(k)=A^1+A^2...+A^k. 保利求解就超时了,我们考虑一下当k为偶数的情况,A^1+A^2+A^3+A^4...+A^k,取其中前一半A^1+A^2...A^k/2,后一半提取公共矩阵A ...

web（八）CSS选择器

web（八）CSS选择器的更多相关文章

随机推荐

热门专题