1.css3属性选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css3属性选择器</title>

    <style type="text/css">

    /*  id包含div字符串*/

    [id*=div] {

        color: lime;

    }

    /*开始字符串为div*/

    [id^=div] {

        color: red;

    }

    /*结束字符串为div*/

    [id$=div] {

        color: blue;

    }

    </style>

</head>

<body>

    <div>

        <div id="div1">11</div>

        <div id="2div2">22</div>

        <div id="3div3">33</div>

        <div id="44div">44</div>

        <div id="wowo">55</div>

    </div>

</body>

</html>

2.css3结构伪类选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css3结构伪类选择器</title>

    <style type="text/css">

    /*  第一行*/

    body>p:first-line {

        color: aqua;

    }

    /* 首字母*/

    body>p:first-letter {

        color: red;

    }

    /*元素前插入内容*/

    li:before {

        content: "--";

        color: yellow;

    }

    /*元素后插入内容*/

    li:after {

        content: "++";

        color: green;

    }

    /*根元素*/

    :root {

        background: darkgrey;

    }

    /*排除*/

    div *:not(h1) {

        background: green;

    }

    /*为空*/

    .bb li:empty {

        background: green;

    }

    /*业内跳转目标*/

    :target {

        background: orange;

    }

    </style>

</head>

<body>

    <p>

        我是第一行

        <br> 我是第二行

    </p>

    <ul>

        <li class="aa">1</li>

        <li>2</li>

        <li class="aa">3</li>

        <li class="aa">4</li>

    </ul>

    <ul class="bb">

        <li>1</li>

        <li></li>

        <li>3</li>

        <li></li>

        <li>5</li>

        <li></li>

    </ul>

    <div>

        <h1>111</h1>

        <h2>222</h2>

        <h3>333</h3>

    </div>

    <a href="#a1">111</a>

    <a href="#a2">222</a>

    <a href="#a3">333</a>

    <div id="a1">a1</div>

    <div id="a2">a2</div>

    <div id="a3">a3</div>

</body>

</html>

3.css3选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css3选择器</title>

    <style type="text/css">

    /*第一个元素*/

    li:first-child {

        background-color: yellow;

    }

    /*最后一个元素*/

    li:last-child {

        background-color: blue;

    }

    /*上到下第几个*/

    li:nth-child(2) {

        background-color: #666;

    }

    /*下到上第几个*/

    li:nth-last-child(2) {

        background-color: #888;

    }

    /*基数*/

    li:nth-child(odd) {

        color: red;

    }

    /*偶数*/

    li:nth-child(even) {

        color: #999;

    }

    /*只算同类元素*/

    .aa h3:nth-of-type(2),

    .aa h4:nth-of-type(2) {

        color: red;

    }

    /*样式循环*/

    .bb li:nth-child(4n+1) {

        background-color: #111;

    }

    .bb li:nth-child(4n+2) {

        background-color: #222;

    }

    .bb li:nth-child(4n+3) {

        background-color: #333;

    }

    .bb li:nth-child(4n) {

        background-color: #444;

    }

    /*只有一个元素*/

    li:only-child {

        background-color: green;

    }

    </style>

</head>

<body>

    <ul>

        <li>11</li>

        <li>22</li>

        <li>33</li>

        <li>44</li>

        <li>55</li>

        <li>66</li>

        <li>77</li>

        <li>88</li>

    </ul>

    <div class="aa">

        <h3>111</h3>

        <h4>222</h4>

        <h3>111</h3>

        <h4>222</h4>

        <h3>111</h3>

        <h4>222</h4>

        <h3>111</h3>

        <h4>222</h4>

        <h3>111</h3>

        <h4>222</h4>

    </div>

    <div class="bb">

        <ul>

            <li>11</li>

            <li>22</li>

            <li>33</li>

            <li>44</li>

            <li>11</li>

            <li>22</li>

            <li>33</li>

            <li>44</li>

            <li>11</li>

            <li>22</li>

            <li>33</li>

            <li>44</li>

            <li>11</li>

            <li>22</li>

            <li>33</li>

            <li>44</li>

        </ul>

    </div>

    <ul>

        <li>11</li>

    </ul>

</body>

</html>

4.UI元素状态伪类选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>UI元素状态伪类选择器</title>

    <style type="text/css">

    /*hover鼠标在控件上*/

    input[type="text"]:hover {

        background-color: darkviolet;

    }

    /*focus获取焦点*/

    input[type="text"]:focus {

        background-color: aqua;

    }

    /*active鼠标按住*/

    input[type="text"]:active {

        background-color: #666;

    }

    /*checked已选择状态*/

    input[type="checkbox"]:checked {

        outline: 2px solid gold;

    }

    /*enabled可用*/

    .aa input[type="text"]:enabled {

        background: yellow;

    }

    /*disabled不可用*/

    .aa input[type="text"]:disabled {

        background: red;

        cursor: pointer;

    }

    </style>

</head>

<body>

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

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

    <input type="checkbox">111

    <input type="checkbox">222

    <input type="checkbox">333

    <div class="aa">

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

        <input type="text" name="age" id="t2" disabled>

    </div>

</body>

</html>

5.通用兄弟选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>通用兄弟选择器</title>

    <style type="text/css">

    /*跟在div后面的p元素*/

    div~p {

        background: gold;

    }

    </style>

</head>

<body>

    <div>

        <div>

            <p>div的子元素p</p>

            <p>div的子元素p</p>

        </div>

        <p>div相邻元素p</p>

        <p>div相邻元素p</p>

        <h4>----------</h4>

        <div>

            <p>div的子元素p</p>

        </div>

        <p>div相邻元素p</p>

        <p>div相邻元素p</p>

    </div>

    <p>div相邻元素p</p>

    <p>div相邻元素p</p>

</body>

</html>

CSS3选择器介绍的更多相关文章

  1. CSS3 选择器 基本选择器介绍

    CSS是一种用于屏幕上渲染html,xml等一种语言,CSS主要是在相应的元素中应用样式,来渲染相对应用的元素,那么这样我们选择相应的元素就很重要了,如何选择对应的元素,此时就需要我们所说的选择器.选 ...

  2. 总结30个CSS3选择器

    或许大家平时总是在用的选择器都是:#id  .class  以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 ;; ...

  3. 总结30个CSS3选择器（转载）

    或许大家平时总是在用的选择器都是:#id  .class  以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...

  4. CSS3 选择器——属性选择器

    上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...

  5. CSS3 选择器——基本选择器

    CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运用的灵活到位,我想对很多朋友还是一定的难度,特别是CSS3中的:nth选择器.那么从现在开始我们先丢开他们版本的区别, ...

  6. [css3]CSS3选择器:nth-child和:nth-of-type之间的差异

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1709 一.深呼吸,直 ...

  7. CSS3 选择器——伪类选择器

    前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择 ...

  8. CSS3选择器（三）之伪类选择器

    伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总 结一下CSS中常用的伪类选择器的使用方法,最后把重心放 ...

  9. CSS3选择器:nth-child和:nth-of-type之间的差异

    CSS3选择器:nth-child和:nth-of-type之间的差异 这篇文章发布于 2011年06月21日,星期二,23:04,归类于 css相关. 阅读 57546 次, 今日 143 次 by ...

随机推荐

  1. 【Ural】1519. Formula 1

    http://acm.timus.ru/problem.aspx?space=1&num=1519 题意:给一个n×m的棋盘,其中'.'是空白,'*'是障碍,求经过所有点的哈密顿回路的数目.( ...

  2. Hadoop之倒排索引

    前言: 从IT跨度到DT,如今的数据每天都在海量的增长.面对如此巨大的数据,如何能让搜索引擎更好的工作呢?本文作为Hadoop系列的第二篇,将介绍分布式情况下搜索引擎的基础实现,即“倒排索引”. 1. ...

  3. 你所不了解的float（滥用float的怪异现象）

    float设计初衷就是为了实现文字环绕效果 原本页面流布局显示如上图所示,运用了float属性后就显示为如下图所示,这就是浮动的设计初衷 float的一些特性:包裹性.破坏性. 包裹的特性其实主要有三 ...

  4. 使用Spring进行统一日志管理 + 统一异常管理

    http://blog.csdn.net/king87130/article/details/8011843原文地址 统一日志异常实现类: 1 package com.pilelot.web.util ...

  5. WeakReference

    https://msdn.microsoft.com/en-us/library/ms404247(v=vs.110).aspx http://stackoverflow.com/questions/ ...

  6. 安全测试及B/S C/S安全性比较

    一.用户认证安全的测试要考虑问题: 1.        明确区分系统中不同用户权限 2.        系统中会不会出现用户冲突 3.        系统会不会因用户的权限的改变造成混乱 4.     ...

  7. git版本控制管理实践-4

    vcs: version control system 版本控制系统 local vcs, 集中式版本控制系统: centralized vcs; 分布式vcs: distributed vcs Lo ...

  8. Android 四大组件之Service

    ---恢复内容开始--- 1,Service的生命周期

  9. JavaScript - 初识

    流程图分为顺序结构.选择结构.循环结构 引入JS的方式有1.使用外部的JS文件<script src="..."></script>2.使用标签直接嵌入网页 ...

  10. Linux网络下载命令 wget 简介

    wget 是一个命令行的下载工具.对于我们这些 Linux 用户来说,几乎每天都在使用它.下面为大家介绍几个有用的 wget 小技巧,可以让你更加高效而灵活的使用 wget. $ wget -r -n ...