html是盖房子,css是将房子装扮的更漂亮一些!CSS(Cascading Style Sheets),值层叠样式表。

语法

选择器 { 属性 : 属性值 ; }

比如, p{color:red;}

css选择器,用于选择需要添加样式的元素,可以分为标签选择器、class选择器、id选择器、属性选择器、伪类、伪元素选择器、组合选择器等等(本文主要说这几个选择器)。

标签选择器

p{color:#f00;}
h1{font-size:20px;}

标签选择器即是html的元素标签直接作为css选择器使用,就像上面的p和h1

class选择器

<style type="text/css">
.tex{color:#000;}
</style> <div class="tex">
<p>这是第一段文字</p>
<p>这是第二段文字</p>
<p>这是第三段文字</p>
</div>

class选择器为具有特定的一类的元素指定样式。在class名前用“.”来作为类选择器的标识。

id选择器

class选择器为标有特定id的HTML元素指定特定的样式。在class名前用“#”来作为类选择器的标识。id具有唯一性。

属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。

<input type="text" disabled />

如果要为 input 加一个蓝色边框,可以写这样的css

[disabled]{border:1px solid #00f;}    选择带有 disabled 属性的所有元素  [属性值]

也可以这样写

[type=text]{border:1px solid #00f;}   用完整的属性和属性值来选择需要改变的元素  [属性=属性值]

如果元素中的类名是个列表,可以使用属性选择器选择其中的一个,

<p class="one two">第一段</p>
<p class="two">第二段</p> [class~=one]{color:#f00;} [属性~=属性值] 属性值中包含“one”单词的所有元素

还有以下几种属性用法

<a class="en" href="http://www.cnblogs.com">博客园</a>
<a class="en-h" href="www.w3cschool.cn">W3Cschool</a>
<a class="en bai" href="http://www.baidu.com">baidu</a>
<a href="http://www.cnblogs.com/yunmengshu">我的博客</a> [class|=en]{color:#ccc;} [属性|=属性值] 属性值中以en开头的所有元素,en后面必须跟“-”中划线或者不跟任何的字符,不然无法找到,例子中的只有前面两个a标签的文本变为灰色 [href^=http]{color:#f00;} [属性^=属性值] 属性值中以http开头的所有元素,只要是以http开头的就可以,例子中第一个和第三个变为红色 [href$=com]{color:#f00;} [属性$=属性值] 属性值中以com结尾的所有元素 [href*="www.cnblogs.com"]{color:#f00;} [属性*=属性值] 属性值中包含“www.cnblogs.com”的所有元素

伪类

a:link        超链接默认样式,未被访问

a:visited    被访问过的超链接样式,visited 和 link 只能用于<a>标签

:hover       鼠标滑过时显示的样式

:active       鼠标点击时显示样式,active 和 hover 不止用于<a>标签,还可以用于其他元素

如果要设置<a>标签的四个时间的样式,顺序一定要是   link 、visited 、hover 、active

还有两种伪类非常的相像,需要配合记忆,那就是  :nth-child 和 :nth-of-type()

<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<p>这是一段话</p>
</body> /*
li:first-child{color:red;} li 的父元素中第一个子元素存在且必须为 li 元素, ul 的第一个子元素 li 才会变成红色
li:last-child{color:red;} li 的父元素中最后一个子元素必须为li 元素才可以
li:nth-child(2n+1){color:#00f;} “2n+1”可以换位其他的运算式,“2n”、"3n"、"3n+1"等等都可以,还可以写奇(odd)偶(even)
li:nth-last-child(even){background-color:#ccc;} 倒序
ul:only-child{border:1px solid #00f;} ul 的父元素中只有一个子元素,且为 ul 元素时,才会出现边框,如上面的HTML是不会出现边框的,因为body的子元素有两个:ul 和 p
*/ li:first-of-type{color:#f00;} li 的父元素中第一个为 li 的子元素
li:last-of-type{color:#f00;} li 的父元素中最后一个为 li的子元素
li:nth-of-type(even){color:#f00;}
li:nth-last-of-type(odd){color:#00f;}
ul:only-of-type{border:1px solid #00f;} ul 的父元素中可以有多个元素,但是只有一个 ul 元素的时候才可以显示边框,如上面的html中时会显示边框的 一定要区别 -child 和 -of-type 的不同

还有其他的伪类

:root    选择根元素,即html

:not()   选择除()中元素之外的所有元素

:empty  选择空元素的元素

:enabled  启用

:disabled 禁用

还有其他的就不一一说了

伪元素

::first-letter     设置文本的第一个字的样式

::first-line        设置文本的第一行的样式

::before          在元素前插入内容      如,p::before{content:"新段落";}

::after             在元素后插入内容    和before一样

::selection        web页面上选中文本后的样式

组合选择器

<div>
<h1>head</h1>
<p>我是第一个段落</p>
<p>我是第二个<span>段落</span></p>
<p>我是第三个段落</p>
</civ>

后代选择器以空格分隔,如

div p{color:red;}    div 是 p 的父元素

子元素选择器以“>”分隔,如

div>p{color:red;}    p 必须是 div 的直接子元素,不可以是孙元素,即不可以是 div>span ,这样写是无法显示 span 的样式的

相邻兄弟选择器以“+”分隔,

h1+p{color:red;}     选中 h1 后面相邻元素,且必须为 p 元素

如果要选择 h1 后面的所有 p 元素,该怎么办呢?用相邻兄弟选择器“~”

h1~p{color:red;}    选中 h1 后面所有的 p 元素

h1 和 p 元素的样式设置一样的情况下,可以合并起来一起写,选择器之间用“,”逗号隔开

h1{color:#f00;}
p{color:#f00;} /* 可以合并选择器 */ h1,p{color:#f00;}

CSS学习之选择器的更多相关文章

  1. CSS学习之选择器优先级与属性继承

    CSS学习之选择器优先级与属性继承 选择器优先级 其实选择器是具有优先级的,我们来看下面这一组案例: <!DOCTYPE html> <html lang="en" ...

  2. CSS学习笔记——选择器

    选择器 当我们定义一条样式规则时候,这条样式规则会作用于网页当中的某些元素,而我们的规定的这些元素的规则就叫做选择器. 常用的选择器: 1.id选择器 #idname 2.类选择器 .classnam ...

  3. CSS学习笔记----选择器

    用过css的同志们都知道,选择器是非常重要的,如果选择器使用不当,即使你的css写的再好,但是不知道要用在哪个元素上,这不是英雄无用武之地吗? css,用过的都说好! 最基本的选择器,id选择器,类选 ...

  4. HTML+CSS学习笔记(8)- CSS选择器

    标签:HTML+CSS 什么是选择器? 每一条css样式声明(定义)由两部分组成,形式如下: 选择器{ 样式; } 在{}之前的部分就是"选择器","选择器"指 ...

  5. CSS学习摘要-语法和选择器

    主要摘自网络开发者. 从最基本的层次来看,CSS是由两块内容组合而成的: 属性(Property):一些人类可理解的标识符,这些标识符指出你想修改哪一些样式,例如:字体,宽度,背景颜色等. 属性值(V ...

  6. CSS学习笔记之选择器

    目录 1.元素选择器 2.继承 3.选择器分组 4.声明分组 5.后代选择器 6.子元素选择器 7.相邻兄弟选择器 8.类选择器 9.ID 选择器 10.属性选择器 11.伪类 12.伪元素 1.元素 ...

  7. HTML学习笔记 CSS学习选择器案例 第五节 (原创) 参考使用表

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

  8. css学习_写法规范、选择器

    1.css(层叠样式表)样式主要目的(让页面更好看些) css尽量不要写内联样式,保证结构和样式分离原则: html专门负责结构,css专门负责样式. 2.css写法规范 选择器  { 属性 :值 : ...

  9. CSS学习笔记(4)--选择器(w3school)

    CSS3 选择器 在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. "CSS" 列指示该属性是在哪个 CSS 版本中定义的.(CSS1.CSS2 还是 CSS3.) ...

随机推荐

  1. 私有云存储搭建(owncloud)

    第一步.搭建LAMP(基于linux7.1.1503) 1 配置yum(网络加本地,下面为网络) [vault.centos.org_7.1.1503_os_x86_64_] name=added f ...

  2. html 一般标签 常用标签 表格

    body的属性: bgcolor                页面背景色 background            背景壁纸.图片 text                    文字颜色 top ...

  3. .NET 十五岁,谈谈我眼中的.NET

    2002年2月13日,第一个版本随着visual studio.net的发布,今天已经走过15年, .net团队写了一篇文章,里面有一个视频,Anders Hejlsberg已是白发苍苍的老人,我也从 ...

  4. java多线程安全问题 静态函数的修饰

    /* 如果同步函数被静态修饰后,使用的锁是什么呢? 通过验证,发现不在是this.因为静态方法中也不可以定义this. 静态进内存是,内存中没有本类对象,但是一定有该类对应的字节码文件对象. 类名.c ...

  5. ZwQueryVirtualMemory枚举进程模块

    ZwQueryVirtualMemory算是枚举进程方法中的黑科技吧,主要是该方法可以检测出隐藏的模块(类似IceSword). 代码VS2015测试通过 再次奉上源码链接:https://githu ...

  6. IOS编程学习笔记

    @interface -实例对象 +类名 #import "MyClass" @implementation MyClass -(id)initWithString:(NSStri ...

  7. 学习笔记——Java内部类练习题

    1.尝试在方法中编写一个匿名内部类. package com.lzw; public class AnonymityInnerClass { } class OuterClass4{ public O ...

  8. HTTP严格安全传输(HTTP Strict Transport Security, HSTS)chromuim实现源码分析(二)

    HTTP严格安全传输(HTTP Strict Transport Security, HSTS)chromuim实现源码分析(一) 下面来查看其他对保存HSTS信息的enabled_sts_hosts ...

  9. Android中Handler使用浅析

    1. Handler使用引出 现在作为客户,有这样一个需求,当打开Activity界面时,开始倒计时,倒计时结束后跳转新的界面(思维活跃的朋友可能立马想到如果打开后自动倒计时,就类似于各个APP的欢迎 ...

  10. centOS7 mini配置linux服务器(一)安装centOs7

    1. 准备centos-7 (minni镜像) 官网地址http://isoredirect.centos.org/centos/7/isos/x86_64/CentOS-7-x86_64-Minim ...