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. PYTHON 爬虫 baidu美女图片

    from urllib import requestimport re import osdef main(): #page=request.urlopen("http://image.ba ...

  2. Spring MVC框架及标签库

    1.Spring MVC技术 1. 当DispatcherServlet接到请求时,他先回查找适当的处理程序来处理请求.DispatcherServlet通过一个或者多个处理程序映射,将每个请求映射到 ...

  3. mysql对子查询的优化改写

    重庆SEO:<高性能mysql第三版>提到mysql会将in子查询改写成exists查询(书中基于的mysql版本是5.1.50和5.5) 但是在5.6之后,已经优化成使用半连接查询 SE ...

  4. BZOJ 3749: [POI2015]Łasuchy（贪心）

    Orz大佬博客 CODE #include <bits/stdc++.h> using namespace std; typedef long long LL; char cb[1< ...

  5. 如何下载oracle jdk|oracle jdk下载慢，要登录等等问题

    wget -c --no-cookies --no-check-certificate --header "Cookie: oraclelicense=accept-securebackup ...

  6. php数据类型之​浮点型

    所谓浮点类型,可以理解为:我们数学里面的小数. [注意]关于精度.取值范围和科学型声明不是学习的重点.因为此块在实际开发中用的特别少.我们将此块的知识点的学习标注为,了解级别.直线电机滑台 声明方式分 ...

  7. linux中的set ff=unix

    set ff=unix : 告诉 vi 编辑器,使用unix换行符. 操作步骤: 1.用vi命令打开文件 2.直接输入 :set ff=unix

  8. OSS的简单使用

    OSS简介 Object Storage Service,简称 OSS,是阿里云提供的海量.安全.低成本.高可靠的云存储服务. 它具有与平台无关的RESTful API接口,能够提供99.999999 ...

  9. C++11多线程std::thread创建方式

    //#include <cstdlib> //#include <cstdio> //#include <cstring> #include <string& ...

  10. myeclipse导入项目

    因为现在项目大部分都是maven项目所以导入的时候因该选择