第四篇、CSS选择器

<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS选择器</title>

        <!--页内样式-->
        <style>
            /*body{
                background-color:red;
            }*/

            /* 类选择器
            .box1{
                background-color:yellow;
            }*/

            /* id选择器 特殊定义样式*/
            #box2{
                font-size:50px;
            }

            /* 并列选择器
            body,.box1{
            }
            */

            /* 复合选择器
            body.box1{
            }
            */

            /* 后代选择器(常用)
            */
            .box1{
                color:red;
            }

        </style>
    </head>

    <body>

        <!--class 类选择器-->
        <div class="box1">11111111111111111111111111111111111</div>
        <div id="box2">2222222222222222222222222222222222</div>
        <div>333333333333333333333333333333333333</div>
    </body>
</html>
时间: 2024-10-14 12:08:46

第四篇、CSS选择器的相关文章

CSS总结(四)—— CSS选择器优先级

css选择器优先级 优先顺序: 1.!important (IE6不支持此属性) 2.html中元素标签添加的style=“”(css难以管理,不推荐) 3.一个或多个id选择器 例:#top{margin:0;} 4.一个或多个类选择器(包括属性.伪类选择器) 例:.outer{}   [data-job="frontend"]{}    a:active{} 5.标签选择器 例:div{margin:3px;} 6.通配选择器 例:*{margin:10px;} ★ 选择器规则:

第四章 CSS选择器

所有HTML语言中的标记都是通过不同的CSS选择器进行控制的.用户只需要通过选择器对不同的HTML标签进行控制,并赋予各种样式声明,即可实现各种效果. 1.标记选择器 一个HTML页面有很多不同的标记组成,而CSS标记选择器就是声明哪些标记采用哪种CSS样式.例如P选择器,就是用于声明页面中所有<p>标记的样式风格. CSS代码声明了HTML页面中所有的<h1>标记,文字的颜色都采用红色,大小都为25px. <style> h1{ color:red; font-siz

第四篇 -- CSS基础

表单.单选.下拉框.文本域.多选框.提交.重置.按钮 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="" method="post"> 昵称:&

最常用的五类CSS选择器

一些新手朋友对选择器一知半解,不知道在什么情况下运用什么样的选择器,这是一个比较头疼的问题,针对新手朋友,对CSS选择器作一些简单的说明,希望能对大家的学习工作有一定的帮助,更多的CSS知识请参考Webjx.com的其他文章. 准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果.在实际工作中,最常用的选择器有以下五类: 一.标签选择器: 顾名思议,标签选择器是直接将HTML标签作为选择器,可以是p.

详解CSS选择器、优先级与匹配原理

最常用的五类CSS选择器 准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果.在实际工作中,最常用的选择器有以下五类: 一.标签选择器: 顾名思议,标签选择器是直接将HTML标签作为CSS选择器,可以是p.h1.dl.strong等HTML标签.如: p{font:12px;} em{color:blue;} dl{float:left;margin-top:10px;} 二.id选择器: 我们通常

CSS基础学习四:元素选择器

在上一篇的博客中我们已经熟悉CSS语法,对于CSS代码格式也有了一些认识.下面我就来说一下CSS代码式: 选择器名称 { 属性名:属性值:属性名:属性值:......} 属性与属性之间用分号隔开:属性与属性值直接使用冒号连接:如果一个属性有多个属性值的话,那么多个属性值用空格隔开. 上述提到了我这一篇博客所要说的主题,就是选择器.选择器就是指定CSS语法要作用的标签,那个标签的名称 就是选择器. 基本的选择器可分为三种: a)html标签名选择器:使用的是html的标签名,又叫元素选择器. b)

Python【第十四篇续】前端之CSS

css概念 上一篇介绍HTML时,已经说了,如果把HTML比作一个裸男的话,那么CSS就是为这个裸男穿上衣服,搭配一些换看的发型. 官方的术语是,css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化,CSS的可以使页面更加的美观.基本上所有的html页面都或多或少的使用css. css选择器 存在的方式有三种: 元素内联(直接在标签中使用) 语法为:style='xxx:xxxxx' 页面嵌入  语法如:< style type="text/c

css样式表中四种属性选择器

css样式表中四种属性选择器1> 简易属性 tag[class]{ font-weight:bold } It will affect all tag with any class. e.g. <h2 class="old" > or <h2 class="new"> 2>精确属性值 a[href="http://www.cnblogs.cn"][title="textTitle"]{fon

深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器

× 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选择器和条件属性选择器三种.本文将详细该部分内容 简单属性选择器 [attribute] [attribute]选择器选择拥有该属性的元素,返回集合元素 //选择拥有title属性的所有元素 $('[title]') //选择拥有title属性的所有span元素 $('span[title]') //