css中最基本几个选择器
css中有四种不同的选择器
①类选择器,又叫class选择器
.类选择器
{
属性名:属性值;
...
}
/*类选择器*/
.s1
{
font-weight:bold;
font-size:16px;
}
②id选择器
#id选择器名
{
属性名:属性值;
}
/*id选择器*/
#id1
{
font-size:40px;
}
③html元素选择器
html元素名称
{
属性名:属性值;
}
④通配符选择器
检索或设置对象四边的外补丁。默认值为 0 0。
如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。如果只提供一个,将用于全部的四边。如果提供两个,第一个用于上-下,第二个用于左-右。如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。
*{
margin-top:0px;上边距为0
margin-left:0px;左边距为0
margin:10px 30px 20px 40px
//有经验的程序员,如下
margin:0px;
padding:0px;
}
通配符选择器
该选择器可以用到所有的html元素,但是其优先权最低
*{
属性名:属性值;
... ...
}
简单的说,选择器就是在css中创建,而在网页页面(html,jsp,php,asp.net)中使用。
四个选择器的优先级
id选择器>class选择器>html选择器>通配符选择器
父子选择器是四个选择器的组合使用
/*父子选择器*/
对id1下的span进行修饰(中间必须加空格)
#id1 span{
color:red;
font-style:italic;
}
#id1 span span{
color:green;
}
#id1 span span a{
color:blue;
}
通过上面的总结
①父子选择器可以有多级(但是在实际的开发中不超过三层)
②父子选择器有严格的层级关系
③父子选择器不局限于什么类型的选择器
可以是id选择器 类选择器 ....
#id1 span span a
.s1 #id span
div #id .s2
1、id选择器和类选择器都可以有父子选择器
2、一个元素可以同时有id选择器和类选择器
3、id选择器的优先级高于类选择器
4、一个元素最多有一个id选择器,但是可以有多个类选择器
当一个元素被多个类选择器修饰的时候,各个类选择器之间用空格隔开
使用方法如下
<元素 class="类选择器1 类选择器2"/>html部分
当两个类选择器发生冲突的时候,则以写在css文件中的那个类选择器为准
5、在css文件中如果有多个类/id选择器,他们都有相同的部分,我们可以把相同的css样式放在一起
/*把各个类选择器的公共部分,单独抽取写一份,好处是可以减少css文件的冗余*/
把各个选择器中相同的部分抽取出来,单独写一份,各个选择器之间用逗号隔开
6、CSS文件本身会被浏览器从服务器下载到本地,才能显示效果
css中最基本几个选择器的更多相关文章
- 妙味css3课程---1-1、css中自定义属性可以用属性选择器么
妙味css3课程---1-1.css中自定义属性可以用属性选择器么 一.总结 一句话总结:可以的. 1.如何实现用属性选择器实现a标签根据href里面含有的字段选择背景图片? p a[href*=te ...
- CSS中的选择器之html选择器和伪类选择器
1.html选择器(标签选择器) 基本语法: html标签名称{ 属性名:属性值; 属性名:属性值; } 继续在上面的代码中做修改,实例代码: <!DOCTYPE html> <ht ...
- css中的7中属性选择器
在CSS的选择符中有七个属性选择符.它们分别是: 1.E[att] 选择具有att属性的E元素. 2.E[att="val"] 选择具有att属性且属性值等于val的E元素. 3. ...
- css中 ~的作用
这是 CSS3 element1~element2 选择器 定义和用法 element1~element2 选择器 element1 之后出现的所有 element2. 两种元素必须拥有相同的父元素, ...
- CSS中模拟父元素选择器
很多情况下,我们需要找到父元素,但可惜的是css中并没有这样的一个选择器. 至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章. 简单来说这个实现并不是真正的父元素选择器,只是利用其它思路来 ...
- CSS中选择器优先级顺序实战讲解
原文:CSS中选择器优先级顺序实战讲解 我们有些程序猿在给一个元素(比如div)应用样式的时候,会有一些疑问,为什么我写在后面的样式不能覆盖前面的样式呢,不是说CSS是层叠样式表吗? 如果你在开发中也 ...
- css中那些容易被我们程序猿所忽略的选择器
css中那些容易被我们程序猿所忽略的选择器 作为一个程序猿,我们可能会遇到这样的问题,假如:有5个li,要求给第三个li设置背景颜色怎么办?有人会说,用JS啊,循环遍历出第三个不就行了.但是,用JS解 ...
- css中所有的选择器
认识css中所有的选择器 什么是选择器 每一条样式申明(定义)由两部分组成 选择器{ 样式: } 标签选择器 p{ font-size:12px: line-height:1.6em; ...
- CSS中伪类选择器及伪元素
1.伪类选择器 在CSS中,最常用的伪类选择器是使用在a(锚)元素上的几种选择器,它们的使用方法如下: a:link{color:#FF0000;text-decoration:none} a:vis ...
随机推荐
- 对于自定义标签类中JspBody类的invoke方法的理解
下面是javaeeAPI中对于invoke()方法的介绍: 其中的参数out是一个Writer类的对象,如果写null,就是将标签体内容写到了与此jsp相关联的JspWriter对象,也就是下面的w: ...
- 走入PHP-变量、运算符
通过define()定义常量: PHP 5.3.0之后,可以使用const关键字在类定义之外定义常量: 下面是PHP的几个魔术变量: PHP支持一个执行运算符:反引号(``),PHP将尝试将反引号中的 ...
- 生成 HTMLTestRunner 测试报告学习总结
HTMLTestRunner 的安装与使用 HTMLTestRunner 是 Python 标准库的 unittest 模块的一个扩展. 在使用之前,我们需要先安装他.下载地址:https://pyp ...
- PL/SQL编程重点语句输出整理
create or replace procedure pr_mytest is v_test number() :=; v_char varchar2():='数据库'; c_changl cons ...
- iOS最好用的引导页
最近项目结束的时候又要改引导页,之前写的启动页改起来太麻烦了,所以就直接封装一个,功能可能还不是很完善,但是感觉用起来也比较方便,在这里和大家分享一下. 这是github的下载地址:https://g ...
- js计算器
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- js对象个人理解及记录
什么是对象 对象的定义是:无序属性的集合,其属性可以包括基本值.对象或函数. var car = {}; //比如我们拿一块铁造了一辆车,这的名字叫car /建一个空对象 car.length = ...
- Android Google AdMob 广告接入示例
Android Google AdMob 广告接入示例 [TOC] 首先请大家放心,虽然 Google搜索等服务被qiang了,但是 广告服务国内还是可以用的,真是普天同庆啊~~~噗! 其实这篇文章也 ...
- TypeScript入门-函数
▓▓▓▓▓▓ 大致介绍 TypeScript为JavaScript函数添加了额外的功能,让我们可以更容易地使用.TypeScript中的函数也包括JavaScript中最常见的两种函数 functio ...
- CSS 画三角形、圆
<div class="square"></div> <style> .square { height: 0px; width: 0px; bo ...