1：通配符

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        [id*=div] {

            color: lime;

        }

        /*^首字符*/

        [id^=div] {

            color: darkblue;

        }

        /*$结束字符*/

        [id$=ym] {

            color: crimson;

        }

    </style>

</head>

<body>

<div id="mydiv1">示例文本1</div>

<div id="div2">示例文本2</div>

<div id="div3">示例文本3</div>

<div id="div4">示例文本4</div>

<div id="my">示例文本5</div>

</body>

</html>

2:UI伪类选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /* 鼠标经过有效 */

     input[type="text"]:hover{

         background-color: darkviolet;

     /* 鼠标焦点有效 */

            input[type="text"]:focus{

                background-color: darkviolet;

     }

    </style>

</head>

<body>

<input type="text" name="name">

<input type="text" name="name">

</body>

</html>

 3:结合元素选择器:

例如:   a.class{}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

<style>

    a.div{

        color: red;

    }

</style>

</head>

<body>

<div class="div">

    wowowotest

</div>

/* 只对下面有效 */

<a class="div"> wowowotest</a>

</body>

</html>

4:多类选择器

例如:   .class.class{}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

<style>

    .div1{

        color: blue;

    }

    .div2{

        font-size: 30px;

    }

    .div1.div2{

    font-style: italic;

    }

</style>

</head>

<body>

<div class="div1">wowowo test</div>

<div class="div2">wowowo test</div>

/* 拥有上面所有属性 */

<div class="div1 div2">wowowo test</div>

</body>

</html>

5:属性选择器

例如:     [title]{}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

<style>

[title]{

    color: aqua;

}

    [href]{

        font-size: 30px;

    }

[title="p2"]{
color:red;
}

</style>

</head>

<body>

<p title="">hello</p>
<p title="p2">hello2</p>

/* <href=""未带参数，如果带参数。<style>必须一致>*/

<a href="">wowowo</a>

</body>

</html>

 A：在css中定义图片相对路径

#primary-nav {

//相对路径

background: url(../images/alert-overlay.png) repeat-x;

height: 35px;

font-size: 10px;

color: #fff;

line-height: 34px;

background-color: #;

margin:  auto;

max-width: 1128px;

font-weight: bold;

font-family: Verdana,Arial,Helvetica,sans-serif;

box-shadow: 1px 2px 5px 1px #;

}

B.对应文件结构

C:下面display为什么要加important

.main-navigation a {

color: #5e5e5e;

//为什么要加!important

padding:  15px!important;

}

加!important就表示提升这个属性的优先级 比如说你如果在其它地方又写了一个display:inline之类的 还会按照你这里的block进行解释
另外IE6是不认!important的 可以利用这个特性来给不同的浏览器做不同的css设置

D.css防止中文乱码

 E.<div style="clear:both;"></div>

<div style="clear:both"></div>
clear:both该属性的值指出了不允许有浮动对象的边。
通俗的讲：这段代码的做用是：清除同行元素，不允许其它元素与之在一行内。

css简单学习属性3---css属性选择器的更多相关文章

  1. css布局学习笔记之position属性

    position属性用于定位元素,它的几个值分别如下: 1,static static 是默认值.任意 position: static; 的元素不会被特殊的定位.一个 static 元素表示它不会被 ...

  2. css简单学习属性

      1:内联元素和块级元素 1).块级元素,默认是:内联元素可以变成块级元素,块级元素可以变成内联元素. <!DOCTYPE html> <html lang="en&qu ...

  3. css简单学习属性2---背景图片

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Css的学习之旅-css的选择器（2）

    1.最常用的是派生选择器:eg:ul li{ color:red} 2.id选择器:eg:#id{color:red} 3.类选择器:设置标签的class = "",类似id.用点 ...

  5. HTML&CSS基础学习笔记1.33-元素选择器

    元素选择器 最常见的 CSS 选择器是元素选择器.换句话说,文档的元素就是最基本的选择器: p { text-indent:10px; color:blue; } 什么情况下使用元素选择器,一般我们这 ...

  6. CSS入门级学习

    css入门学习1:认识CSS 1.1:css简介,css全称是层叠样式表,Cascading style sheets 1.2:css的作用,主要是用于定义html内容在浏览器内的显示样式,如文字大小 ...

  7. HTML和css简单日常总结

    今天主要学习了两个部分:第一部分html:在w3school学习了一些标签的使用和一些属性和方法,例如一些标签<a>,<h1><h6><from>< ...

  8. [Codecademy] HTML&CSS 第七课：CSS: An Overview

    本文出自   http://blog.csdn.net/shuangde800 [Codecademy] HTML && CSS课程学习目录 --------------------- ...

  9. 学习css常用基本层级伪类属性选择器

    常见的css选择器包含:常用选择器.基本选择器.层级选择器.伪类选择器.属性选择器,其中常用选择器分为:1.html选择符*{}//给页面上所有的标签设置模式:2.类选择符.hcls{}//给clas ...

随机推荐

  1. 在cmd运行窗口运行.py文件

    步骤

  2. Django --- 与数据库进行交互

    目录 1.静态文件配置 1.什么是静态文件 2.为什么用户在浏览器中输入的网址能够访问到响应的资源?有时候不能访问? 3.如果想要访问静态资源怎么做? 4.手动开设静态文件访问资源 5.关于两个sta ...

  3. Accounts Merge

    Description Given a list accounts, each element accounts[i] is a list of strings, where the first el ...

  4. docker学习（六） Docker命令查询

    Docker命令查询 1.基本语法docker [OPTIONS] COMMAND [arg...]一般来说,Docker 命令可以用来管理 daemon,或者通过 CLI 命令管理镜像和容器.可以通 ...

  5. &和&&，|和||的用法区别

    &和&&的区别是,&会执行两边,不管第一个是否成立&&只会执行一边,如果第一个条件为假,则不会走第二个条件举例public class Test2{ p ...

  6. vscode搭建springboot开发环境

    1. JDK,Maven 1.1 下载略 1.2 设置系统环境变量 jdk增加环境变量JAVA_HOME=C:\Program Files\Java\jdk1.8.0_191(安装路径) 增加路径Pa ...

  7. P1338 末日的传说，P1372 P1414 又是毕业季——贪心

    一个1到n序列,合理排序逆序对数要求是m,而且字典序要求最小: 这个题,因为数字只能用一次,所以我们可以知道什么位置放什么数逆序对的个数会增加或减少多少: 先求出最多能产生的数量,每次先输出最小的数, ...

  8. luogu4208

    P4208 [JSOI2008]最小生成树计数 题目描述 现在给出了一个简单无向加权图.你不满足于求出这个图的最小生成树,而希望知道这个图中有多少个不同的最小生成树.(如果两颗最小生成树中至少有一条边 ...

  9. Java 8：掌握 Lambda 表达式

    本文将介绍 Java 8 新增的 Lambda 表达式,包括 Lambda 表达式的常见用法以及方法引用的用法,并对 Lambda 表达式的原理进行分析,最后对 Lambda 表达式的优缺点进行一个总 ...

  10. 在OpenFOAM中做用户自定义库——编译library【转载】

    转载自:http://openfoam.blog.sohu.com/22041538.html OpenFOAM自己提供的标准类都是以库的形式提供的,并且利用头文件给出了库的应用接口.这样一来,用户的 ...