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. MyBatis_[tp_50]_动态sql_bind绑定 与原生sql对比

    笔记要点出错分析与总结 更推荐,原生的sql写法,bind方法不灵活! Test中: e.setLastName("%e%"); 直接在这里写上模糊查询的语句,更加省时 配置中: ...

  2. python_面向对象——反射

    1.反射 四个方法:getattr() 获取 class Person(): def __init__(self,name,age): self.name = name self.age = age ...

  3. 用CSS 实现 浮动元素的 水平居中

    问题描述: 基本的html结构: <div> <!-- <span>1</span> <span>2</span> <span& ...

  4. css 移动端页面，在ios中，margin-bottom 没有生效

    在开发中,你会遇到各种美轮美奂的UI交互设计图,下面这种UI图,我在开发时就在布局上遇到一个小问题 问题现象:ios 手机滚动到底部,底部的margin-bottom不生效,Android手机和模拟器 ...

  5. linux多jdk切换环境

    临时更改 export JAVA_HOME="/opt/soft/jdk/jdk1.8.0_66" export JRE_HOME="$JAVA_HOME/jre&quo ...

  6. BZOJ3678 wangxz与OJ （平衡树 无旋treap）

    题面 维护一个序列,支持以下操作: 1.在某个位置插入一段值连续的数. 2.删除在当前序列位置连续的一段数. 3.查询某个位置的数是多少. 题解 显然平衡树,一个点维护一段值连续的数,如果插入或者删除 ...

  7. hive优化，并行查询

    1.hive中控制并行执行的参数有如下几个: $ bin/hive -e set | grep parall hive.exec.parallel=false hive.exec.parallel.t ...

  8. Linux 理解 %iowait (%wio)

    理解 %iowait (%wio) 2016/02/25 %iowait 是 “sar -u” 等工具检查CPU使用率时显示的一个指标,在Linux上显示为 %iowait,在有的Unix版本上显示为 ...

  9. URL中的String参数问题

    测试一个查询数据的接口,类似这样的URL:.../search?type=Astring,在浏览器中输入URL获取到的数据为空,但通过其它方式确认数据库中确实已有数据,怀疑是接口实现问题.找接口实现的 ...

  10. 安装cartographer遇到Unrecognized syntax identifier "proto3". This parser only recognizes "proto2"问题

    https://stackoverflow.com/questions/38605734/mac-cannot-find-eigen3 https://blog.csdn.net/qq_4214518 ...