検索

css3 セレクター

取得したページ内のさまざまな要素に従って、css3 セレクターは 5 つのカテゴリに分類されます:

  1. Basic selector
  2. Hierarchical selector
  3. Pseudo-class selector

    1. Dynamic ps eudo クラスセレクター
    2. ターゲット擬似クラスセレクター
    3. 言語擬似クラスセレクター
    4. UI要素状態擬似クラスセレクター
    5. 構造擬似クラスセレクター
    6. 否定擬似クラスセレクター
  4. 疑似要素
  5. 属性セレクター

基本セレクター

基本セレクターは、CSS で最も頻繁に使用される基本的なセレクターであり、CSS で最も早く定義されたセレクターでもあります。基本セレクターを使用して、HTML ツリー構造内の最も主要な DOM 要素ノードを決定できます。

ワイルドカードセレクター

ワイルドカードセレクター(*)は、すべての要素を選択するために使用されます。もちろん、特定の要素の下にあるすべての要素を選択することもできます。

*{	margin:0;	padding:0;}

すべての要素の内外マージンが0ということです。

要素セレクター

要素セレクター(E)は、CSSセレクターの中で最も一般的で基本的なセレクターです。ドキュメントの要素には、html、body、p、div などが含まれます。

div{	background:blue;}

すべての div 要素の背景色が青であることを示します。

ID セレクター

ID セレクターを使用する前に、HTML ドキュメント内の対応する要素の id 属性と値を設定して、対応する要素を見つける必要があります。 ID セレクターは一意であり、同じ ID を持つ属性値をページ上に同時に表示することはできません。 CSS スタイルで ID セレクターを使用する場合は、(#id) のように、id 属性値の前に「#」記号を追加する必要があります。

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />	<title></title><style>    #yxz{        width:100px;        height:100px;        background:red;    }</style></head><body>	<div id="yxz">我有id</div>	<div>呵呵</div></body></html>

id属性値「yxz」を持つ要素の幅と高さが100pxで、背景が赤色であることを示します。

クラスセレクター

クラスセレクター(.class)は、文書要素から独立した方法で要素スタイルを指定します。使用方法はIDセレクターと同様で、まずHTML内で必要な要素のclass属性を定義し、その属性値を設定します。ただし、ID セレクターとは異なり、クラス セレクターはページ内で複数の同一のクラス名を持つことができますが、ID セレクターはページ全体で 1 つの ID 名のみを持つことができます。 CSS スタイルでクラス セレクターを使用する場合は、ピリオド ( .) を属性値の前に置きます ((.class) など)。

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />	<title></title><style>    .yxz{        width:100px;        height:100px;        background:red;    }</style></head><body>	<div class="yxz">我有类名</div>	<div>呵呵</div></body></html>

クラス属性値「yxz」を持つ要素の幅と高さが100pxで、背景が赤色であることを示します。

クラスセレクターを使用する別の方法として、マルチクラスセレクターがあります。 2 つ以上のクラス セレクターをマージすることで、1 つのクラス名とは異なる要素の効果を定義できます。

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />	<title></title><style>    .yxz{        width:100px;        height:100px;        background:red;    }    .yxz.sx{        border:1px solid black;    }</style></head><body><div class="yxz sx">我有两个类名</div><div class="yxz">呵呵</div></body></html>

クラス名「yxz」の2つのdivの幅、高さ、背景は同じですが、最初のdivは別のクラス名「sx」を持ち、それを通じて最初のdivにborder属性が追加されます。このようにして、複数の属性に一般的なスタイルと特別なスタイルを設定できます。

クラス名は HTML 文書内の異なる要素タグに同時に存在できるため。つまり、HTML ドキュメントでは、div にクラス名「yxz」を付けることができ、ul にもクラス名「yxz」を付けることができますが、場合によっては、クラス名を使用するために div にスタイルを設定するだけで十分な場合があります。 「Selector」というラベルが付いています。

div.yxz{/*样式*/}

こうすることで、クラス名「yxz」を持つ div 要素のみを照合することができます。

グループセレクター

グループセレクター(selector1、selectorN)は、同じスタイルの要素をグループ化し、各セレクターをカンマ(,)で区切ります。

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style>           h1,h2{        background:black;        color:white;        width:200px;        float:left;        margin-right:20px;    }</style></head><body><h1 id="胸无大志者-必受制于人">胸无大志者,必受制于人</h1><h2 id="丈夫生不五鼎食-死则五鼎烹耳">丈夫生不五鼎食,死则五鼎烹耳</h2></body></html>

h1とh2が同じスタイルであることを示します。

階層セレクター

階層セレクターは、HTML DOM 要素間の階層関係を通じて要素を取得します。主な階層関係には、要素を簡単に選択するために使用できます。必要な要素。

Descendant Selector

子孫セレクター(EF)は、スペースで区切られた包含セレクターとも呼ばれ、その機能は、特定の要素の子孫要素を選択することです。

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style>           div span{        background:black;        color:white;        float:left;        margin-right:20px;    }</style></head><body><div>    <span>胸无大志者,必受制于人</span>    <span>丈夫生不五鼎食,死则五鼎烹耳</span></div>   </body></html>

div の子孫要素のスパンと一致します。

サブセレクター

サブセレクター(E>F)は、大なり記号(>)で区切られた特定の要素のサブ要素のみを選択できます。

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style>           div span{        background:black;        color:white;        float:left;        margin-right:20px;    }</style></head><body><div>    <span>胸无大志者,必受制于人<span>丈夫生不五鼎食,死则五鼎烹耳</span></span></div>   </body></html>

選択できるのはdiv配下の子要素spanだけです。spanの子要素spanはdivの子孫要素なのでマッチングできません。

隣接兄弟セレクター

隣接兄弟セレクター (E+F) は、別の要素の直後の要素を選択でき、それらは同じ親要素を持ちます。

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style>           span+span{        background:black;        color:white;    }</style></head><body><div>    <span>胸无大志者,必受制于人</span>    <span>丈夫生不五鼎食,死则五鼎烹耳</span>    <span>胸无大志者,必受制于人</span>    <span>丈夫生不五鼎食,死则五鼎烹耳</span></div>   </body></html>

後続の兄弟要素のspanと隣接するspanと一致します。 3 番目のスパンは 2 番目のスパンに隣接し、4 番目のスパンは 3 番目のスパンに隣接しているため、これらも一致する可能性があります。

ユニバーサル兄弟セレクター

ユニバーサル兄弟セレクター(E〜F)はCSS3で新しく追加され、要素の後ろにあるすべての兄弟要素を選択するために使用されます。また、同じ親要素を持ちます。

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style>           span~span{        background:black;        color:white;    }</style></head><body><div>    <span>胸无大志者,必受制于人</span>    <span>丈夫生不五鼎食,死则五鼎烹耳</span>    <span>胸无大志者,必受制于人</span>    <span>丈夫生不五鼎食,死则五鼎烹耳</span></div>   </body></html>

最初のspan要素以降の兄弟span要素をすべて選択します。

伪类选择器

  css3中的伪类选择器可以分成6种:动态伪类选择器,目标伪类选择器,语言伪类选择器,UI状态伪类选择器,结构伪类选择器和否定伪类选择器。
  伪类选择器语法书写时和其他的CSS选择器写法有所区别,都以冒号(:)开头。

动态伪类选择器

  动态伪类并不存在于HTML中,只有当用户和网站交互的时候才能体现出来。动态伪类包含两种,第一种是在链接中常看到的锚点伪类,另一种是用户行为伪类。

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style>           a:link{        color:red;        text-decoration:none;    }    a:visited{       color:yellow;    }    a:hover,a:focus{        color:blue;        text-decoration:underline;    }    a:active{        color:black;    }</style></head><body><a href="#">胸无大志者,必受制于人</a>   </body></html>

  未访问时为红色且取消下划线,访问后为黄色,用户停留在链接,或链接获得焦点时显示下划线并设置蓝色,点击链接时为黑色。
  设置动态伪类选择器时,必须遵循一定的循序。因为这几个选择器具有相同的特殊性,所以根据在文档中的顺序来决定更特殊的选择器。那么选择器的循序就至关重要了,正常的循序应该是:link,:visited,:hover,:active。

目标伪类选择器

  目标伪类选择器“:target”用来匹配文档链接中的URI中某个标识符的目标元素。URI中的标识符通常会包含一个井号(#),后面带有一个标志符名称,例如“#yxz”,“:target”就是用来匹配ID为“yxz”的元素。":target"伪类选择器选取链接的目标元素,然后定义样式。

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style>       p{        font-size:16px;        line-height:20px;        width:0;        height:20px;        overflow:hidden;        -moz-transition:width 2s ease-in-out;         -webkit-transition:width 2s ease-in-out;         transition:width 2s ease-in-out;        position:absolute;        visibility:hidden;     }	/*假如目标被选中,后面的P元素如此如此*/        div:target p{        width:220px;        visibility:visible;    }</style></head><body>	<!--链接目标分别指向两个div-->	<a href="#yxz">点我</a>	<a href="#sx">点我</a>	<div id ="yxz">    	<p>胸无大志者,必受制于人</p>	</div>	<div id="sx">    	<p>丈夫生不五鼎食,死则五鼎烹耳</p>	</div></body></html>

语言伪类选择器

  语言伪类选择器是根据元素的语言编码匹配元素。这种语言信息必须包含在文档中,或者与文档关联,不能从CSS指定。为文档指定语言,有两种方法可以表示。
  如果使用HTML5,直接可以设置文档的语言。

<!DOCTYPE HTML><html lang="en-US">

  另一种方法就是手工在文档中指定lang属性,并设置对应的语言值。

<body lang="fr">

  E:lang(language)表示选择匹配E的所有元素,且匹配元素指定了lang属性,而且其值为language。

UI元素状态伪类选择器

  主要用于form表单元素上,UI元素的状态一般包括:启用,禁用,选中,未选中,获得焦点,失去焦点,锁定和待机等。在HTML元素中有可用和不可用状态,例如表单的文本输入框,还有选中和未选中状态,例如表单的复选和单选按钮。这几种状态都是CSS3选择器中常用的状态伪类选择器。

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style>	/*被禁用的表单元素显示轮廓*/       input:disabled{        outline:1px solid red;    }   </style></head><body><form>    <fieldset>        <legend>观海云远</legend>        <label for="ysg">杨肃观</label>        <input type="checkbox" name="yxz" id="ysg" />        <label for="qzh">秦仲海</label>        <input type="checkbox" name="yxz" id="qzh" disabled="disabled"/>        <label for="ly">卢云</label>        <input type="checkbox" name="yxz" id="ly" />        <label for="wdy">伍定远</label>        <input type="checkbox" name="yxz" id="wdy" />    </fieldset></form></body></html>

结构伪类选择器

  根据元素在文档树中的某些特性(如相对位置)定位到它们。

  结构伪类选择器中的参数n可以是整数,关键词或公式。
  整数:nth-child(3),选择第3个子元素。
  关键词:odd代表奇数子元素,even代表偶数子元素。
  公式:默认值为0,每次递增1。如:n+1,当n=0时,0+1=1,选择第1个子元素,当n=1时,1+1=2,选择第2个子元素,到选完所有子元素为止。

:first-child

  选择父元素中的第一个子元素。

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> 	/*选择ul中第1个li元素,改变它的项目符号为空心圆*/      ul li:first-child{        list-style-type:circle;    }</style></head><body><ul>    <li>杨肃观</li>    <li>秦仲海</li>    <li>卢云</li>    <li>伍定远</li></ul></body></html>

:last-child

  选择父元素中的最后一个子元素。

/*选择ul中最后一个li元素,他的项目符号变为空心圆*/ul li:last-child{	list-style-type:circle;}

:nth-child(n)

  选择父元素中的一个或多个子元素。

  当n为整数时:

/*选择ul中第三个li*/ul li:nth-child(3){	list-style-type:circle;}

  当n为关键词时:

/*选择ul中第奇数个li*/ul li:nth-child(odd){	list-style-type:circle;}

  当n为公式时:

/*选择ul中第奇数个li*/ul li:nth-child(n*2-1){	list-style-type:circle;}

:nth-last-child(n)

  与:nth-child类似,但却是从倒数选择子元素。

  当n为整数时:

/*选择ul中倒数第三个li*/ul li:nth-last-child(3){	list-style-type:circle;}

  当n为关键词时:

/*选择ul中倒数第奇数个li*/ul li:nth-last-child(odd){	list-style-type:circle;}

  当n为公式时:

/*选择ul中倒数第奇数个li*/ul li:nth-last-child(n*2-1){	list-style-type:circle;}

:nth-of-type(n)

  也与:nth-child类似,不同的是它只计算父元素中指定某种类型的子元素。

<ul>    <li>杨肃观</li>    <span>王一通</span>    <li>秦仲海</li>    <li>卢云</li>    <li>伍定远</li></ul>

  当结构中不止一种类型时,使用nth-child就不能够准确的指定元素了,假如我要匹配第2个li,写作li:nth-child(2)是不能够匹配的,因为文档中第2个子元素是span,所以匹配失败。

ul li:nth-of-type(2){	list-style-type:circle;}

  :nth-of-type能够从指定类型的子元素开始计数,第2个元素span不是li,所以被忽略。

:nth-last-of-type(n)

  与nth-of-type一样,都是用来选择指定某种类型的子元素,但它的计数方向却是从最后一个指定类型的子元素开始,使用方法与之前提到的nth-last-child一样。

:only-child

  表示一个元素是它父元素的唯一子元素。换句话说,匹配元素的父元素中仅有一个子元素。

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style>	/匹配第2个ul中的li,因为它的父元素只有一个子元素/       ul li:only-child{        list-style-type:circle;    }</style></head><body><ul>    <li>杨肃观</li>           <li>秦仲海</li>    <li>卢云</li>    <li>伍定远</li></ul><ul>    <li>王一通</li></ul></body></html>

:only-of-type

  用来选择一个元素是它父元素唯一一个指定类型的子元素。

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style>	/*选择第2个ul中的span,因为它的父元素中只有1个span元素*/       ul span:only-of-type{        color:red;    }</style></head><body><ul>    <li>杨肃观</li>           <li>秦仲海</li>    <li>卢云</li>    <li>伍定远</li>    <span>小白龙</span>    <span>伍崇卿</span></ul><ul>    <li>卢一云</li>    <li>卢二云</li>    <li>卢三云</li>    <li>卢四云</li>    <span>卢五云</span></ul></body></html>

:empty

  用来选择没有任何内容的元素。

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style>	/*匹配第2个div,因为它没有任何内容*/       :empty{        width:100px;        height:100px;        background:red;    }</style></head><body><div>胸无大志者,必受制于人</div>  <div></div></body></html>

否定伪类选择器

  否定伪类选择器“:not()”主要用来定位不匹配该选择器的元素。

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style>	/*匹配所有div元素中除了id名为yxz的所有元素*/       div:not([id="yxz"]){        color:red;    }</style></head><body><div>胸无大志者,必受制于人</div><div id="yxz">丈夫生不五鼎食,死则五鼎烹耳</div><div>大丈夫一生碌碌无为,与朽木腐草无异</div>  </body></html>

伪元素

  伪元素可用于定位文档中包含的文本,但无法在文档树中定位。伪元素早在css中就存在了,“:first-letter”,“:first-line”,“:before”,“:after”。在css3中对伪元素进行了一定的调整,在以前的基础上增加了一个冒号,相应的变成了“::first-letter”,“::first-line”,“::before”,“::after”,还增加了一个“::selection”。

::first-line

  选择文本块中的第一个字母。

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style>   	/*选择p段落文本中的第一个字*/    p::first-letter{        font:normal 900 2em/2em serif;        float:left;    }</style></head><body><p>胸无大志者,必受制于人</p></body></html>

::first-line

  与::first-letter类似,也是用来选择文本,不同的是,::first-line选择文本块的第一行。

/*选择段落文本中的第一行*/ p::first-line{        color:blue;    }

::before和::after

  可以在文本块之前(::before)或文本块之后(::after)插入额外的内容(content)或样式,生成的内容不会成为DOM的一部分。

/*在段落文本前加入内容"《",置为蓝色*/

p::before{
content:"《";
color:blue;
}
/在段落文本后加入内容"》",置为红色/
p::after{
content:"》";
color:red;
}

::selection

  匹配突出显示的文本。伪元素::selection仅接受两个参数,一个是background,一个是color。浏览器默认情况下,选择突出的网站文本是深蓝色背景,白色的字体。

/*背景色为灰色,前景色为白色*/p::selection{	background:#808080;	color:#ffffff;}/*为了支持火狐浏览器,需要加上特别的前缀*/   p::-moz-selection{	background:#808080;	color:#ffffff;}

属性选择器

  在HTML中,通过各种各样的属性可以给元素增加很多附加的信息。css2中引入了一些属性选择器,这些选择器可基于元素的属性来匹配元素,而css3在css2的基础上扩展了这些属性选择器,支持基于模式匹配来定位元素。

E[attr]

  选择具有属性attr的元素E。

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style>	/*选择a元素中具有href属性的元素*/      a[href]{       text-decoration:none;       color:black;   }</style></head><body><a href="http://www.baidu.com" id=“yxz-1” class="hello world">胸无大志者,必受制于人</a><br /><a href="http://www.taobao.com" id="yxz-2" class="hello yxz">大丈夫一生碌碌无为,与朽木腐草无异</a></body></html>

E[attr=val]

  选择E元素中属性attr的值为val的元素。

/*选择a元素中的href属性且属性值为http://www.baidu.com的属性*/      a[href="http://www.baidu.com"]{       text-decoration:none;       color:black;   }

E[attr|=val]

  选择E元素中属性attr的属性值以val开头或以val-开头的元素。

/*选择a元素中的id属性且属性值以yxz或以yxz-开头的元素*/a[id|="yxz"]{	text-decoration:none;	color:black;}

E[attr~=val]

  选择E元素中属性attr的值val是被空格隔开的字符串。

/*选择a元素中的class属性且属性值yxz是被空格隔开的*/a[class~="yxz"]{	text-decoration:none;	color:black;}

E[attr*=val]

  选择E元素中的属性attr,且值val在字符串的任意处。

/*选择a元素中的class属性且属性值yxz在字符串的任意处*/a[class*="yxz"]{	text-decoration:none;	color:black;}

E[attr^=val]

  选择E元素中的属性attr,且值以val开头。

/*选择a元素中的href属性,且值以http开头*/a[href^="http"]{	text-decoration:none;	color:black;}

E[attr$=val]

  选择E元素中的属性attr,且值以val结尾。

/*选择a元素中的href属性,且值以com结尾*/a[href$="com"]{	text-decoration:none;	color:black;}

css3选择器完,但其中运用奥妙,却永无止

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
HTML、CSS、およびJavaScriptの理解:初心者向けガイドHTML、CSS、およびJavaScriptの理解:初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript:1)htmlStructuresContent、2)cssStylesit、および3)Javascriptaddsinteractivity、形成、

HTMLの役割:Webコンテンツの構造HTMLの役割:Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTMLとコード:用語を詳しく見るHTMLとコード:用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript:Web開発者に不可欠なツールHTML、CSS、およびJavaScript:Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割:コアの責任HTML、CSS、およびJavaScriptの役割:コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLは初心者のために簡単に学ぶことができますか?HTMLは初心者のために簡単に学ぶことができますか?Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1)HTMLの学習曲線はスムーズで簡単に開始できます。 2)基本タグをマスターして、Webページの作成を開始します。 3)柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用​​できます。 4)豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTMLでの開始タグの例は何ですか?HTMLでの開始タグの例は何ですか?Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は?CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は?Apr 05, 2025 pm 01:24 PM

メニューで点線のラインセグメンテーション効果を設計する方法は?メニューを設計するときは、通常、皿の名前と価格の間に左右に合わせることは難しくありませんが、真ん中の点線またはポイントはどうですか...

See all articles

ホット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ヘンタイを無料で生成します。

ホットツール

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン