コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ ウェブフロントエンド htmlチュートリアル CSS选择器总结 - zhongJaywang

CSS选择器总结 - zhongJaywang

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
May 20, 2016 pm 01:49 PM

 最近在www.w3school.com.cn学习了CSS选择器，下面做一个知识汇总。部分源码来自www.w3school.com.cn！

 插入样式表的方法有三种：

 第一种：外部样式表

<span style="color: #0000ff;"><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="mystyle.css"</span> <span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span></span></span>
ログイン後にコピー

第二种：内部样式表

<span style="color: #0000ff;"><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
  hr </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> sienna</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
  p </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">margin-left</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 20px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
  body </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">background-image</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> url("images/back40.gif")</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #0000ff;"></span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span></span></span>
ログイン後にコピー

第三种：内联样式表

<span style="color: #0000ff;"><span style="color: #800000;">p </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="color: sienna; margin-left: 20px"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
This is a paragraph
</span><span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span></span>
ログイン後にコピー

 

CSS基本的选择器有四种，其它复杂的选择器都由这四种组合而成

  1. 元素选择器（类型选择器）
  2. id选择器
  3. 类选择器
  4. 属性选择器

选择器的基础语法，规则由两个主要的部分构成：选择器，以及一条或多条声明。

<span style="color: #800000;">//CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector </span>{<span style="color: #ff0000;">declaration1; declaration2; ... declarationN </span>}<span style="color: #800000;">

//每条声明由一个属性和一个值组成。

selector </span>{<span style="color: #ff0000;">property</span>:<span style="color: #0000ff;"> value</span>}
ログイン後にコピー

 

     1. 元素选择器（类型选择器）

  1. <span style="color: #800000;">h1 </span>{<span style="color: #ff0000;">font-family</span>:<span style="color: #0000ff;"> sans-serif</span>;}
    ログイン後にコピー
同时也可以为XML文档设置样式：
ログイン後にコピー

XML文档：

<span style="color: #0000ff;"></span><span style="color: #ff00ff;">xml version="1.0" encoding="ISO-8859-1"</span><span style="color: #0000ff;">?></span>
<span style="color: #0000ff;"></span><span style="color: #ff00ff;">xml-stylesheet type="text/css" href="note.css"</span><span style="color: #0000ff;">?></span>
<span style="color: #0000ff;"><span style="color: #800000;">note</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">to</span><span style="color: #0000ff;">></span>George<span style="color: #0000ff;"></span><span style="color: #800000;">to</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">from</span><span style="color: #0000ff;">></span>John<span style="color: #0000ff;"></span><span style="color: #800000;">from</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">heading</span><span style="color: #0000ff;">></span>Reminder<span style="color: #0000ff;"></span><span style="color: #800000;">heading</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>Don't forget the meeting!<span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">note</span><span style="color: #0000ff;">></span></span></span></span></span></span>
ログイン後にコピー

CSS样式：

<span style="color: #800000;">note
  </span>{<span style="color: #ff0000;">
  font-family</span>:<span style="color: #0000ff;">Verdana, Arial</span>;<span style="color: #ff0000;">
  margin-left</span>:<span style="color: #0000ff;">30px</span>;
  }<span style="color: #800000;">

to
  </span>{<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;">28px</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> block</span>;
  }<span style="color: #800000;">

from
  </span>{<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;">28px</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> block</span>;
  }<span style="color: #800000;">

heading
  </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> red</span>;<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;">60px</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> block</span>;
  }<span style="color: #800000;">

body
  </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> blue</span>;<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;">35px</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> block</span>;
  }
ログイン後にコピー

 

    2.id选择器

id 属性只能在每个 HTML 文档中出现一次！

HTML代码：

<span style="color: #0000ff;"><span style="color: #800000;">p </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="red"</span><span style="color: #0000ff;">></span>这个段落是红色。<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">p </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="green"</span><span style="color: #0000ff;">></span>这个段落是绿色。<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span></span></span>
ログイン後にコピー

CSS样式：

<span style="color: #800000;">#red </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">red</span>;}<span style="color: #800000;">
#green </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">green</span>;}
ログイン後にコピー

    3.类选择器

在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。

<span style="color: #0000ff;"><span style="color: #800000;">h1 </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="center"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
This heading will be center-aligned
</span><span style="color: #0000ff;"></span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="center"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
This paragraph will also be center-aligned.
</span><span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span></span></span>
ログイン後にコピー

CSS样式：

<span style="color: #800000;">.center </span>{<span style="color: #ff0000;">text-align</span>:<span style="color: #0000ff;"> center</span>}
ログイン後にコピー

    4.属性选择器

css属性选择器参考
[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。

 

 

 

 

 

 

 

 

 

 

 

 

为了更准确的定位HTML元素并对其添加样式，在上面四种基础选择器上面，CSS选择器还可以分成：分组选择器，派生选择器，后代选择器，子元素选择器，相邻兄弟选择器，伪类和伪元素。

 

*1.分组选择器

<span style="color: #008000;">/*</span><span style="color: #008000;"> no grouping </span><span style="color: #008000;">*/</span><span style="color: #800000;">
h1 </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">blue</span>;}<span style="color: #800000;">
h2 </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">blue</span>;}<span style="color: #800000;">
h3 </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">blue</span>;}<span style="color: #800000;">
h4 </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">blue</span>;}<span style="color: #800000;">
h5 </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">blue</span>;}<span style="color: #800000;">
h6 </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">blue</span>;}

<span style="color: #008000;">/*</span><span style="color: #008000;"> grouping </span><span style="color: #008000;">*/</span><span style="color: #800000;">
h1, h2, h3, h4, h5, h6 </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">blue</span>;}
ログイン後にコピー

*2.派生选择器

派生选择器是通过依据元素在其位置的上下文关系来定义样式的。

HTML代码：

<span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用<span style="color: #0000ff;"></span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>我是斜体字。这是因为 strong 元素位于 li 元素内。<span style="color: #0000ff;"></span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>我是正常的字体。<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span></span></span></span></span></span></span>
ログイン後にコピー

CSS代码：

<span style="color: #800000;">li strong </span>{<span style="color: #ff0000;">
    font-style</span>:<span style="color: #0000ff;"> italic</span>;<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;"> normal</span>;
  }
ログイン後にコピー

 *3.后代选择器

后代选择器又称包含选择器，可以选择某元素的任意一代的后代元素。

HTML代码：

<span style="color: #0000ff;"><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>This is a <span style="color: #0000ff;"><span style="color: #800000;">em</span><span style="color: #0000ff;">></span>important<span style="color: #0000ff;"></span><span style="color: #800000;">em</span><span style="color: #0000ff;">></span> heading<span style="color: #0000ff;"></span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>This is a <span style="color: #0000ff;"><span style="color: #800000;">em</span><span style="color: #0000ff;">></span>important<span style="color: #0000ff;"></span><span style="color: #800000;">em</span><span style="color: #0000ff;">></span> paragraph.<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span></span></span></span></span>
ログイン後にコピー

CSS代码：

<span style="color: #800000;">h1 em </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">red</span>;}
ログイン後にコピー

*4.子元素选择器

子元素选择器只可选择某元素第一代后代的选择器。

HTML代码：

<span style="color: #0000ff;"><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>This is <span style="color: #0000ff;"><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>very<span style="color: #0000ff;"></span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>very<span style="color: #0000ff;"></span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span> important.<span style="color: #0000ff;"></span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>This is <span style="color: #0000ff;"><span style="color: #800000;">em</span><span style="color: #0000ff;">></span>really <span style="color: #0000ff;"><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>very<span style="color: #0000ff;"></span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span><span style="color: #800000;">em</span><span style="color: #0000ff;">></span> important.<span style="color: #0000ff;"></span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span></span></span></span></span></span></span>
ログイン後にコピー

CSS代码：

<span style="color: #800000;">h1 > strong </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">red</span>;}
ログイン後にコピー

*5.相邻兄弟选择器

相邻兄弟选择器会选择某一元素紧随其后的元素，但是前提是他们拥有相同的父级。

eg1:

HTML代码：

<span style="color: #0000ff;"><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>This is a heading<span style="color: #0000ff;"><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>This will be styled.<span style="color: #0000ff;"></span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>This will not be styled.<span style="color: #0000ff;"></span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span></span></span></span></span></span></span>
ログイン後にコピー

 

CSS代码：

<span style="color: #800000;">h2 + strong </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">red</span>;}
ログイン後にコピー
  • 语法规则是h2和strong之间有一个“＋”，“＋”和前面的h1或者后面的strong之间的空格都是可有可无的。
  • 在 以上例子中，第一个strong紧邻着h2并且他们拥有相同的父级(h1)，所以h2 + strong会选择到第一个而不会选到第二个.

eg2:

HTML代码：

<span style="color: #0000ff;"><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> 
    <span style="color: #0000ff;"><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>     
        <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>List item 1<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> 
        <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>List item 2<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> 
        <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>List item 3<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> 
    <span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> 
     <span style="color: #0000ff;"><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span> 
         <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>List item 1<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> 
         <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>List item 2<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> 
         <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>List item 3<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> 
    <span style="color: #0000ff;"></span><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span> 
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span>
ログイン後にコピー

 

CSS代码：

<span style="color: #800000;">li + li </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">red</span>;}
ログイン後にコピー
  • 在以上的例子中li+li是选择紧挨着li后面的第一个
  • ，所以第一个
  • 不会被选择；而第二个
  • 是紧挨着第一个li的，所有会被选择；第三个
  • 是紧挨着第二个
  • 的，也会被选择。

 *6伪类

伪类的语法：

<span style="color: #800000;">selector : pseudo-class </span>{<span style="color: #ff0000;">property</span>:<span style="color: #0000ff;"> value</span>}
ログイン後にコピー

 

CSS 类也可与伪类搭配使用：

<span style="color: #800000;">selector.class : pseudo-class </span>{<span style="color: #ff0000;">property</span>:<span style="color: #0000ff;"> value</span>}
ログイン後にコピー

 

属性 描述
:active 向被激活的元素添加样式。
:focus 向拥有键盘输入焦点的元素添加样式。
:hover 当鼠标悬浮在元素上方时，向元素添加样式。
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。
:first-child 向元素的第一个子元素添加样式。
:lang 向带有指定 lang 属性的元素添加样式。

 

 

 

 

 

 

 

 

 

 

 

 

超链接例子：

<span style="color: #800000;">a:link </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;"> #FF0000</span>}        <span style="color: #008000;">/*</span><span style="color: #008000;"> 未访问的链接 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
a:visited </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;"> #00FF00</span>}    <span style="color: #008000;">/*</span><span style="color: #008000;"> 已访问的链接 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
a:hover </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;"> #FF00FF</span>}    <span style="color: #008000;">/*</span><span style="color: #008000;"> 鼠标移动到链接上 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
a:active </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;"> #0000FF</span>}    <span style="color: #008000;">/*</span><span style="color: #008000;"> 选定的链接 </span><span style="color: #008000;">*/</span>
ログイン後にコピー

 

*7伪元素

属性 描述
:first-letter 向文本的第一个字母添加特殊样式。
:first-line 向文本的首行添加特殊样式。
:before 在元素之前添加内容。
:after 在元素之后添加内容。

 

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

レポ：チームメイトを復活させる方法
1 か月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
2週間前 By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー：巨大な種を手に入れる方法
1 か月前 By 尊渡假赌尊渡假赌尊渡假赌
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？
4週間前 By DDD
R.E.P.O.ファイルの保存場所：それはどこにあり、それを保護する方法は？
4週間前 By DDD
もっと見る

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？
7364
15
Java チュートリアル
1628
14
CakePHP チュートリアル
1353
52
Laravel チュートリアル
1266
25
PHP チュートリアル
1214
29
もっと見る
Related knowledge
公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？ 公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？ Mar 04, 2025 pm 12:32 PM

公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、

WebページのPNG画像にストローク効果を効率的に追加する方法は？ WebページのPNG画像にストローク効果を効率的に追加する方法は？ Mar 04, 2025 pm 02:39 PM

この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？ HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？ Mar 17, 2025 pm 12:27 PM

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

＆lt; datalist＆gt;の目的は何ですか 要素？ ＆lt; datalist＆gt;の目的は何ですか 要素？ Mar 21, 2025 pm 12:33 PM

この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

＆lt; Progress＆gt;の目的は何ですか 要素？ ＆lt; Progress＆gt;の目的は何ですか 要素？ Mar 21, 2025 pm 12:34 PM

この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？ HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？ Mar 17, 2025 pm 12:20 PM

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

＆lt; meter＆gt;の目的は何ですか 要素？ ＆lt; meter＆gt;の目的は何ですか 要素？ Mar 21, 2025 pm 12:35 PM

この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex

＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？ ＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？ Mar 20, 2025 pm 06:05 PM

この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。

See all articles